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

Effective HTML&CSS
〜現場で使える効果的なHTML/CSSの構造設計〜
#singtacks
SHIN Takeuchi
BIZREACH Inc. - Co-Founder/CTO
LUXA Inc. – Co-Founder/CTO
Lei Hau’oli Co., Ltd. – Founder/CEO

プロフィール
• 竹内真 / TAKEUCHI SHIN #singtacks
– 創業企業＆所属
• 株式会社レイハウオリ代表取締役社長（W3Cメンバー）
• 株式会社ビズリーチ取締役CTO
• 株式会社ルクサ CTO

– 主な運営サービス
•
•
•
•
•

2

ビズリーチ 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

アジェンダ
•
•
•
•
•

3

#1
#2
#3
#4
#5

9 Box & Semantic HTML
Browser Share
Coding Rule
CSS4
Review & Discussion


#1 9 Box & Semantic HTML

4


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

1

3

4

5

6

7
5

2

8

9


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

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

6


9 Box & Semantics HTML
• もう一度考えてみましょう

1

3

4

5

6

7
7

2

8

9


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

1

2

4
7

8

3
6

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

3

4

6

7

8

9

2
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
4

6

7

10

2
8

3
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>


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

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

11


Semantics HTML(5)
• 構造を表現する代表的なタグ
構造の意味、他要素との関
係性が明確

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

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

header

table

div

footer

ul

section

nav

ol

aside

dl

article

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

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


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

Users / Customers

Front End Engineer

Server Side Engineer
Producer
Director
13


Semantics HTML(5)
• 意味のあるHTMLを書くこととは
– サーバサイドプログラミングの容易性を高める（生産性向上）
• エンジニアにとって、例えばfor文で要素を繰り返し表示する部分が、全て
同じタグ/クラスのセットであること（ul > liなど）であることが望ましいと
考える

– 改変容易性を高める（可読性、認知性、生産性向上）
• 他のエンジニアでも修正しやすく、また意味のあるタグで記述しているこ
とにより、プロダクトが複雑化しても資産の無駄を省ける可能性が高い

– GUIのパーツ化による共通化を図れる（ex. Bootstrap化）
• 共通化によって生産性が飛躍的に高まる。また新しいUIを考える際にも
StyleGuide化しているものがあれば、エンジニア一人でも画面を構築出来る
など、開発スピードを向上させられる

14


#2 Browser Share

15


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に対応するのは心が病めますよね。。。

16


Browser Share
• ビズリーチ
– Target
• 日本のハイクラス転職（主に30代〜50代）
Android
Browser
7.69%

IE 9
4.28%

その他
6.20%
Internet
Explorer
33.47%

Firefox
8.46%

IE 7
1.40%
IE 6
0.62%

IE 8
7.80%

IE 10
14.60%

Safari
21.12%

IE以外
71.30%

Chrome
23.05%

17


Browser Share
• ルクサ
– Target
• お得に贅沢体験したい、素敵な大人の方達
Android Browser
3.53%

その他
1.57%

Firefox
5.07%

IE 9
6.66%

18

IE 6
0.34%

IE 8
7.98%

Safari
13.89%

Chrome
14.41%

IE 7
1.52%

Internet Explorer
61.53%


IE 10
24.87%

IE以外
58.62%

Browser Share
• codebreak;
– Target
• 全世界のエンジニア向け（になったりばっかり。。。基本は日本）
Android
Browser
3.18%

その他
2.93%

IE 9
1.42%

IE 7
0.28%

IE 8
1.63%

Internet
Explorer
6.33%

IE 10
3.16%

Safari
12.59%

Firefox
15.21%

IE 6
0.23%

Chrome
59.77%

IE以外
93.27%

19


Browser Share
• RegionUp
– Target
• アジア（シンガポール、香港）中心とした全世界向け
Android その他
Browser 3.42%
5.31%

IE 7
1.11%

IE 9
5.08%

Firefox
12.34%

Chrome
35.40%

IE 6
0.09%

IE 8
7.78%
IE 10
9.59%

Safari
19.07%

IE以外
76.34%
Internet
Explorer
24.47%

20


Browser Share
• 現状のブラウザシェア
– 全体的にIE6 / IE7のシェアは小さい（約2%前後、若しくはそれ以下）
• 子セレクタなど、一部のIE7までの問題は解決済み
– 新規サービスなどはIE6 / IE7を切り捨てて開発することをオススメします。
» 既に巨大なサービスはこの限りではありませんが。。。
• IE8の処遇次第でHTML5 / CSS3への完全移行も可能
– IE8.js / html5shiv.jsを利用した上での動作が納得出来るものであれば、IE8を下位
互換方式で対応することも可能
– IE8も完全対応する場合は、泣く泣く（HTML5はともかく）CSS3は諦めるしか
ないですね。。。

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

21


#3 Coding Rule

22


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

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

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

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

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

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

23


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

1
4
7

2
5
8

3
6
9

<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>

24

