現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）

Effective HTML&CSS〜現場で使える効果的な HTML/CSS の構造設計〜

#singtacksSHIN Takeuchi

BIZREACH Inc. - Co-Founder/CTO

LUXA Inc. – Co-Founder/CTO

Lei Hau’oli Co., Ltd. – Founder/CEO

2

プロフィール

• 竹内真 / TAKEUCHI SHIN #singtacks

– 創業企業＆所属• 株式会社レイハウオリ代表取締役社長（ W3C メンバー）• 株式会社ビズリーチ取締役 CTO• 株式会社ルクサ CTO

– 主な運営サービス• ビズリーチ　 http://www.bizreach.jp/• ルクサ　 http://luxa.jp/• RegionUp 　 http://www.regionup.com/• codebreak; 　 http://www.codebreak.com/• CareerTrek 　 http://www.careertrek.com/

#singtacks supported by

http://www.bizreach.jp/

http://luxa.jp/

http://www.regionup.com/

http://www.codebreak.com/

http://www.careertrek.com/

3

アジェンダ

• #1 　 9 Box & Semantic HTML• #2 　 Browser Share• #3 　 Coding Rule• #4 　 CSS4• #5 　 Review & Discussion

#singtacks supported by

#1 9 Box & Semantic HTML

#singtacks supported by4

9 Box

• 次の絵を HTML コーディングしてみてください– 頭の中でどんなタグを使おうかなーと想像してみてください


1 2 3

4 5 6

7 8 9

9 Box

• 構造には意味がある– ＝セマンティクス HTML コーディング

• 意味を知る方法として– 要素をひとつ抜いてみた時、構造がどう変化するか？– ➡ 構造の意味


9 Box & Semantics HTML

• もう一度考えてみましょう


1 2 3

4 6

7 8 9

1 2 3

4 5 6

7 8 9


• パターン 1– そのまま抜けた状態


1 2 3

4 6

7 8 9

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td></td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr></table>


• パターン 2– 全ての番号が前につまる


1 2 3

4 6 7

8 9

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li></ul>


• パターン 3– 横列のみ関係する（ 6 番だけつまる）


1 2 3

4 6

7 8 9

<ul> <li>1</li> <li>2</li> <li>3</li></ul><ul> <li>4</li> <li>6</li></ul><ul> <li>7</li> <li>8</li> <li>9</li></ul>


• どんなコードでも正解になる– ただし、正しい意味に応じた「表現」であることが重要– 上のパターンにも他の解が存在する

• まず必要なこと– 基本的な「構造」を表現可能なタグの「意味」をしっかりと理

解して、使いこなすこと


Semantics HTML(5)

• 構造を表現する代表的なタグ


構造の意味、他要素との関係性が明確

構造の意味が明確、自要素内の関係性のみ明確

自由度が高く、他要素、自要素内の関係性は希薄

header table div

footer ul section

nav ol

aside dl

article figure

(p)

左側がより意味が強い（構造認知性が高い）

構造にフィットするタグがあれば、より左側から選択すると良い。

Semantics HTML(5)

• なぜそこまで考えるべきなのか？– HTML は Web における全てのインターフェース


Front End Engineer

Server Side Engineer

Web Designer

Users / Customers

Producer

Director

Semantics HTML(5)

• 意味のある HTML を書くこととは

– サーバサイドプログラミングの容易性を高める（生産性向上）• エンジニアにとって、例えば for 文で要素を繰り返し表示する部分が、全て

同じタグ / クラスのセットであること（ ul > li など）であることが望ましいと考える

– 改変容易性を高める（可読性、認知性、生産性向上）• 他のエンジニアでも修正しやすく、また意味のあるタグで記述していること

により、プロダクトが複雑化しても資産の無駄を省ける可能性が高い

– GUI のパーツ化による共通化を図れる（ ex. Bootstrap 化）• 共通化によって生産性が飛躍的に高まる。また新しい UI を考える際にも

StyleGuide 化しているものがあれば、エンジニア一人でも画面を構築出来るなど、開発スピードを向上させられる


#2 Browser Share


Browser Share

• ブラウザシェアを知ることで選べるもの

– 下位互換方式コーディング

• HTML5 / CSS3 を用いて先進的なコーディングをして、下位ブラウザ（主に IE8 以前）に JavaScript を利用して対応させる方法

– IE7.js / IE8.js / html5shiv(printshiv).js などを利用する» これにより下位ブラウザでの動作はかなり重くなる

– 角丸などを CSS3 で表現し、下位ブラウザは角有り表示とする• 竹内個人の主観では IE6 / IE7 のシェアが 2% 以下であれば HTML5 / CSS3 を選択します

– IE8 での JS 利用の下位互換は若干目をつぶっています（ 1年後を見据えて…）

– 上位互換方式コーディング

• 基本的に IE6 若しくは IE7 のルールで表現できるコーディングをして、上位でも同じように表現される形を取る

– 特に IE6 に対応するのは心が病めますよね。。。


Browser Share


• ビズリーチ– Target

