HTML5&CSS3ポケットリファレンスを執筆しました

HTML5&CSS3ポケットリファレンスの表紙

執筆を続けていたHTML5&CSS3ポケットリファレンス(技術評論社)がとうとう出版の運びとなりました。
2014年5月21日(水曜日)の発売です。つまり明日発売です。

この本に関わった皆さんに感謝!

原稿はHTML5の部分は森が執筆、CSS3の部分はスタイルシートポケットリファレンスを執筆された藤本壱さんとの共著です。

イラストはthe rocket gold starさん。絵がすっごくコミカルでかわいらしいので、本を開くたびになごみまくりです。

イラストのネタ出しは編集者さんが頑張ってくださいました。
そのおかげで、どのページを見てもとってもとっても楽しく読むことができます。

前ページオールカラー!

そして、気合の全ページオールカラー。()
最後の方にはカラーネーム一覧とかHSLカラーの表とかあるのでしっぽまで詰まってる体(てい)です。

前版のHTML&CSSポケットリファレンスと同様にとっても楽しい本になっています。
書店で見かけたら、ぜひお手にとって見ていただければ幸いです。

サポートページ

書籍についてのお問い合わせなどは技術評論社さんのサポートページからよろしくお願いします。

そろそろHTML5:セクショニング・コンテンツ

HTML5がけっこう使われるようになってきたかな?というところですが、いかがでしょうか。
既存のWebサイトはまだHTML4やXHTML1だと思いますが、新規制作ではHTML5が使われることが普通になってきてますね。

コーディングデザインではHTML5の重要なところを書いていきます。
今回は「セクショニング・コンテンツ」です。

HTML4とHTML5の文書構造

セクションはHTML5でのマークアップで理解しにくいところです。
HTML4やXHTML1では「見出し要素」を使って階層構造を作ります。
階層構造をしっかり作ることで、重要な部分を明確に示すHTML文書を作ることができます。

<body>
<h1>大見出し</h1>
<h2>小見出し</h2>
<p>本文</p>
<h2>小見出し</h2>
<p>本文</p>
</body>

いっぽう、HTML5では「セクショニング・コンテンツ」を使って階層構造を作ること「も」できます。

<body>
<h1>大見出し</h1>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
</body>

HTML5は完全に新しい仕様ではなく、HTML4とXHTML1のどちらもとりこんでいるので、「見出し要素」でも「セクショニング・コンテンツ」でも文書構造を作ることができます。

セクショニング・コンテンツって何?

HTML4ではブロック要素、インライン要素と呼んでいた要素のカテゴリーは、HTML5では以下のように区分けがかわりました。

  • メタデータ・コンテンツ…head要素の中に入るような要素
  • フロー・コンテンツ…ほとんどすべての要素
  • セクショニング・コンテンツ…article, aside, nav, sectionの4要素
  • ヘッディング・コンテンツ…h1〜h6要素とhgroup要素の見出し関係の要素
  • フレージング・コンテンツ…ほぼHTML4までのインライン要素のような文章の途中に使う要素
  • エンベデッド・コンテンツ…画像、動画、音楽など、外部リソースを埋め込むための要素
  • インタラクティブ・コンテンツ…リンクやフォーム系の要素、動画や音声を埋め込む要素で操作パネルがついてる状態など、ユーザーのアクションに反応する要素

セクショニング・コンテンツarticle, aside, nav, sectionの4要素です。

  • article…独立した記事
  • aside…関連記事
  • nav…主要なナビゲーション
  • section…一般的なセクション(テーマ区切り)

この要素たちは「セクション」を作ることができます。
セクションは書籍でいうところの章や節などのテーマの区切りです。セクションがあることで階層構造が明確になります。
HTML4やXHTML1では見出し要素という「点」で階層構造を作っていましたが、セクショニング・コンテンツはどこからどこまでという「範囲」で階層構造を作ることができます。
書籍にないWebならではの機能「ナビゲーション」はセクションと認識させることになってます。

つまり、セクショニング・コンテンツの重要な役割は「明確にセクションをつくることで、階層構造を範囲で示す」ということになります。

ブログはどうするの?

HTML5なら階層構造はセクショニング・コンテンツで作るべきだ!なんてことはありません。
ブログのWYSIWIGエディタでセクショニング・コンテンツの要素を入れ込むことはできません。なので、こうした領域は見出し要素による階層構造を使うことになります。

まとめ

  • セクショニング・コンテンツは「明確にセクションをつくることで、階層構造を範囲で示す」
  • セクショニング・コンテンツはarticle, aside, nav, sectionの4要素。
  • ブログのWYSIWYG部分は見出し要素による階層構造でOK。

あけましておめでとうございます!

行ってしまいました2012年。やってきました2013年。

2012年は多くの方々に出会い、大変お世話になりました。
また、仕事を通じて様々な価値を世の中に提供していくことができました。
心から感謝しています。

2013年、まず必ずやること3つ。

  • Webサイトをどんどん制作し続けます。
  • 2冊目の書籍執筆をやり遂げます。
  • 講師としてHTML5をもっと掘り下げて伝えていきます。

上の3つの柱を着実に進めて、もっと自分を高めて、関係する皆さんと関わっていき、さらに高めあう輪を広げていきます。

Web・人間・自然の可能性を心から信じて、Coding Designは2013年をスタートします。

みなさま、本年もよろしくお願いします!