➡例：横幅が広ければ➡

1
5
9

2
6

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


3
7

4
8

Coding Rule
• Style定義に「id」を利用しない
<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%;
}
width: 100px;
}

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

JavaScriptはエンジンの構造上、id指定は高速だがclass指定は性能劣化する
そのため、CSSはJavaScriptを思いやってclassを利用するべきである
※CSSはレンダリング処理上、id / classどちらで指定しても処理速度に関係しない
25


Coding Rule
• 下位のタグにクラス定義をしない
<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%;
}
width: 100px;
}
こう書くと

子孫セレクタの多用はレンダリング速度に多少なりとも影響するが
ul > li, ol > li, table th, table tdなどのタグレベルの関係性が必須の箇所は
積極的に子セレクタ、子孫セレクタを利用する方が、HTMLが簡潔になる
※このレベルの速度劣化は0に等しい
特に「li」に複雑なクラスが指定されていないのは、サーバサイドプログラミング上
とっても美しくて嬉しい。
26


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で上書きも出来るため、便利なことが多い。
シンプルな新規事業立ち上げ時は
最初にスペーシング構造定義をオススメする
27


Coding Rule
• CSS定義は名前空間方式を採用する
sg-item.css
----------------------

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

.sg-item { ... }

.pg-item-column { ... }

.sg-item-box { ... }

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

.sg-item-footer { ... }

ビズリーチでは大きく「bs」「sg」「pg」のルート名前空間が用意されている。
bs ：ベースを規定する、いわゆるnormalize処理
sg ： Style Guideの略、Bootstrap構造を定義するもの、デザインアーキテクチャ
pg ：ページの略、各個別ページ依存のスタイルを定義する。ページ数分存在する
CSSファイル名と名前空間方式のclass名が一致することで、そのスタイルの重要度（関係性）
が即座に理解できる、また探索性能にも優れる
28


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;
}
width: 150px;
}
width: 120px;
}

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


Coding Rule
• コーディングルールについて
– このルールを踏襲して作るには、サーバサイドプログラミングでも「アーキテ
クト」と呼ばれる人しか定義することが難しく、非常に高度な技術が不可欠
• 難しいのは当たり前という認識を持ちつつも、フロントエンジニアがより高みに登る
ためには高度なCSS設計が出来る技術が必要
• 美しい構造設計、CSS設計はその後の開発、運用全てに恩恵がある他、近いサービス
を構築する場合には、そのままBootstrap化し、流用可能になります
– 実際株式会社ビズリーチでは、多くの管理画面が1年以上前に作られたスタイル
シートを流用して作られているものもあります
• この他にも沢山ルールはありますが。。。
– 今日は時間が無いのでここまでにしておきます。。。

30


#4 CSS4

31


CSS4
• 閑話休題、ちょっと未来の話でもしましょう
– Chrome / Safari などは既にCSS4の実装がはじまっています
• つまり、モバイルの世界では近い将来にCSS4がやってくる可能性があります。
– 実際のデバイスではまだまだ使えませんよー。

– というわけで

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

32


CSS4
• 「!」セレクタ

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

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

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

33


CSS4
• 疑似クラス「:matches」
:matches(h1, h2, h3, h4) + * {
margin-top: 1em;
}

これとこれとこれとこれと。。。が書き易くなります。
正直、単純な関係性だと、そこまで何かが劇的に変わる感じはしませんが
ちょっとだけ便利です。
特に、デフォルトスペーシングを設定する場合は
様々なタグ同士の関係性を記述することが多いので、便利になりそうです。
要素付きの:matchesの場合は複数クラスをand / or条件で指定することが出来そうな
記述も見受けられますが、実装されれば相当便利な予感です。
例： div:matches(.current, .active)

34


CSS4
• 疑似クラス「:local-link」
nav > ul > li > a:local-link {
background-color: #FFF;
}

グローバルナビゲーションの現在位置だけ背景を変える。良くあることです。。。
僕個人的には「current」という別クラスを切って、currentが付いてたら背景を変える
というCSSを良く書いています。
:local-linkを利用するとこれが不要になる（勝手に自分の位置を認識してくれる）ので
ある意味画期的なセレクタとも言えます。
※JavaScriptゴリゴリのサイトだと使えないですね。。。

35


#5 Review & Discussion

36


Review & Discussion
• 今更ですが
– 課題の回答を見ながら、一緒に考えてみましょう。
• 気になることがあったら、どしどし手を挙げて聞いて下さい！

• codebreak;ソースコードリーディング
– 基礎部分は僕自身がかなり組んだので、ポイントをかいつまん
で話したいと思います
• これも気になるところで、どんどん聞いて下さい！
– http://codebreak.com/

37


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

38


質疑応答
この本の特集で
もっと詳しく書いてるよ。
http://gihyo.jp/magazine/wdpress/archive/2010/vol59

39


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

40


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

More Related Content

What's hot

Viewers also liked

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

More from Shin Takeuchi

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