アウトラインを意識したHTMLコーディングをLPの作成行程を例に解説

1. 
HTMLのアウトラインを意識しよう
LPページの作成過程を参考に見ていきましょう！
CROOZ株式会社
コマース事業本部
小松 茂敏

2. 1.全体を囲む
<article class=“site_unique”>
[本題のコンテンツ]
</article>
Divじゃなく、Articleで。
<aside class=“”>
[関係ないのコンテンツ]
</aside>

3. 2.コンテンツを分ける
<article class=“site_unique”>
<section class=“intro”>
</section>
<section class=“howto”>
</section>
</article>
Divじゃなく、Sectionで。
意味のあるclassを。

4. 3.さらに分ける
<section class=“intro”>
<h1 class=“title”></h1>
<i class=“banner”></i>
<p class=“description”></p>
<h2 class=“subtitle”></h2>
</section>
タグセレクタを使わないように汎用的なclassで代用。
iタグはiconのi（Italic使わない。）

5. 4.関連のあるものはリスト
<section class=“howto”>
<ol class=“list”>
<li class=“item”>
<h2 class=“title”></h2>
<p class=“description”></p>
</li>
</ol>
</section>
リストの中もSectionと同様に構成。

6. 5.CSSを適用する
<section class=“intro”> .intro .title {}
<h1 class=“title”></h1> .intro .banner {}
<i class=“banner”></i> .intro .description {}
<p class=“description”></p> .intro .subtitle {}
<h2 class=“subtitle”></h2>
</section>
親セレクタを指定すれば、何とかなる
親セレクタがあった方が、CSSからHTMLを推測できる

7. セマンティックを意識する
 意味のあるタグを使う
 一番先に目に入るので重要
 意味のあるclass
 コメントがなくても推測がつく
 IDセレクタでもいい気がする（CSSLintではNG）
 汎用的なclassを使う
 意味がありすぎると混乱する
 class名を考えるのが面倒くさい
 タグセレクタが速いんなら使いたい！
 CSSにも階層構造を
 HTMLを推測できる
 一方に集中できる

8. コンピュータにもやさしい
 シンプル
 容量が軽い
 アノテーション
 SEOでも有利
 標準的
 どんどん改良されていく
ユーザにもやさしい