実践コーディングスキル - 第1章 Lesson2

第2回:レイアウトのためのタグを追加してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<header>タグや<div>タグ、<footer>タグなどを利用して、ウェブサイトのレイアウトを組むためのマークアップ方法を解説しています。



この動画で学べること

・レイアウトのためのタグを追加する方法



レイアウトのためのタグを追加していこう

Webサイトのレイアウトを組むためには、まずボックスを作る必要があります。
ボックスを作るタグは<div>タグでしたね。
ではヘッダー部分の<div>ボックスを作り、これがヘッダーであるということを示すため、id名をつけておきます。


<div id="header"></div>



同じように、メイン画像をくるむ部分、左側のバナー部分、右側のお知らせ部分、フッター部分のボックスも作っていきましょう。



<div id="mainimage"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>




ここで少し、ヘッダーとフッターに注目してください。
ヘッダーとフッターは、それぞれ<div>タグで囲みましたが、
HTMLのバージョンが更新されてから新しく追加されたタグに、<header>と<footer>というものがあり、これらを使うとid名をつけたりしなくてもヘッダー、フッターと認識させることができます。
なので、先ほどかいた部分をこのように書き換えておきましょう。



<header></header>
<footer></footer>



次に、ページの横幅を決めるための大きなボックスが必要です。
ヘッダーからお知らせ部分までをくるむボックス、wrapperを追加しましょう。



<div id="wrapper">
<span></span><header></header>
<span></span><div id="mainimage"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<footer></footer>




<div>id名wrapperで大きなボックスを作れたら、今回はこれで完成です。