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

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

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

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

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

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

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

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

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

jp14t_ka_0046
あけましておめでとうございます!
2010年10月からはじめたコーディングデザインは去年2013年10月で3年たちました。今年は4年目。いっそう気を引き締めて、様々な問題解決に努めていきます!

今年はHTML5の仕様書が勧告の予定となっています。
これまで「使えるのか」「ほんとに来るのか」と考えられていたHTML5が「実際に使えるもの」として広がっていくと考えられます。案件ではすでにHTML5で作っているものがすでに大半です。

HTML5関連のAPIも Web Storage や Geolocation などは勧告されてますし、勧告案、勧告候補にもかなりの数があがってきました。各APIを取り入れた新しい問題解決ができるように準備していきます。

今年の目標

  1. HTML5 APIを利用した案件を半期に1つ作ります
  2. 書籍のリライト作業を1月に完了します
  3. 技術講師の案件を積極的に請けていきます

投稿が少ないブログですが、本年もどうぞよろしくお願いします。

WordBench鹿児島 × コーディングデザイン × Concent「IA塾」

3月16日(土曜日)に森が2010年まで在籍していた株式会社コンセントさんとWordBench鹿児島さんと共同で「IA塾」を開催することになりました!

WordBench鹿児島 × コーディングデザイン × Concent「IA塾」

森は株式会社コンセントには4年近く在籍しました。
情報設計(IA)にとても長けた会社で、クライアントの問題解決について突き詰めて調べる、突き詰めて考えるということが徹底していました。
とてもたくさん勉強させていただきましたし、いまでもなお得るものが多い会社です。

情報設計が得意な会社でIAとして働いている方から講義とワークショップをしていただきます。
鹿児島近辺でWebサイト制作をされている方にとって、Webサイト制作の視点を広げるものになります。ぜひご参加ください!

そろそろ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年をスタートします。

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

第1回かごしまデザインキャンプに参加(トークセッション)

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

ということで4つめのセッション。

“第1回かごしまデザインキャンプに参加(トークセッション)” の続きを読む

第1回かごしまデザインキャンプに参加(加藤洋氏)

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

ということで3つめのセッション。

“第1回かごしまデザインキャンプに参加(加藤洋氏)” の続きを読む

第1回かごしまデザインキャンプに参加(直井勇人氏)

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

ということで2つめのセッション。

“第1回かごしまデザインキャンプに参加(直井勇人氏)” の続きを読む

第1回かごしまデザインキャンプに参加(馬立辰志氏、松田朋春氏)

2012年11月27日(火曜日)13:00-16:00に天文館シネマパラダイスの1スクリーンを借りて、第1回かごしまデザインキャンプ「ビジネスに効くデザインとは?」が催されました。
とっても中身がよかったので、Webサイト製作にはあんまり関係ないけど残しておきます。

結構長くなるのでひとまず市役所の方のあいさつと1つめのセッションだけ。

“第1回かごしまデザインキャンプに参加(馬立辰志氏、松田朋春氏)” の続きを読む