Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS の歩き方

9,464 views

Published on

2015年7月29日 松戸WordPress部勉強会スライド

Published in: Internet
  • Be the first to comment

CSS の歩き方

  1. 1. 松戸WordPress部 2015年7月29日 の歩き方 写真AC http://www.photo-ac.com/
  2. 2. 名前 三柴 誠一郎 出身 愛媛県 拠点 千葉県松戸市 特徴 絶望的に方向音痴 趣味 カメラ、 旅、 料理、 滝めぐり 自己紹介 活動 松戸でWordPressに関するセミナーを運営 https://www.facebook.com/groups/wordpress.banana.cluster/ https://wpmatsudo.doorkeeper.jp/ 経歴 1996年にIT会社へ入社。業務システムの 企画・構築・運用等の経験を経て2014年 からフリーランスとして活動中。
  3. 3. 第1歩 最近の CSS について 第2歩 CSS の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
  4. 4. CSS 書くのって 大変じゃないですか? 写真素材ぱくたそ https://www.pakutaso.com
  5. 5. これまでの当たり前
  6. 6. 画面に動きをつけたい 見栄えをよくしたい JavaScript Photoshop
 Illustrator
  7. 7. これらの多くの事が CSS(CSS3) で 出来るようになった
  8. 8. レスポンシブWebデザイン スマホ対応 H T M L 5 Bootstrap Webフォント 角 丸 アニメーション グラデーション インブラウザデザイン モーダルウィンドウ アコーディオン・メニュー アイコンフォント CSSハック 疑 似 要 素 ベンダープレフィックス プリプロセッサ CMS ドロップシャドウ 疑 似 ク ラ ス グリッドシステム ABテスト
  9. 9. JavaScript Photoshop
 Illustrator テキストなので ・修正が簡単 ・ファイルサイズが小さい …etc CSS
  10. 10. CSS のコード量が 肥大化している
  11. 11. 肥大化 あるある
  12. 12. 書き換えているのに 画面が変わらない! 肥大化 あるある
  13. 13. セレクタ名が決められない! 肥大化 あるある
  14. 14. というか、前のセレクタ名直したい! 肥大化 あるある
  15. 15. (修正後)そこじゃない! 肥大化 あるある
  16. 16. もう・・・無理・・・ 肥大化 あるある
  17. 17. そうなる前に
  18. 18. CSS の基本を理解しよう! 設計の考え方を学ぼう!
  19. 19. 第1歩 最近の CSS について 第2歩 CSS の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
  20. 20. 基本ルール① カスケーディング
  21. 21. カスケーディング .entry-title { color: red; } .entry-title { color: blue; } こちらのルールが適用 CSS
  22. 22. カスケーディング .large { font-size: 32px; } .small { font-size: 14px; } <h1 class=“small large”>タイトル</h1> こちらのルールが適用 CSS HTML
  23. 23. 基本ルール② 詳細度
  24. 24. 詳細度 詳細度 セレクタ !important インライン記述 IDセレクタ クラスセレクタ 属性セレクタ・疑似クラス 要素セレクタ・疑似要素 ユニバーサルセレクタ 高い 低い
  25. 25. !important h1 { color: red !important; } h1 { color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
  26. 26. インライン記述 h1 { color: blue; } <h1 style=“color: green”>title</h1> CSS HTML こちらのルールが適用
  27. 27. IDセレクタ #head{ color: yellow; } .entry-title { color: red; } <h1 id=“head” class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
  28. 28. クラスセレクタ .entry-title { color: red; } h1 { color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
  29. 29. 属性セレクタ a[title=“maru”] { color: red; } a { color: blue; } <a title=“maru” href=“#”>link</a> CSS HTML こちらのルールが適用
  30. 30. 疑似クラス li:first-child { color: red; } li { color: blue; } <ul> <li>list-1<li> <li>list-2<li> </ul> CSS HTML こちらのルールが適用
  31. 31. 要素セレクタ h1 { color: red; } * { color: blue; } <h1 class=“entry-title”>title</h1> CSS HTML こちらのルールが適用
  32. 32. ユニバーサルセレクタ * { color: gray; } CSS すべての要素にマッチするセレクタ どのセレクタよりも優先度は低い
  33. 33. ただし
  34. 34. セレクタが複数ある場合 div h1.entry-title { color: red; } .primary .entry-title { color: green; } .entry-title { color: blue; } <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> CSS HTML
  35. 35. セレクタが複数ある場合 div h1.entry-title { color: red; } .primary .entry-title { color: green; } .entry-title { color: blue; } CSS こちらのルールが適用 ・同じ詳細度の場合は1つのクラスセレクタより2つのクラスセレクタが優先 ・詳細度の低いセレクタがいくらあっても詳細度の高いセレクタが優先
  36. 36. おさらいしよ〜 写真素材ぱくたそ https://www.pakutaso.com
  37. 37. 文字は何色? div h1.entry-title { color: red; } div .entry-title { color: green; } .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
  38. 38. 文字は何色? .primary .entry-title { color: red; } div.primary h1 { color: green; } .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
  39. 39. 文字は何色? .primary h1.entry-title { color: red; } div.primary .entry-title { color: green; } .primary .entry-title { color: blue; } CSS <div class=“primary”> <h1 class=“entry-title”>title</h1> </div> HTML
  40. 40. 第1歩 最近の CSS について 第2歩 CSS の基本をおさらいしよう 第3歩 CSS の設計について 本日のアジェンダ
  41. 41. CSSの設計について
  42. 42. 代表的な CSS 設計手法(考え方)紹介 自分にあった手法を考える この後の流れ
  43. 43. OOCSS BEM 代表的なCSS設計手法
  44. 44. オブジェクト指向の概念を取り入れ 元・米Yahoo!のニコール・サリバンによって考案 OOCSSとは 参考) https://github.com/stubbornella/oocss
  45. 45. 構造と装飾の分離 コンテナーとコンテンツの分離 OOCSSの原則
  46. 46. 構造と装飾の分離
  47. 47. OOCSS ぽいサイトのコードを確認してみる .btn { position: relative; display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: bold; line-height: 20px; color: #333; white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: #eee; background-image: linear-gradient(#fcfcfc, #eee); border: 1px solid #d5d5d5; border-radius: 3px; } CSS ボタン(構造)のルールを定義
  48. 48. OOCSS っぽいのサイトのコードを確認してみる .btn-primary { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); background-color: #60b044; background-image: linear-gradient(#8add6d, #60b044); border-color: #5ca941 } .btn-danger { color: #900 } .btn-sm { padding: 2px 10px } CSS 装飾のルールを定義文字を白 背景を緑色 文字を赤 余白を変更(小さく) 参考)GitHUB https://github.com/
  49. 49. <a class=“btn”>PUSH</a>HTML 構造(ボタン)のセレクタを指定
  50. 50. <a class=“btn btn-primary”>PUSH</a>HTML 構造(ボタン)のセレクタを指定 装飾のセレクタを指定
  51. 51. <a class=“btn btn-danger”>PUSH</a>HTML 装飾(別)のセレクタを指定
  52. 52. <a class=“btn btn-primary btn-sm”>PUSH</a>HTML 複数のセレクタを指定 ※色とサイズを別々に定義しているから出来る
  53. 53. コンテナーとコンテンツの分離
  54. 54. 場所の依存をなくす #header .btn { - - - } #sidebar .btn { - - - } #footer .btn { - - - }
  55. 55. OOCSS BEM 代表的なCSS設計手法
  56. 56. 命名規則について定められている Block, Element, Modifier の略 ロシアの Yandex 社によって考案 BEMとは
  57. 57. Block__Element_Modifier BEMの命名規則 Element Modifier Block 構成のルートとなる要素。Element, Modifier への基点。 Block の子要素。アンダースコア2つでつなぐ。 Block, Element のバリエーションの異なる要素。
 アンダースコア1つでつなぐ。 ハイフン2つでつなぐ(MindBEMding)という記方もある(こちらが一般的?)
  58. 58. BEM ぽいサイトのコードを確認してみる .m-btn02 { display: block; background: #363a3f; border: 1px solid #1a1c1f; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0.5px rgba(255, 255, 255, 0.1) inset, 0 0 1px rgba(255, 255, 255, 0.4) inset; padding: 11px 13px 10px; line-height: 1; font-weight: normal; text-align: center; border-radius: 3px; font-size: 12px; color: #fff; box-sizing: border-box; } CSS block のルールを定義 Block
  59. 59. BEM ぽいサイトでコードを確認してみる .m-btn02.m-btn02__icon { height: 1em; display: inline-block; margin-right: 7px; } .m-btn02.m-btn02--inline { display: inline-block; } .m-btn02.m-btn02--color-orange { background: #ff3c00; border-color: #ef3300; } CSS Element, Modifier のルールを定義 Element Modifier Modifier 参考)comico http://www.comico.jp/
  60. 60. <a class=“m-btn02”>PUSH</a>HTML Blockのセレクタを指定
  61. 61. <a class=“m-btn02 m-btn02--inline”>PUSH</a>HTML Block--Modifire のセレクタを指定
  62. 62. <a class=“m-btn02 m-btn02--inline m-btn02--color-orange”>PUSH</a>HTML Block--Modifire のセレクタをさらに指定
  63. 63. その他の手法
  64. 64. OOCSSをベースに作成された 元・米Yahoo!の ジョナサン・スヌーク によって考案 SMACSS
  65. 65. いろいろ考え方を参考に 自分にあった手法を考える
  66. 66. 名前はなるべく省略しない セレクタにその要素が必要か一旦考える セレクタにその階層が必要か一旦考える コピーするときはコンポーネント設計を一旦考える 私的に行っていること(まとめ)
  67. 67. ご清聴ありがとうございました! 写真AC http://www.photo-ac.com/

×