14言語・98の基本

ページを区切る要素

内容に合わせて、ページの区画を決めます。

文法だけ見る

何をする書き方?

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を使います。

自分の言葉でメモ

記録はこのブラウザーに保存されます。

公式資料で詳しく読む