[コーディングの実践]LEVEL EASY

div#footerタグのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。
該当箇所の画像は以下です。

1. </div> (div#headerの終了タグ・19行目)の下を改行し、以下の②の文字列を打ち込み、行末で[Tab]キーを押す。
2. #footer>.wrapper>p{&copy; Chugoku-Gakuen.}[Tab]
3. index.htmlを上書き保存Ctrl + Sする。

div#footerタグのhtmlコーディングをEmmet記法を使って1行で終わらせてしまいました。

&copy;

div#footerの記述にある「&copy;」はhtmlの特殊文字です。プログラム記述ルールで直接記述ができない記号のようなものは特殊文字を使用することがあります。今回のようにコード記述で「&copy;」と書いた場合、ブラウザを通して表示すると「©」と表示されます。

ブラウザで確認する

ブラウザを開いてページを更新F5キーしてみましょう。
先ほど記述したdiv#headerタグのブロックの下に「© Chugoku-Gakuen.」という文字列が表示されました。
このdiv#footerは本来ページ表示部分の一番下にレイアウトしなければいけません。cssを使ってレイアウトを実現しましょう。

div#footerタグのcssコーディング

編集画面を「style.css」のタブに切り替えましょう。

div#footerのcssコーディング(Emmet記法)

該当箇所は以下です。

1. div#header {}の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
2. div#footer{}
3. {と}の間を改行し、以下の④の文字列を打ち込み、行末で[Tab]キーを押す。
4. mta[Tab]
5. style.cssを上書き保存Ctrl + Sする。

mta

margin-top: auto; / プロパティ・値解説

ブラウザで確認する

一旦ブラウザを開いてページを更新F5キーしてみましょう。
div#footerが本来の場所であるページ表示部分の一番下にレイアウトされました。
これは「margin-top: auto;」を使ったレイアウトテクニックです。

div.wrapperのcssコーディング(Emmet記法)

該当箇所は以下です。

1. 先ほど記述した「margin-top: auto;」の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
2. div.wrapper {} ※上のGIF画像は「div」を打つのを忘れてました、ごめん・・・
3. {と}の間を改行し、以下の④の文字列を打ち込み、行末で[Tab]キーを押す。
4. p20+bdt1-s-#999[Tab]
5. style.cssを上書き保存Ctrl + Sする。

p20

padding: 20px;

bdt1-s-#999

border-top: 1px solid #999; / プロパティ・値解説

pのcssコーディング(Emmet記法)

1. 先ほど記述した「border-top: 1px solid #999;」の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
2. p {}
3. {と}の間を改行し、以下の④の文字列を打ち込み、行末で[Tab]キーを押す。
4. fsz16+lh30px+fsn[Tab]
5. style.cssを上書き保存Ctrl + Sする。

fsz16

font-size: 16px; / プロパティ・値解説

lh30px

line-height: 30px; / プロパティ・値解説

fsn

font-style: normal;