セクションを分けて、IDを設定しよう

このレッスンでは div と セクションタグによる セクション分けについて学びます html は文書構造の他にも 文書を第一章、第二章ですとか そのようにセクション分けを 意味として持たせることができます。 これをすることで文書構造が より明確になりますので 一緒にマークアップをしていきましょう。 それでは、begin のフォルダーを Sublime Text に 落として開きます。 そして、index.html を ダブルクリックで開いておきます。 そして、このセクション分けは 明確な正解というものが なかなか難しいです。 各サイト、各ページによって セクションの数は変わってきます。 じっくり考えながら セクション分けをすることが重要です。 また、分かりやすいセクションもあります。 それが例えば、ヘッダーであったり フッターという サイトの上部そしてサイトの下部のエリアが とても分かりやすいセクションですね。 まずはそこからセクション分けを していきましょう。 まず、body の下の９行目 ここに header というタグを 打っていきましょう。 header そして CSS で使いたいと思うので id をあらかじめ ふっておきたいと思います。 id 属性 header と入れておきます。 そして、終了がどこになるかというと ナビも包んで閉じたいと思いますので このグローバルナビの後ろで 閉じておきたいと思います。 それでは、ここで終了タグ header を閉じておきます。 そして、ここで必ずセクション分けをしたら コメントをしておきましょう。 そうしますと、非常にわかりやすくなります。 今回は、id header をこの様に #header そして 閉じを表す / を付けてあげて そして、Sublime Text の ショートカット、 Mac は Command / Windows は Ctrl / で コメントアウトしておきます。 これで、ここまでがヘッダーですという メモを残すことができました。 そして、フッターも先に マークアップをしておきましょう。 フッターはニュースが終わった後 こちらのエリアがフッターになりますので こちらに footer そして id=footer と 名前も付けておきましょう。 そしてコピーライトの表記の後ろで footer…