HTMLのアウトラインを意識しよう


HTMLのアウトラインを意識しよう
LPページの作成過程を参考に見ていきましょう！

CROOZ株式会社
コマース事業本部
小松茂敏

1.全体を囲む
<article class=“site_unique”>

[本題のコンテンツ]

</article>

Divじゃなく、Articleで。

<aside class=“”>
[関係ないのコンテンツ]
</aside>

2.コンテンツを分ける
<article class=“site_unique”>

<section class=“intro”>

</section>

<section class=“howto”>

</section>

</article>

Divじゃなく、Sectionで。
意味のあるclassを。

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使わない。）

4.関連のあるものはリスト
<section class=“howto”>

<ol class=“list”>

<li class=“item”>

<h2 class=“title”></h2>

<p class=“description”></p>

</li>

</ol>

</section>

リストの中もSectionと同様に構成。

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を推測できる

セマンティックを意識する
 意味のあるタグを使う
 一番先に目に入るので重要

 意味のあるclass
 コメントがなくても推測がつく
 IDセレクタでもいい気がする（CSSLintではNG）

 汎用的なclassを使う
 意味がありすぎると混乱する
 class名を考えるのが面倒くさい
 タグセレクタが速いんなら使いたい！

 CSSにも階層構造を
 HTMLを推測できる
 一方に集中できる

コンピュータにもやさしい

 シンプル
 容量が軽い

 アノテーション
 SEOでも有利

 標準的
 どんどん改良されていく

ユーザにもやさしい

HTMLのアウトラインを意識しよう

More Related Content

What's hot

Similar to HTMLのアウトラインを意識しよう

HTMLのアウトラインを意識しよう