HTML5:address要素とfooter要素

HTML

【HTML5課題23】

  • 連絡先を表示させなさい。
<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="image/locomoco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p>
<aside>
<h3>ロコモコ丼の豆知識</h3> 
<p>ハワイ島で学生向けのファーストフードとしてはじまったと言われています。</p>
</aside>
<address>当ブログに関するご意見等は　cafelunch@xxx.com　までどうぞ。</address> 
</article>
</body>

【HTML5課題24】

<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="image/locomoco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p>
<aside>
<h3>ロコモコ丼の豆知識</h3> 
<p>ハワイ島で学生向けのファーストフードとしてはじまったと言われています。</p>
</aside>
<address>当ブログに関するご意見等は　cafelunch@xxx.com　までどうぞ。</address> 
</article>
</body>

HTML5:figure要素とfigurecaption要素

HTML

【HTML5課題22】

  • 写真と写真タイトルをまとめて表示させなさい。
<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>人気スイーツについて</h2> 
<p>疲れた時に美味しいスイーツを食べると、疲れも吹っ飛びますね。人気のバナナ豆乳シェイクのようなドリンクをはじめ、スイーツの定番である自家製ケーキも各種取り揃えています。</p> 
<figure> 
<figcaption>自家製ケーキ</figcaption> 
<img src="images/cake2.PNG" width="250" height="250" alt="ベリーのソースがかかったベイクドチーズケーキです。"> 
</figure> 
</article>  
</body>

HTML5:hgroup要素とaside要素

HTML

【HTML5課題20】

  • 見出しをまとめて表示させなさい。
<body> 
<header> 
<hgroup> 
<h1>七夕</h1> 
<h2>日本五節句の一つ</h2> 
</hgroup> 
</header> 
<section> 
<h3>七夕の語源</h3> 
<p>「古事記」または、日本書紀に登場する。</p> 
</section> 
</body>

hgroup要素

  • フロー・コンテンツ、ヘディング・コンテンツ
  • 見出しをグループ化する

【HTML5課題21】

  • 補足情報も含めて表示させなさい。
<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="images/moco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p>
<aside>
<h3>ロコモコ丼の豆知識</h3> 
<p>ハワイ島で学生向けのファーストフードとしてはじまったと言われています。</p>
</aside>
</article>
</body>

aside要素

  • フロー・コンテンツ、セクショニング・コンテンツ
  • メインコンテンツに関係しないコンテンツ（広告など）
  • 関係するが削除しても、メインコンテンツの意味が変わらないコンテンツ（イメージ写真、補足記事など）

HTML5：section要素とarticle要素

HTML

【HTML5課題18】

  • 文章を内容でわけて表示させなさい。
<header> 
<h1>クリスマスオーナメント</h1> 
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p> 
</header> 
<section> 
<h2>ツリートップ</h2> 
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p> 
</section> 
<section> 
<h2>クリスマスボール</h2> 
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>

header要素

フロー・コンテンツ
セクションのヘッダーを表す
h1~h6の見出し要素や概要を入れて使うことが多い

section要素

セクショニング・コンテンツ
章や節のかたまりを表す
h1~h6の見出し要素を、必ず1つ以上使う必要がある

【HTML5課題19】

  • ブログのエントリー記事を表示させなさい。
<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチで人気の特製ロコモコ丼です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="images/moco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p> 		
</article> 
</body>

div要素

アウトラインには影響を与えない範囲
視覚的な意味を作るときに指定する