俊太朗/ライブドアツイートするこの連載が本になりました!「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。4.01とHTML5の違いを大まかに解説してきました。今回からはHTML5におけるマークアップの仕様をより詳しく解説します。第3回では、HTML5コーディングの“キモ”と言える「セクション」と「アウトライン」をしっかり理解しましょう。文書の概要を表す「アウトライン」HTML5のコーディングでは、「アウトライン」を強く意識しながら進める必要があります。アウトラインとはそもそも何でしょうか?アウトラインとは、一般的に「あらすじ」や「概要」といった意味で、HTMLにおいては「文書の概要」と考えてよいでしょう。具体的に、イメージしやすい例で言えば、アウトラインは「本の目次のようなもの」と説明できます。本の目次は、本の中(本文)に含まれる見出しを抜き出して構成されています。HTMLのアウトラインも同じように、HTML内に含まれる見出しを抜き出した、「HTMLの目次のようなもの」と考えると分かりやすいでしょう。本の目次は見出しを抜き出して構成されているHTMLのアウトラインを見てみよう本の目次は、章・節・項のようにツリー構造で文書の構造を表しています。HTMLのアウトラインも同じように、ツリー構造で表すことができます。以下のツールを使うと、WebページやHTMLファイルのアウトラインを判別して表示してくれます。実際にHTMLがどのようなアウトラインになるか、簡単なサンプルで確かめてみましょう。サンプル1はHTML4.01の書き方で記述されたHTML5のソースコードです。サンプル1[HTML4.01の書き方]<h1>ねこについて</h1><p>思いのたけを語ります。</p><h2>ねこは、かわいい</h2><p>ねこがかわいいのは常識ですが、改めてその理由を考えてみます。<li>ねこだから</li></ul><p>納得ですね。</p><h2>ねこは、つよい</h2><p>実は、ねこはつよいのです。人間程度じゃ敵いません。人間</h3><p>人間は刀を持ってねこと対等という意見がありますが、あれは嘘です。</p><p>かわいすぎて攻撃できないからです。</p><h2>ねこは、ふしぎ</h2><p>ねこは、たまに広場に集合していますね。</p>このサンプルのアウトラインは以下のようになります。インデント量によって大見出し・中見出し・小見出しのツリー構造を表しています。ねこは、ふしぎサンプル1のアウトラインは、新しい見出しのところでツリーの階層が変わっています。この階層の範囲を「セクション」と呼びます。本の目次は「見出しを抜き出したもの」でしたが、これとまったく同じように、見出し要素のレベル(大見出し・中見出し・小見出し)を手がかりにアウトラインを判別しています。このサンプルのようにオーソドックスできれいなソースコードであれば、見出しからアウトラインを正しく判別できますが、より複雑なHTMLでは難しい場合もあります。そこで、HTML5では、ソースコードからアウトラインを確実に判別する(ソースコードから概要を抜き出す)方法として、セクションの範囲を明示する要素が定義されました。HTML4.01やXHTML1.0から意味や使い方が変わった要素のまとめ。a要素、iframe要素、menu要素の使い方についてサンプルコードとともに詳しく解説する。HTML5ではHTML4.01やXHTML1.0から意味や使い方が変わった要素もある。今回はimg要素の使い方についてサンプルを交えて詳しく解説する。HTML5では、新たに加わった要素だけでなく、HTML4.01やXHTML1.0から意味や使い方などの仕様が変わった要素もある。サンプルで確認しよう。HTML5のフォーム新機能コーダー/マークアップエンジニアのためのHTML5入門。HTML5のフォーム機能ではinput要素に加えて新しいフォーム要素も追加されている。それぞれの使い方をサンプルで解説する。DESIGNHTML5でこんなに変わったinput要素を徹底解説コーダー/マークアップエンジニアのためのHTML5入門。今回はHTML5で追加されたフォーム関連の要素と属性をまとめて解説する。大幅に機能強化されたinput要素について学ぼう。DESIGNもうこれで迷わないHTML5新要素の使い方コーダー/マークアップエンジニアのためのHTML5入門。使用頻度の高いtime要素、figure要素、figcaption要素、mark要素と、ルビ関連の要素の使い方を解説する。俊太朗のHTML5マークアップ移行ガイド国内でもHTML5で企業サイトを制作する事例が増え、「次のリニューアルはHTML5で」と考えるWeb制作者も少なくないでしょう。4.01からの移行」をテーマに、HTML5マークアップの基本から実務上のポイントまでを解説します。00PROGRAMMINGリバースエンジニアリングしたくなるHTML5サイト2011年5月中には最終草案が公表される予定のHTML5。この新しい技術を使ったサイトを紹介します。これらのサービスを参考に、実用段階に入ったHTML5の積極的な利用をすすめてみてはどうでしょうか。00TRENDHTML5って結局何が変わるの?制作者向け勉強会に潜入4月、5月と「HTML5」をテーマに都内で開催された勉強会「SwapSkills」(主催=allWebクリエイター塾)に潜入してみた。3)がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。デザイン表現の自由度を広げ、マークアップの効率を上げるCSS3のTipsを具体的なサンプルとともに紹介する。スマホお気に入り一覧マイページ。