HTMLスキル - 第3章 Lesson2

レイアウトのためのタグを記述してみよう

   

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

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

Webサイトのレイアウトを組むためには、コンテンツをグルーピングする必要があります。
この動画では、グルーピングをするためのタグ<header>、<div>、<footer>タグについて解説します。



この動画で学べること

・レイアウトを組むためのHTMLタグの書き方



WebサイトレイアウトのためのHTMLタグの書き方

・ヘッダー
・コンテンツ
・フッター
をそれぞれグループ化するためのタグを書くことが必要になります。



まずは、ヘッダーを作っていきます。
<body>の開始タグの後ろに<header>タグを書きます。
前回書いたh1とh2をコピー&ペーストで<header>タグの中に書きます。
一度保存してブラウザでみますが、変化はありません。
でも、<header>タグで囲むことができています。




次にメイン画像部分を見ていきましょう。
まだ中に表示する文章やタグがないのですが、要素を入れるための箱を作っていきます。
<header>タグの後ろに<div>タグを書きます。
コンテンツ部分(わたしにできること)の部分もメイン画像部分と同じように、先ほど作った<div>タグの後ろに<div>タグを書きます。




最後にフッター部分です。
<div>タグの後ろに、<footer>タグを書きましょう。
これで、レイアウトのためのタグを書くことができました。



 <header>
<h1 style="color: red;">Yumi Tamura</h1>
<h2 style="color: blue;">I am a web designer in Kyoto.</h2>
</header>
<div></div>
<div></div>
<footer></footer>