• 日本のハイクラス転職（主に 30 代〜 50 代）

Internet Explorer33.47%

Chrome23.05%

Safari21.12%

Firefox8.46%

Android Browse

r7.69%

その他6.20%

IE 以外71.30%

IE 1014.60%

IE 87.80%

IE 94.28%

IE 71.40%

IE 60.62%

Browser Share


• ルクサ– Target

• お得に贅沢体験したい、素敵な大人の方達


Chrome14.41%

Safari13.89%

Firefox5.07%

Android Browser3.53%

その他1.57%

IE 以外58.62%

IE 1024.87%

IE 87.98%

IE 96.66%

IE 71.52%

IE 60.34%

Browser Share


• codebreak;– Target

• 全世界のエンジニア向け（になったりばっかり。。。基本は日本）

Chrome59.77%Firefox

15.21%

Safari12.59%

Inter-net Ex-

plorer6.33%


その他2.93%

IE 以外93.27%

IE 103.16%

IE 81.63%

IE 91.42%

IE 70.28%

IE 60.23%

Browser Share


• RegionUp– Target

• アジア（シンガポール、香港）中心とした全世界向け

Chrome35.40%


Safari19.07%

Firefox12.34%


その他3.42%

IE 以外76.34%

IE 10

9.59%

IE 87.78

%

IE 95.08%

IE 71.11%

IE 60.09%

Browser Share

• 現状のブラウザシェア

– 全体的に IE6 / IE7 のシェアは小さい（約 2% 前後、若しくはそれ以下）

• 子セレクタなど、一部の IE7 までの問題は解決済み– 新規サービスなどは IE6 / IE7 を切り捨てて開発することをオススメします。

» 既に巨大なサービスはこの限りではありませんが。。。

• IE8 の処遇次第で HTML5 / CSS3への完全移行も可能– IE8.js / html5shiv.js を利用した上での動作が納得出来るものであれば、 IE8 を下

位互換方式で対応することも可能– IE8 も完全対応する場合は、泣く泣く（ HTML5 はともかく） CSS3 は諦めるし

かないですね。。。

• 株式会社ビズリーチでは– ビズリーチ、 codebreak; が最近のリニューアルで HTML5 / CSS3 対応しました。


#3 Coding Rule


Coding Rule

• singtacks / coding rule

– タグブロックレベルで流用可能にする• 基本的な位置関係が相対指定され、出来る限り領域に対しても柔軟に変化させる

– Style定義に「 id 」を利用しない• 「 id 」は JavaScript のために空けておく（ Web 高速化）

– ul / ol / dl / table / figure などは下位のタグに class定義をしない• 上位タグから子供セレクタを使用して Style定義する（状態定義はこの限りでない）

– 階層、及びタグの種類によりタグ間の基本スペースを定義する• 隣接セレクタを利用してデフォルトスペーシングを定義する（オーバーライド可）

– CSS定義は名前空間方式を採用する• 「 sg-git-branch-new 」など

– 基礎構造と画面単位構造とで CSS を分ける• table のボーダー、色などは基礎構造、画面毎の表のサイズは画面単位構造、など


Coding Rule

• タグブロックレベルで流用可能にする

➡ 例：横幅が広ければ➡


1 2 34 5 67 8 9

1 2 3 45 6 7 89

<ul class=“sg-item-box”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li></ul>

ul.sg-item-box {width: 100%;

}

ul.sg-item-box > li {display: inline-block;width: 100px;

}

Coding Rule

• Style定義に「 id 」を利用しない




}


}

クラス指定

「 id 」はタグに「ひとつ」しか定義出来ない　※ class は複数定義可能

JavaScript はエンジンの構造上、 id指定は高速だが class指定は性能劣化するそのため、 CSS は JavaScript を思いやって class を利用するべきである

※CSS はレンダリング処理上、 id / class どちらで指定しても処理速度に関係しない

Coding Rule

• 下位のタグにクラス定義をしない




}


}

こう書くと

とってもキレイ

子孫セレクタの多用はレンダリング速度に多少なりとも影響するがul > li, ol > li, table th, table td などのタグレベルの関係性が必須の箇所は積極的に子セレクタ、子孫セレクタを利用する方が、 HTML が簡潔になる※ このレベルの速度劣化は 0 に等しい

特に「 li 」に複雑なクラスが指定されていないのは、サーバサイドプログラミング上とっても美しくて嬉しい。

Coding Rule

• デフォルトスペーシング設定をする


<body> <section> <h1>singtacks</h1> <p> これは竹内です </p> </section> <section> <img src=“…” /> </section></body>

section + section {margin-top: 40px;

}

h1 + p,h2 + p,h3 + p {

margin-top: 1em;}

構造間のスペーシングを定義しておくことで構造定義のみで美しいスペーシングが可能となる。

ややデザイナー目線のコーディングになるが、このスペーシング処理は下位の CSS で上書きも出来るため、便利なことが多い。

シンプルな新規事業立ち上げ時は最初にスペーシング構造定義をオススメする

Coding Rule

