HTMLスキル - 第9章 チャレンジ

文書構造を意識した正しいグルーピングをしてみよう(解説)

文書構造を意識した正しいグルーピングをしてみよう

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

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

文書構造を意識して、Webページをレイアウトしてみよう。



チャレンジ内容

・<article>タグの特長を理解しているかどうか
・<section>タグの特長を理解しているかどうか
・<article>タグや<section>タグの中での適切な見出しの設定ができるかどうか




<article>タグと<section>タグを使って文章を定義していこう


練習ファイルの文章に適切なタグを記述して、構造を作っていきましょう。
まずは、記事全体を囲む<article>タグを<div>id名right_sideの中に書きます。
これで、right_sideの中の文章を1つの記事として定義できました。



では、記事の中のタグを記述していきましょう。
「トマトについて」を記事の中の一番大きな見出し、つまり見出し1として定義します。




<h1>トマトについて</h1>



次に、<section>タグを記述して文章のまとまりを作成しましょう。
合計で4つのまとまりを作ってセクションにし、セクションの中でさらに見出しをつけていきます。
<article>タグの中で見出し1を使ってしまっていますが、セクションの中の一番大きな見出しになるので、ここでも<h1>を使ってマークアップしていきましょう。
最後に、見出しの下の文章に<p>タグを記述しましょう。


<div id="right_side">
<article>
<h1>トマトについて</h1>

<section>
<h1>トマトとは?</h1>
<p>リンゴ(林檎・苹果、学名:Malus pumila)は、バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。</p>
</section>

<section>
<h1>トマトとは?</h1>
<p>リンゴ(林檎・苹果、学名:Malus pumila)は、バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。</p>
</section>


<section>
<h1>神話への登場</h1>
<p>神話にもリンゴが出てきます。</p>
</section>

<section>
<h1>聖書</h1>
<p>旧約聖書に登場するアダムとイヴが、蛇にそそのかされて食べた「善悪を知る果実」(禁断の果実)はリンゴだとされる。あわてて飲み込もうとしたアダムが善悪を知る果実をのどにつかえさせ、これがのどぼとけの始まりであるとの故事から、男性ののどぼとけは「アダムのリンゴ」ともいわれる。なお、食べたのがリンゴというのは後の時代に創作された俗説で、当時旧約聖書の舞台となったメソポタミア地方にはリンゴは分布せず、またその時代のリンゴは食用に適していなかった。</p>
</section>


</article>
</div><!-- //#right_side -->




すべての文章を適切なタグで囲むことができれば、完成です。