何をする書き方?
headerは導入、navは主なナビゲーション、mainはページの中心の内容、footerは末尾の情報を示します。sectionは見出しのあるまとまりに使います。divは特別な意味を持たない容器です。
基本の形
<main>
<section>内容</section>
</main>mainページの主要な内容。section主題を持つひとまとまり。divスタイルや配置のための汎用容器。短い例で確かめる
index.html
<main>
<h1>日記</h1>
<p>今日は晴れです。</p>
</main>結果
日記
今日は晴れです。
準備・実行方法を確認する
テキストエディターで index.html を作り、UTF-8で保存します。ファイルをブラウザーで開くと表示を確認できます。変更したら保存して再読み込みしてください。
もう少し詳しいコードを見る
index.html
<header><h1>週末の記録</h1></header>
<main>
<section>
<h2>読んだ本</h2>
<p>短編小説を読みました。</p>
</section>
</main>
<footer>書いた人:海</footer>結果
週末の記録
読んだ本
短編小説を読みました。
書いた人:海
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「ページを区切る要素」の書き方はどれ?
少し変えてみよう
mainの中に「行った場所」というsectionをもうひとつ作ってみましょう。
つまずいたら、ここを確認
sectionは単なる見た目の囲みではありません。意味を持たない配置用の囲みにはdivを使います。
自分の言葉でメモ
記録はこのブラウザーに保存されます。