新人デザイナーのワードプレステーマを作ろう vol.2

WordPress
新人井村くんの、ワードプレステーマをつくろう

みなさんこんにちは!みなさんこんにちは!今後のWeb標準になっていくHTML5でのWordPressテーマのベースとなるマークアップについて考えていきたいと思います。

テーマ「Soft Cloud」のサンプルは以下のURLよりご覧になれます。
http://theme.prime-strategy.co.jp/softcloud/

HTML5のアウトラインを考える

HTMLの階層構造のことで、本でいう目次のようなものです。アウトラインをしっかり作成することで検索エンジンはもちろん、人が読んだ時にも情報構造をわかりやすく伝えることができます。
アウトラインの階層(セクション)を一段下げるためには、セクショニング・コンテンツ要素を入れ子にする/もしくはヘッディング・コンテンツ要素のレベルを下げる方法を用います。

セクショニング・コンテンツ要素

article , aside , nav , section

HTML5では、アウトラインの構造を生成するためのセクショニング・コンテンツ要素が新しく追加されました。それぞれに意味づけはありますが、アウトラインへの影響は同じです。
article,aside,nav,sectionの使い分けについては今回は割愛します。
divやspanはレイアウトのみを変えたいときに、section要素はアウトラインの階層を変えたいときと使い分けましょう。

ヘッディング・コンテンツ要素

h1 , h2 , h3 , h4 , h5 , h6 , hgroup

セクションのヘッダーを定義します。簡単に言うと、アウトライン階層の見出しです。ヘッディング・コンテンツのないセクションはタイトルの無い階層となります。
ヘッディング・コンテンツだけでもアウトラインを生成できます。
例えば<h1>A</h1><h2>B</h2>とした場合、BはAのセクションに内包されます。
XHTMLでは h1 > h2 > h3… と順に使っていくことで暗黙的に階層化を行なっていましたが、HTML5ではsection要素で階層を明示できるので、見出しは全てh1要素を使う書式も推奨されています。

では、実際に私のデザインしたテーマ「Soft Cloud」を例にアウトラインを作成してみます。構造がわかりやすいようにワイヤーフレーム化しました。

SNS説明写真

これをマークアップしたものがこちらです。

SNS説明写真

HTML5のアウトラインを明示化してくれるツール「HTML5 Outliner」を使用して確認した結果がこちらです。

HTML5 Outliner:http://gsnedders.html5.org/outliner/

今回はわかりやすくするため、すべてのセクションに見出しをつけています。これが正解というわけではありませんが、アウトラインの概念を理解することでHTMLの土台が固まり、迷わず各セクションにコンテンツをマークアップしていけるはずです。

HTML5のマークアップに何の意味があるのか?(私信)

アウトラインの作成やarticleとsectionの使い分けなどセマンティックなHTMLは現段階で何か大きな利益があるかというとそうでもありません。SEOに有利という話もありますが、流動的な部分が多く必ずしも言い切れません。
しかし今後HTML5がWeb標準化する中で、Webから自分の欲しい情報だけを抜き出したり電子書籍やブラウザ以外のアプリケーションとの連携などWeb(HTML)の使用範囲も広がっていくのではないでしょうか。
そんな近い未来にHTML5が利用されるかな、と思っています。

腕組み井村くん

お問い合わせ

お客様の課題を解決するソリューション、
条件に沿ったベネフィットあるご提案をさしあげます。

03-6551-299603-6551-2996

受付時間 9:00-18:00 (月曜日~金曜日)
お問い合わせフォームへ
To top