LESSON 02 · 文章を組み立てる
見出しは文章の道しるべ、段落はひとまとまりの話です。この2つを使うだけで、長い文章も読みやすく整理できます。
今日できるようになること
見出しと段落を使って、短い「週末の記録」を作ります。前のレッスンで保存した index.html を使い、body の中だけを書き換えましょう。
見出しには順番がある
見出しは h1 から h6 までの要素＊1で表します。ページ全体の題名を h1、大きな章を h2、章の中の小さなまとまりを h3 にすると、話のつながりが分かります。
＊1 要素：タグと、その中身を合わせた部品です。例えば <h2>持ち物</h2> 全体が1つの見出し要素です。
数字は、文字の大きさを選ぶためではありません。見出しの深さを表します。「小さい字にしたいから h4」と飛ばさず、内容のまとまりで決めます。
コピーして試そう
<h1>週末の記録</h1>
<p>日曜日に近くの公園へ行きました。</p>
<h2>公園で見つけたもの</h2>
<p>池のそばに小さな花が咲いていました。</p>
<h3>花の色</h3>
<p>白と黄色の花がありました。</p>
<h2>次にやりたいこと</h2>
<p>今度は花の名前を調べたいです。</p>どんなふうに見える？
最初に題名が出て、「公園で見つけたもの」と「次にやりたいこと」が並ぶ章になります。「花の色」は公園の章に含まれる小見出しです。文章は段落ごとに分かれて表示されます。
1分チャレンジ
最後に「持っていったもの」という章と、「水筒とノートを持っていきました。」という段落を追加しましょう。
答えを確かめる
<h2>持っていったもの</h2>
<p>水筒とノートを持っていきました。</p>改行したのに、表示が変わらない？
コード内でEnterキーを押すだけでは、通常は画面の改行になりません。別の話は p で段落にします。住所など、同じ段落の中で改行が必要なときに br を使います。余白を増やすために改行を重ねるのは避けましょう。
確認に使った公式資料：MDN「Headings and paragraphs」、MDN「br：改行要素」
