4kaku design

マーケティングを勉強しているWebデザイナーのノート

8月9日に開催された「名古屋マークアップ勉強会」に参加してきました。
いわゆる「もくもく会」のような自習メインの勉強会だったので、今回はHTML5のアウトラインと要素について勉強しつつ、新しいブログテーマを作っていました。そこで勉強したこと、他の方が発表されていたことについてまとめます。

名古屋マークアップ勉強会


今回勉強した内容について


HTML5でコーディングするときは、divばっか使っちゃだめだよ!というのは知っていたんですが、なぜダメなのかを改めて人に説明するのは難しい。ということで、HTML5のアウトライン(階層構造)と主な要素について調べていました。
座学だけではつまらないので、学んだことを活かして新しいブログテーマのモックを作って発表に使いました。

参考サイト


HTML5のアウトライン(階層構造)とは


アウトラインを理解するには、本の最初に載っている「もくじ」を想像するとわかりやすいと思います。


アウトラインの例

1冊の本(=1つのWebページ)の中には、章(=オレンジ色の子コンテンツ)があり、さらにその中に節(=緑色の孫コンテンツ)があります。さらにそれぞれにはタイトルになる「見出し」がついています。

HTML4ではこのアウトラインを構成する部品(以下、セクション)をh2〜h6までの見出しを使って形成していましたが、HTML5では「セクショニング・コンテンツ」と呼ばれる要素によって作ることができます。要素ごとに持っている意味合いが異なるので、構造だけでなく、同じ階層にあるコンテンツにも別の意味づけをすることができます。具体例は↓で述べます。


セクショニング・コンテンツとは


いつも何気なくマークアップに使っていた「section」や「article」、「aside」などの要素のことです。

ページ内でレイアウトに意味を持っているものは「section」、それ単体でコンテンツとして成立している(ex ブログのエントリー)ものは「article」として使い分けていましたが、HTML5の要素フローチャートを見て、もっと他の要素も使わないといけないなーと反省しました。フローチャートの画像自体は2011年に作られた古いものなので参考にする際はご注意ください。でもすごく見やすくまとまっています。
HTML5 Sectioning Element Flowchart

ブログのテーマで使いそうなセクショニング・コンテンツとその使い方をまとめると以下の通りです。

section
階層構造を作るために使う
article
エントリー単体やエントリーのサマリー(一覧)
nav
グローバルナビゲーション、ページャー
aside
サイドバーの新着エントリー一覧やプロフィールなど(articleに関連する情報として)

HTML5 Outliner で現在のテーマの構造を見てみた



HTMLのアウトラインを簡単にビジュアル化できる「HTML 5 Outliner」で現在のブログのトップページを判定してみました。URLだけでなく、ローカル上のファイルやコードからでも利用できるので公開前のサイトでも使えます。

タイトル下のテキスト「デザイン、IT、〜」が見出しとしてカウントされているのはあまり好ましくなさそうです。ほかにも、タイトルがついていないセクション(Untitled Section)が多すぎてひやっとしましたが、navもUntitled Sectionとしてカウントされる仕様だそうなのでそこは意図した通りの表示になっています。


新しいテーマの構造



新しいブログ用テーマのHTMLモックも作ったので、こちらの構造も判定してみました。今までのテーマよりはセマンティック上好ましい構造になりました。グローバルナビゲーションをどう設置するかは考え中です。

ブログのテーマ自体は盆休み明けに公開予定!今よりもう少しスマートフォンから読みやすくするのが目標です