編集画面を「index.html」のタブに切り替えましょう。
また、「html01」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。
またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。
必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう
まずは<footer></footer>タグのブロック自体を追加しましょう。
- <header></header>タグの終了タグの下を改行する。
- ハイライトされている20・21行目の内容を記述する。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">LEVEL EASY</h1>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">PROFILE</a></li>
</ul>
</nav>
<!-- / .wrapper --></div>
</header>
<footer>
</footer>
</body>
</html>ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
これで<footer></footer>タグの準備ができました。
<div class=”wrapper”></div>タグのhtmlコーディング
次はコンテンツ幅である<div class=”wrapper”></div>タグを追加しましょう。
<div class=”wrapper”></div>タグは前回も使用しましたが、覚えていますか？
- <footer></footer>タグの開始タグの下を改行する。
- ハイライトされている21・22行目の内容を記述する。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">LEVEL EASY</h1>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">PROFILE</a></li>
</ul>
</nav>
<!-- / .wrapper --></div>
</header>
<footer>
<div class="wrapper">
<!-- / .wrapper --></div>
</footer>
</body>
</html>ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
<footer></footer>タグの内側にコンテンツ幅の<div></div>タグを準備しました。
<div></div>タグは名前をつけて他の<div></div>タグと区別することができます。
今回は「wrapper」という名前にしています。
<p></p>タグのhtmlコーディング
次は<footer></footer>タグ内で唯一のコンテンツである著作権表記「 © Chugoku Gakuen.」をマークアップしている<ｐ></p>タグを追加しましょう。
- <footer></footer>タグの内側の<div class=”wrapper”></div>タグの開始タグの下を改行する。
- ハイライトされている22行目の内容を記述する。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">LEVEL EASY</h1>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">PROFILE</a></li>
</ul>
</nav>
<!-- / .wrapper --></div>
</header>
<footer>
<div class="wrapper">
<p>© Chugoku Gakuen.</p>
<!-- / .wrapper --></div>
</footer>
</body>
</html>ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
すでにコーディングを行った<header></header>の下に、
「© Chugoku Gakuen.」という文字列が表示されていたら正解です。
編集画面を「main.css」のタブに切り替えましょう。
最初に「footer {}」のcssの指定を追加しましょう。
- 「header .wrapper nav li a {〜}」の下を改行する。
- ハイライトされている86〜88行目の内容を記述する。
main.css
/*-- 〜上部省略〜 --*/
header .wrapper nav li a {
display: block;
padding: 10px;
color: #999;
}
footer {
margin-top: auto; /* 上部外側の余白をautoにすることでブラウザ表示領域の最下部に配置する */
}margin-top: auto;（87行目）
= 上部外側の余白をautoにすることでブラウザ表示領域の最下部に配置する
ここで「<body></body>タグ」と「<footer></footer>タグ」の関係性について注目してください。
以下の図を再度確認してみましょう。
<body></body>タグのすぐ内側には「<header></header>」「<main></main>」、
そして現在コーディングを行っている「<footer></footer>」がありますね。
「<body></body>タグ」と「<footer></footer>タグ」の関係性を一言で言うと・・・
「<footer></footer>タグの親要素は<body></body>タグ」という表現になります。
逆に言えば「<body></body>タグの子要素に<footer></footer>タグがある」という表現です。
もう１点思い出しましょう。
html、bodyのcssコーディングで「html , body {}」および「body {}」に対して以下の指定をしましたね。
html,bodyに・・・
bodyに・・・
- display: flex;（47行目） = bodyの内側のレイアウトをフレキシブル（可変・柔軟）に指定
- flex-direction: column;（48行目） = bodyの内側の要素のレイアウトを縦に均等配置するように指定
一言で言えば・・・
「最低でも高さ100%のbody {}の内側（子要素）のレイアウトを柔軟にして縦方向に均等配置する」という事になります。
親要素に上記が指定されていて子要素に「margin-top: auto;」が指定されていると、
親要素内で子要素が最下部に配置されるというテクニックを使用して、
たとえ<header></header>の間のコンテンツのボリュームがない場合であっても、
<footer></footer>タグをブラウザ表示領域の最下部に配置するレイアウトを実現しています。
ブラウザで確認する
書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「© Chugoku Gakuen.」がブラウザ表示領域の最下部にありますか？
次に「footer .wrapper {}」のcssの指定を追加しましょう。
- 「footer {〜}」の下を改行する。
- ハイライトされている90〜93行目の内容を記述する。
main.css
/*-- 〜上部省略〜 --*/
footer {
margin-top: auto;
}
footer .wrapper {
padding: 20px;
border-top: 1px solid #999; /* 上部に「1pxのグレーの実線」を表示させる */
}| プロパティ | 指定の効果 | 値 |
|---|---|---|
| border | 要素の境界を指定 | 参考ページ |
border-top: 1px solid #999;（92行目）
= 上部に「1pxのグレーの実線」を表示させる
「border」と読んで字のごとく線を表示させるプロパティです。
ウェブデザインAの「cssの基本的な考え方と記述方法」の解説で、
「現時点では1つのプロパティに1つの値と覚えてください」と言いましたが、
この記述は「1px solid #999」と複数の値を記述していますよね。
これはborderなどで記述の簡素化のために行える一括指定の方法です。
以下の記述例は上下ともに同じ指定になります。
borderの太さ・形状・色を個別に指定した場合
セレクタ {
border-width: 1px;
border-style: solid;
border-color: #999;
}全く同じ指定を一括で指定した場合
セレクタ {
border: 1px solid #999;
}この一括指定の方法は「ショートハンド」と呼ばれています。
ショートハンドは「font」や「background」など様々なプロパティでも使用しますので、
言葉だけでも覚えておくとよいでしょう。
ブラウザで確認する
書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「© Chugoku Gakuen.」の上部に細いグレーの線が引かれていますか？
次に「footer .wrapper p {}」のcssの指定を追加しましょう。
- 「footer .wrapper {〜}」の下を改行する。
- ハイライトされている95〜99行目の内容を記述する。
main.css
/*-- 〜上部省略〜 --*/
footer .wrapper {
padding: 20px;
border-top: 1px solid #999; /* 上部に「1pxのグレーの実線」を表示させる */
}
footer .wrapper p {
font-size: 16px;
line-height: 30px;
font-style: normal;
}ブラウザで確認する
書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「© Chugoku Gakuen.」に対しての指定ですが、特に変更はありません。
次はページのメインコンテンツブロック<main></main>タグ、
およびメインコンテンツのメイン記事ブロック<article></article>の、
html・cssコーディングを行っていきます。
「index.html」「main.css」ともに、今までのように下に追記するのではなく、
今まで記述したコードの途中に割り入るように追加するため注意する必要があります。
