Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

CSS設計のお勉強

1 285 vues

Publié le

先日開催した勉強会のスライドです

Publié dans : Ingénierie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

CSS設計のお勉強

  1. 1. Webの勉強会 CSSの設計方法、マークアップについて説明 2015/10/9 Ver.1.0 1
  2. 2.  過去のCSSの記述  CSS設計とは  OOCSS、SMACSS、BEM  命名規則の考え方  CSSファイルの記述法  CSS設計を学習する本、サイト 2 アジェンダ
  3. 3. 過去のCSSの記述 3
  4. 4. 4 #sidebar .list ul li ul li a 1 サイドカラムにリストの入れ子 テキスト テキスト テキスト テキスト テキスト
  5. 5. 5 階層深すぎぃ!!
  6. 6. 6 詳細を見る .button1 2 ボタンをたくさん作りました PageTop 詳細を見る 詳細を見る 詳細を見る 詳しくはこちら .button2 .button3 .button4 .button5 .button6
  7. 7. 7 どれが何のボタンか 分かりません!!
  8. 8. 8 詳細を見る .button1 { background font-size margin padding … } 3 改めてボタンを作りました
  9. 9. 9 記述多すぎ~
  10. 10. 10 #header ul #header ul li #header ul li a 4 ヘッダーナビゲーション テキスト テキスト
  11. 11. 11 下に配置して くれ
  12. 12. 横に移動し てくれ 12 下に配置して くれ 中央にもっ てきて 外行ってく る マークを変 えて 要らない 元に戻して 上にもってき て フッターだ な 真ん中に もってきて 右へ少しずら して 色を変えて
  13. 13. 13 動かしたら作り直し
  14. 14. 14 結論
  15. 15. 15 行き当たりばったり
  16. 16. 16 こうならないように するには?
  17. 17. CSS設計とは 17
  18. 18. 18 CSSは書きやすく直しにくい
  19. 19. 19 最初からルールを決めて 作りましょう
  20. 20. 1. 予測しやすい 2. 再利用しやすい 3. 保守しやすい 4. 拡張しやすい 20 ポイント
  21. 21. 21 http://article.enja.io/articles/css- architecture.html
  22. 22. 22 なげぇ
  23. 23. 23 自分が想定した動作をする 記述を行う 1 予測しやすい A
  24. 24. 24 同じ動作をパターン化し、 まとめることで使いやすくする 2 再利用しやすい A
  25. 25. 25 新規記述を行う場合、 既存の記述を壊さないようにする 3 保守しやすい A B
  26. 26. 26 他の人でも 簡単に扱えるようにする 4 拡張しやすい
  27. 27. これらを踏まえて CSS設計を行う 27
  28. 28. 28 この設計方法を 考えてまとめたもの
  29. 29. OOCSS SMACSS BEM 29
  30. 30. 30 設計思想は色々ありますが 日本でよく 取りあげられるもの3つ
  31. 31. SMACSS 31 1
  32. 32. 32 OOCSSとBEMの いいとこ取り
  33. 33. 33 Base Layout Module State Theme 初期設定 レイアウト パーツ 状態 テーマ 役割を5つに分割して管理する
  34. 34. 34 Baseはreset.cssの様にサイトの 初期状態を記述する
  35. 35. 35 Layoutは ページを構成する 一番大きな要素の classに「l」または 「layout」をつける <header class=“l-header”> l-header l-nav l-visual l-main l-side l-footer l-container
  36. 36. 36 Moduleは ページの中にある 部品一つ一つを指す ロゴ 検索 l-header l-main 説明 見出し 新着情報 どこに持って行っても 使えるようにする
  37. 37. 37 Stateは JavaScriptで見た目 が変わる箇所に つける  テキスト  テキスト <ul li a class=“sideList is-hover”> テキストの色が変わる場合
  38. 38. 38 Themeは サイト全体の見た目 を変更する場合に つける <~ class=“theme-XX”> l-header l-nav l-visual l-main l-side l-footer l-container
  39. 39. OOCSS 39 2
  40. 40. 40 Object-Oriented CSS
  41. 41. 41 プログラムで出てくる 「オブジェクト指向」 を取り入れたもの
  42. 42. 42  構造と見た目の分離  コンテナーとコンテンツの分離 OOCSSの原則
  43. 43. 43 構造と見た目の分離 .btn { height: 60px; line-height: 1.5; text-align: center; width: 100px; } .btn-blue { background-color: blue; color: white; } <p> <a href=“#” class=“btn btn-blue"> ボタン</a> </p> ボタン 色変更した別バージョンも 簡単に作れる ボタンの構造 ボタンの見た目
  44. 44. 44 コンテナーとコンテンツの分離 .subTitle { font-size:1.1em; color: #333; border-bottome: 1px solied #333; } <header> <h1 class=“subTitle”>見出し</h1> </header> <footer> <h1 class=“subTitle”>見出し</h1> </footer> 同じ内容であれば Classでまとめる
  45. 45. 45 CSSフレームワーク 「bootstrap」は この設計思想をベースに 作られています
  46. 46. BEM 46 3
  47. 47. 47 Block Element Modifier
  48. 48. 48 html構造を明確にする
  49. 49. 49 Block Element Modifier どこでも使える大きな 要素、class Blockの中にある要素 見た目が変わるもの 役割を3つに分割して管理する
  50. 50. 50 Blockは ページの中を構成する 部品 ロゴ 検索 ヘッダー メインコンテンツブロック 説明 見出し 新着情報 どこに置いても同じ表現 Blockの中に Blockが入ることもある
  51. 51. 51 <div class=“form"> <input class=“form__input" type="text"> <input class=“form__button" type="submit"> </div> 命名規則に注意 ElementはBlockの中にある要素 送信
  52. 52. 52 <ul class="list list_type_primary"> Modifierは見た目が違うもの担当 テキスト テキスト テキスト テキスト <ul class="list list_type_secondary"> 命名規則に注意
  53. 53. 命名規則の考え方 53
  54. 54. 1. Classを使う 2. マルチクラス 3. パーツ基準 4. 基本となるclass 5. 名称担当を分ける 54 ポイント
  55. 55.  IdはJavaScriptで使う  使い回しができない  上書きが難しい 55 Classを使う1
  56. 56. 役割を分離させることで 使いやすくなる 56 マルチクラス ボタン 文字色、背景色 大きさ 角丸 2
  57. 57. 57 パーツ基準 どこに置いても大丈夫 テキスト テキスト <div class="list"> <ul> <li> … 3
  58. 58. 58 基本となるclass 共通部分を 基本としてまとめる 見出し1 <h1 class=“heading heading-primary"> <h2 class=“heading heading-secondary"> <h3 class=“heading heading-tertiary"> 4 見出し2 見出し2
  59. 59. 59 名称担当を分ける5 .block__element--modifier{…} .block__element--key_value{…} 部品名__構成要素--状態 状態はさらに分けてわかりやすくする BEMの場合
  60. 60. CSSファイルの記述法 60
  61. 61. 1. 目次をつける 2. ABC順 3. 構成場所で分ける 4. 子セレクタを使う 5. Media queryは場所ごとにまとめる 61 ポイント
  62. 62. デメリット 62
  63. 63. 作るのが大変 63
  64. 64. Classの命名に悩む 64
  65. 65. Classが長い 65
  66. 66. CSSを 学習する本、サイト 66
  67. 67. Web制作者のためのCSS設計 の教科書 67
  68. 68. https://smacss.com/ja 68
  69. 69. CodeGrid 69
  70. 70. Qiita 70
  71. 71. 悩まないコーディングをしよ う! 71
  72. 72. 以上 72

×