Movatterモバイル変換

Effective HTML&CSS〜現場で使える効果的なHTML/CSSの構造設計〜#singtacksSHIN TakeuchiBIZREACH Inc. - Co-Founder/CTOLUXA Inc. – Co-Founder/CTOLei 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#59 Box & Semantic HTMLBrowser ShareCoding RuleCSS4Review & Discussion#singtacks supported by

#1 9 Box & Semantic HTML4#singtacks supported by

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

9 Box• 構造には意味がある– ＝セマンティクスHTMLコーディング• 意味を知る方法として– 要素をひとつ抜いてみた時、構造がどう変化するか？– ➡ 構造の意味6#singtacks supported by

9 Box & Semantics HTML• もう一度考えてみましょう1345677289#singtacks supported by

9 Box & Semantics HTML• パターン1– そのまま抜けた状態124783689<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 Box & Semantics HTML• パターン2– 全ての番号が前につまる134678929<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

9 Box & Semantics HTML• パターン3– 横列のみ関係する（6番だけつまる）1467102839<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

9 Box & Semantics HTML• どんなコードでも正解になる– ただし、正しい意味に応じた「表現」であることが重要– 上のパターンにも他の解が存在する• まず必要なこと– 基本的な「構造」を表現可能なタグの「意味」をしっかりと理解して、使いこなすこと11#singtacks supported by

Semantics HTML(5)• 構造を表現する代表的なタグ構造の意味、他要素との関係性が明確構造の意味が明確、自要素内の関係性のみ明確自由度が高く、他要素、自要素内の関係性は希薄headertabledivfooterulsectionnavolasidedlarticlefigure(p)左側がより意味が強い（構造認知性が高い）構造にフィットするタグがあれば、より左側から選択すると良い。12#singtacks supported by

Semantics HTML(5)• なぜそこまで考えるべきなのか？– HTMLはWebにおける全てのインターフェースWeb DesignerUsers / CustomersFront End EngineerServer Side EngineerProducerDirector13#singtacks supported by

Semantics HTML(5)• 意味のあるHTMLを書くこととは– サーバサイドプログラミングの容易性を高める（生産性向上）• エンジニアにとって、例えばfor文で要素を繰り返し表示する部分が、全て同じタグ/クラスのセットであること（ul > liなど）であることが望ましいと考える– 改変容易性を高める（可読性、認知性、生産性向上）• 他のエンジニアでも修正しやすく、また意味のあるタグで記述していることにより、プロダクトが複雑化しても資産の無駄を省ける可能性が高い– GUIのパーツ化による共通化を図れる（ex. Bootstrap化）• 共通化によって生産性が飛躍的に高まる。また新しいUIを考える際にもStyleGuide化しているものがあれば、エンジニア一人でも画面を構築出来るなど、開発スピードを向上させられる14#singtacks supported by

#2 Browser Share15#singtacks supported by

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

Browser Share• ビズリーチ– Target• 日本のハイクラス転職（主に30代〜50代）AndroidBrowser7.69%IE 94.28%その他6.20%InternetExplorer33.47%Firefox8.46%IE 71.40%IE 60.62%IE 87.80%IE 1014.60%Safari21.12%IE以外71.30%Chrome23.05%17#singtacks supported by

Browser Share• ルクサ– Target• お得に贅沢体験したい、素敵な大人の方達Android Browser3.53%その他1.57%Firefox5.07%IE 96.66%18IE 60.34%IE 87.98%Safari13.89%Chrome14.41%IE 71.52%Internet Explorer61.53%#singtacks supported byIE 1024.87%IE以外58.62%

Browser Share• codebreak;– Target• 全世界のエンジニア向け（になったりばっかり。。。基本は日本）AndroidBrowser3.18%その他2.93%IE 91.42%IE 70.28%IE 81.63%InternetExplorer6.33%IE 103.16%Safari12.59%Firefox15.21%IE 60.23%Chrome59.77%IE以外93.27%19#singtacks supported by

Browser Share• RegionUp– Target• アジア（シンガポール、香港）中心とした全世界向けAndroid その他Browser 3.42%5.31%IE 71.11%IE 95.08%Firefox12.34%Chrome35.40%IE 60.09%IE 87.78%IE 109.59%Safari19.07%IE以外76.34%InternetExplorer24.47%20#singtacks supported by

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

#3 Coding Rule22#singtacks supported by

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

Coding Rule• タグブロックレベルで流用可能にする147258369<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➡例：横幅が広ければ➡15926ul.sg-item-box {width: 100%;}ul.sg-item-box > li {display: inline-block;width: 100px;}#singtacks supported by3748

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

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

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#singtacks supported by

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#singtacks supported by

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

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

#4 CSS431#singtacks supported by

CSS4• 閑話休題、ちょっと未来の話でもしましょう– Chrome / Safari などは既にCSS4の実装がはじまっています• つまり、モバイルの世界では近い将来にCSS4がやってくる可能性があります。– 実際のデバイスではまだまだ使えませんよー。– というわけで今のうちに便利そうなCSS4の技術を予習しておきましょう！32#singtacks supported by

CSS4• 「!」セレクタ!ul > li.sg-selected-item { ... }「!」を指定することで、擬似的に「親」を指定することが出来るようになりそうです。※これは凄いです。。。基本的には連続的に指定している中間に「!」を利用することが出来るので親、にフォーカスしているというよりも、セレクタ連鎖の中でスタイルを適用するセレクタを指定することが出来るというものです。例： ul > !li > a > spanなんて言う名前になるんでしょうかね、これ・・・（ちなみに、結構前は「$」、ちょっと前は「?」、今は「!」ですが、まだもめてるのでセレクタが変わりそうです）33#singtacks supported by

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

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

#5 Review & Discussion36#singtacks supported by

Review & Discussion• 今更ですが– 課題の回答を見ながら、一緒に考えてみましょう。• 気になることがあったら、どしどし手を挙げて聞いて下さい！• codebreak;ソースコードリーディング– 基礎部分は僕自身がかなり組んだので、ポイントをかいつまんで話したいと思います• これも気になるところで、どんどん聞いて下さい！– http://codebreak.com/37#singtacks supported by

ご清聴ありがとうございました38#singtacks supported by

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

了。ありがとうございました。40#singtacks supported by

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

Viewers also liked

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

More from Shin Takeuchi

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