現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 17,286 views

#1 9つの箱とセマンティクスHTML ...

#1 9つの箱とセマンティクスHTML
#2 各サービスにおける現状のブラウザシェア
#3 コーディングルール
#4 CSS4
#5 レビュー&ディスカッション

Statistics

Views

Total Views
17,286
Views on SlideShare
17,060
Embed Views
226

Actions

Likes
97
Downloads
116
Comments
0

8 Embeds 226

https://twitter.com 136
http://s.deeeki.com 54
http://slideshare-download.seesaa.net 16
http://kaorunnpa.wordpress.com 9
https://www.chatwork.com 8
http://b.hatena.ne.jp 1
http://rssc.dokoda.jp 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS) 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS) Presentation Transcript

  • 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 #singtacks supported by
  • #1 9 Box & Semantic HTML 4 #singtacks supported by
  • 9 Box • 次の絵をHTMLコーディングしてみてください – 頭の中でどんなタグを使おうかなーと想像してみてください 1 3 4 5 6 7 5 2 8 9 #singtacks supported by
  • 9 Box • 構造には意味がある – = セマンティクスHTMLコーディング • 意味を知る方法として – 要素をひとつ抜いてみた時、構造がどう変化するか? – ➡ 構造の意味 6 #singtacks supported by
  • 9 Box & Semantics HTML • もう一度考えてみましょう 1 3 4 5 6 7 7 2 8 9 #singtacks supported by
  • 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 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
  • 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
  • 9 Box & Semantics HTML • どんなコードでも正解になる – ただし、正しい意味に応じた「表現」であることが重要 – 上のパターンにも他の解が存在する • まず必要なこと – 基本的な「構造」を表現可能なタグの「意味」をしっかりと理 解して、使いこなすこと 11 #singtacks supported by
  • Semantics HTML(5) • 構造を表現する代表的なタグ 構造の意味、他要素との関 係性が明確 構造の意味が明確、自要素 内の関係性のみ明確 自由度が高く、他要素、自 要素内の関係性は希薄 header table div footer ul section nav ol aside dl article figure (p) 左側がより意味が強い(構造認知性が高い) 構造にフィットするタグがあれば、より左側から選択すると良い。 12 #singtacks supported by
  • Semantics HTML(5) • なぜそこまで考えるべきなのか? – HTMLはWebにおける全てのインターフェース Web Designer Users / Customers Front End Engineer Server Side Engineer Producer Director 13 #singtacks supported by
  • Semantics HTML(5) • 意味のあるHTMLを書くこととは – サーバサイドプログラミングの容易性を高める(生産性向上) • エンジニアにとって、例えばfor文で要素を繰り返し表示する部分が、全て 同じタグ/クラスのセットであること(ul > liなど)であることが望ましいと 考える – 改変容易性を高める(可読性、認知性、生産性向上) • 他のエンジニアでも修正しやすく、また意味のあるタグで記述しているこ とにより、プロダクトが複雑化しても資産の無駄を省ける可能性が高い – GUIのパーツ化による共通化を図れる(ex. Bootstrap化) • 共通化によって生産性が飛躍的に高まる。また新しいUIを考える際にも StyleGuide化しているものがあれば、エンジニア一人でも画面を構築出来る など、開発スピードを向上させられる 14 #singtacks supported by
  • #2 Browser Share 15 #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代) 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
  • 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%
  • 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
  • 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
  • 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 Rule 22 #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 • タグブロックレベルで流用可能にする 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
  • 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 CSS4 31 #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 & Discussion 36 #singtacks supported by
  • Review & Discussion • 今更ですが – 課題の回答を見ながら、一緒に考えてみましょう。 • 気になることがあったら、どしどし手を挙げて聞いて下さい! • codebreak;ソースコードリーディング – 基礎部分は僕自身がかなり組んだので、ポイントをかいつまん で話したいと思います • これも気になるところで、どんどん聞いて下さい! – http://codebreak.com/ 37 #singtacks supported by
  • ご清聴ありがとうございました 38 #singtacks supported by
  • 質疑応答 この本の特集で もっと詳しく書いてるよ。 http://gihyo.jp/magazine/wdpress/archive/2010/vol59 39 #singtacks supported by
  • 了。ありがとうございました。 40 #singtacks supported by