のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その7:セクションのお話

一人Advent Calendarも7日目になりました。案外続けられるもんなんだなぁと我ながらびっくりしております。

根っからのめんどくさがりなので、どこかでくじけるかもしれませんがそこはご愛嬌。

 

さて、本日は

HTML5 Advent Calendar 2013 - Adventar7日目エントリー記事も兼ねております。

と、いう訳で、改めまして。12月7日担当のid:nohakoです。よろしくお願い致します。

わたくし、

CSS Property Advent Calendar 2013 - Adventarの12月24日にもエントリーしておりますので、そちらも宜しくお願い致します。

 

というわけで、早速本題に入りましょう。

本日は【セクション】のお話。

 

セクションとは、範囲の事です。HTML5では、セクショニングを行う為のタグ(要素)が数多く規定されました。

セクショニング=範囲に意味を持たせる

HTML4.01までですと、<div>という箱を作って区切っていたのですが、HTML5からは、文章のまとまりなどで範囲を示せるようになりました。

簡単に図にしてみましたのでこちらをご覧ください。

img1

<header></header>←セクション内ヘッダー・ページタイトルやロゴが入る

<footer></footer>←セクション内フッター・copyrightなどが入る

<nav></nav>←サイト内ページリンクが集まったナビゲーション

<aside></aside>←広告・カレンダーなど。サイトの内容と関連性が薄い

<article></article>←この部分だけでも内容が理解できる、ブログやフィード

<section></section>←章・節・目次

これ+<div>という便利な箱が存在します。

単純に意味は無いが、区分けしたい時に使ったり、idやclassを付けたりと大活躍。

意味がなくてもひとまとめに出来ます。

HTML5では出番が少なくなる?と思いきや、やはり使う場面は多いのが実態です。

主にCSSで装飾する為の「まとまり・箱」として使用します。

 

HTMLは、上から書いた順番になります。

サイトのデザイン→文書のアウトライン(骨組み)を考える

という流れがマークアップしていく前にはあります。

ですので、HTMLを書き始める前には、文書構造を明らかにする事がとても大切です。

 

おしゃれなサイトを作ろうが、真面目なサイトを作ろうが、家を建てる時の基礎工事と同じです。

どこに、何がくるかをよく計画してから書きましょう。

 

という事で、明日8日目は「入れ子」について、ブロックレベルとインラインレベルのお話です。

タグは…強調や細目についてお話ししようかなと。