More Related Content Similar to 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS) (20) More from Shin Takeuchi (8) 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)2. プロフィール
• 竹内 真 / 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
4. #1 9 Box & Semantic HTML
4
#singtacks supported by
6. 9 Box
• 構造には意味がある
– = セマンティクスHTMLコーディング
• 意味を知る方法として
– 要素をひとつ抜いてみた時、構造がどう変化するか?
– ➡ 構造の意味
6
#singtacks supported by
7. 9 Box & Semantics HTML
• もう一度考えてみましょう
1
3
4
5
6
7
7
2
8
9
#singtacks supported by
8. 9 Box & Semantics HTML
• パターン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>
#singtacks supported by
9. 9 Box & Semantics HTML
• パターン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>
#singtacks supported by
10. 9 Box & Semantics HTML
• パターン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>
#singtacks supported by
11. 9 Box & Semantics HTML
• どんなコードでも正解になる
– ただし、正しい意味に応じた「表現」であることが重要
– 上のパターンにも他の解が存在する
• まず必要なこと
– 基本的な「構造」を表現可能なタグの「意味」をしっかりと理
解して、使いこなすこと
11
#singtacks supported by
14. Semantics HTML(5)
• 意味のあるHTMLを書くこととは
– サーバサイドプログラミングの容易性を高める(生産性向上)
• エンジニアにとって、例えばfor文で要素を繰り返し表示する部分が、全て
同じタグ/クラスのセットであること(ul > liなど)であることが望ましいと
考える
– 改変容易性を高める(可読性、認知性、生産性向上)
• 他のエンジニアでも修正しやすく、また意味のあるタグで記述しているこ
とにより、プロダクトが複雑化しても資産の無駄を省ける可能性が高い
– GUIのパーツ化による共通化を図れる(ex. Bootstrap化)
• 共通化によって生産性が飛躍的に高まる。また新しいUIを考える際にも
StyleGuide化しているものがあれば、エンジニア一人でも画面を構築出来る
など、開発スピードを向上させられる
14
#singtacks supported by
16. 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
#singtacks supported by
17. 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
#singtacks supported by
18. 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%
#singtacks supported by
IE 10
24.87%
IE以外
58.62%
19. 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
#singtacks supported by
20. 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
#singtacks supported by
21. Browser Share
• 現状のブラウザシェア
– 全体的にIE6 / IE7のシェアは小さい(約2%前後、若しくはそれ以下)
• 子セレクタなど、一部のIE7までの問題は解決済み
– 新規サービスなどはIE6 / IE7を切り捨てて開発することをオススメします。
» 既に巨大なサービスはこの限りではありませんが。。。
• IE8の処遇次第でHTML5 / CSS3への完全移行も可能
– IE8.js / html5shiv.jsを利用した上での動作が納得出来るものであれば、IE8を下位
互換方式で対応することも可能
– IE8も完全対応する場合は、泣く泣く(HTML5はともかく)CSS3は諦めるしか
ないですね。。。
• 株式会社ビズリーチでは
– ビズリーチ、codebreak;が最近のリニューアルでHTML5 / CSS3 対応しました。
21
#singtacks supported by
23. 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
#singtacks supported by
24. 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;
}
#singtacks supported by
3
7
4
8
25. Coding Rule
• Style定義に「id」を利用しない
<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;
}
「id」はタグに「ひとつ」しか定義出来ない
※classは複数定義可能
JavaScriptはエンジンの構造上、id指定は高速だがclass指定は性能劣化する
そのため、CSSはJavaScriptを思いやってclassを利用するべきである
※CSSはレンダリング処理上、id / classどちらで指定しても処理速度に関係しない
25
#singtacks supported by
26. Coding Rule
• 下位のタグにクラス定義をしない
<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;
}
こう書くと
子孫セレクタの多用はレンダリング速度に多少なりとも影響するが
ul > li, ol > li, table th, table tdなどのタグレベルの関係性が必須の箇所は
積極的に子セレクタ、子孫セレクタを利用する方が、HTMLが簡潔になる
※このレベルの速度劣化は0に等しい
特に「li」に複雑なクラスが指定されていないのは、サーバサイドプログラミング上
とっても美しくて嬉しい。
26
#singtacks supported by
29. 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化)
29
#singtacks supported by
30. Coding Rule
• コーディングルールについて
– このルールを踏襲して作るには、サーバサイドプログラミングでも「アーキテ
クト」と呼ばれる人しか定義することが難しく、非常に高度な技術が不可欠
• 難しいのは当たり前という認識を持ちつつも、フロントエンジニアがより高みに登る
ためには高度なCSS設計が出来る技術が必要
• 美しい構造設計、CSS設計はその後の開発、運用全てに恩恵がある他、近いサービス
を構築する場合には、そのままBootstrap化し、流用可能になります
– 実際株式会社ビズリーチでは、多くの管理画面が1年以上前に作られたスタイル
シートを流用して作られているものもあります
• この他にも沢山ルールはありますが。。。
– 今日は時間が無いのでここまでにしておきます。。。
30
#singtacks supported by
32. CSS4
• 閑話休題、ちょっと未来の話でもしましょう
– Chrome / Safari などは既にCSS4の実装がはじまっています
• つまり、モバイルの世界では近い将来にCSS4がやってくる可能性があります。
– 実際のデバイスではまだまだ使えませんよー。
– というわけで
今のうちに便利そうなCSS4の技術を予習しておきましょう!
32
#singtacks supported by
33. CSS4
• 「!」セレクタ
!ul > li.sg-selected-item { ... }
「!」を指定することで、擬似的に「親」を指定することが出来るようになりそうです。
※これは凄いです。。。
基本的には連続的に指定している中間に「!」を利用することが出来るので
親、にフォーカスしているというよりも、セレクタ連鎖の中でスタイルを適用する
セレクタを指定することが出来るというものです。
例: ul > !li > a > span
なんて言う名前になるんでしょうかね、これ・・・
(ちなみに、結構前は「$」、ちょっと前は「?」、今は「!」ですが、まだもめてるのでセレクタが変わりそうです)
33
#singtacks supported by
34. CSS4
• 疑似クラス「:matches」
:matches(h1, h2, h3, h4) + * {
margin-top: 1em;
}
これとこれとこれとこれと。。。が書き易くなります。
正直、単純な関係性だと、そこまで何かが劇的に変わる感じはしませんが
ちょっとだけ便利です。
特に、デフォルトスペーシングを設定する場合は
様々なタグ同士の関係性を記述することが多いので、便利になりそうです。
要素付きの:matchesの場合は複数クラスをand / or条件で指定することが出来そうな
記述も見受けられますが、実装されれば相当便利な予感です。
例: div:matches(.current, .active)
34
#singtacks supported by
35. CSS4
• 疑似クラス「:local-link」
nav > ul > li > a:local-link {
background-color: #FFF;
}
グローバルナビゲーションの現在位置だけ背景を変える。良くあることです。。。
僕個人的には「current」という別クラスを切って、currentが付いてたら背景を変える
というCSSを良く書いています。
:local-linkを利用するとこれが不要になる(勝手に自分の位置を認識してくれる)ので
ある意味画期的なセレクタとも言えます。
※JavaScriptゴリゴリのサイトだと使えないですね。。。
35
#singtacks supported by
37. Review & Discussion
• 今更ですが
– 課題の回答を見ながら、一緒に考えてみましょう。
• 気になることがあったら、どしどし手を挙げて聞いて下さい!
• codebreak;ソースコードリーディング
– 基礎部分は僕自身がかなり組んだので、ポイントをかいつまん
で話したいと思います
• これも気になるところで、どんどん聞いて下さい!
– http://codebreak.com/
37
#singtacks supported by