• CSS定義は名前空間方式を採用する


sg-item.css----------------------

.sg-item { ... }

.sg-item-box { ... }

.sg-item-footer { ... }

pg-item.css----------------------

.pg-item-column { ... }

.pg-item-footer-column { ... }

ビズリーチでは大きく「 bs 」「 sg 」「 pg 」のルート名前空間が用意されている。

bs ：ベースを規定する、いわゆる normalize 処理sg ： Style Guide の略、 Bootstrap 構造を定義するもの、デザインアーキテクチャpg ：ページの略、各個別ページ依存のスタイルを定義する。ページ数分存在する

CSS ファイル名と名前空間方式の class 名が一致することで、そのスタイルの重要度（関係性）が即座に理解できる、また探索性能にも優れる

Coding Rule

• 基礎構造と画面単位構造を分ける


<table class=“sg-table pg-item-table”> <tr> <td>商品 A</td> <td>商品 B</td> <td>商品 C</td> </tr></table>

.sg-table {border: 1px solid #CCC;

}

.sg-table td {color: #FFF;background-color: #CCC;

}

.pg-item-table td:nth-child(1) {width: 100px;

}.pg-item-table td:nth-child(2) {

width: 150px;}.pg-item-table td:nth-child(3) {

width: 120px;}

構造定義と画面単位構造を分けることによって、基礎構造の共通パーツ化が促される（ Bootstrap 化）

Coding Rule

• コーディングルールについて

– このルールを踏襲して作るには、サーバサイドプログラミングでも「アーキテクト」と呼ばれる人しか定義することが難しく、非常に高度な技術が不可欠

• 難しいのは当たり前という認識を持ちつつも、フロントエンジニアがより高みに登るためには高度な CSS 設計が出来る技術が必要

• 美しい構造設計、 CSS 設計はその後の開発、運用全てに恩恵がある他、近いサービスを構築する場合には、そのまま Bootstrap 化し、流用可能になります

– 実際株式会社ビズリーチでは、多くの管理画面が 1年以上前に作られたスタイルシートを流用して作られているものもあります

• この他にも沢山ルールはありますが。。。– 今日は時間が無いのでここまでにしておきます。。。


#4 CSS4


CSS4

• 閑話休題、ちょっと未来の話でもしましょう

– Chrome / Safari などは既に CSS4 の実装がはじまっています• つまり、モバイルの世界では近い将来に CSS4 がやってくる可能性があります。

– 実際のデバイスではまだまだ使えませんよー。

– というわけで

今のうちに便利そうな CSS4の技術を予習しておきましょう！


CSS4

• 「 ! 」セレクタ


!ul > li.sg-selected-item { ... }

「 ! 」を指定することで、擬似的に「親」を指定することが出来るようになりそうです。　※これは凄いです。。。

基本的には連続的に指定している中間に「 ! 」を利用することが出来るので親、にフォーカスしているというよりも、セレクタ連鎖の中でスタイルを適用するセレクタを指定することが出来るというものです。例： ul > !li > a > span

なんて言う名前になるんでしょうかね、これ・・・（ちなみに、結構前は「 $ 」、ちょっと前は「 ? 」、今は「 ! 」ですが、まだもめてるのでセレクタが変わりそうです）

CSS4

• 疑似クラス「 :matches 」


:matches(h1, h2, h3, h4) + * {margin-top: 1em;

}

これとこれとこれとこれと。。。が書き易くなります。正直、単純な関係性だと、そこまで何かが劇的に変わる感じはしませんがちょっとだけ便利です。

特に、デフォルトスペーシングを設定する場合は様々なタグ同士の関係性を記述することが多いので、便利になりそうです。

要素付きの :matches の場合は複数クラスを and / or 条件で指定することが出来そうな記述も見受けられますが、実装されれば相当便利な予感です。例： div:matches(.current, .active)

CSS4

• 疑似クラス「 :local-link 」


nav > ul > li > a:local-link {background-color: #FFF;

}

グローバルナビゲーションの現在位置だけ背景を変える。良くあることです。。。僕個人的には「 current 」という別クラスを切って、 current が付いてたら背景を変えるという CSS を良く書いています。

:local-link を利用するとこれが不要になる（勝手に自分の位置を認識してくれる）のである意味画期的なセレクタとも言えます。

※JavaScript ゴリゴリのサイトだと使えないですね。。。

#5 Review & Discussion


Review & Discussion

• 今更ですが– 課題の回答を見ながら、一緒に考えてみましょう。

• 気になることがあったら、どしどし手を挙げて聞いて下さい！

• codebreak;ソースコードリーディング– 基礎部分は僕自身がかなり組んだので、ポイントをかいつまん

で話したいと思います• これも気になるところで、どんどん聞いて下さい！

– http://codebreak.com/


http://codebreak.com/

ご清聴ありがとうございました


質疑応答


この本の特集でもっと詳しく書いてるよ。

http://gihyo.jp/magazine/wdpress/archive/2010/vol59



了。ありがとうございました。


Documents

現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）