Download as PDF, PPTX
More Related Content
CSS設計のお勉強
- 1.
- 2. 過去のCSSの記述 CSS設計とは OOCSS、SMACSS、BEM 命名規則の考え方 CSSファイルの記述法 CSS設計を学習する本、サイト 2 アジェンダ
- 3.
- 4. 4 #sidebar .list ulli ul li a 1 サイドカラムにリストの入れ子 テキスト テキスト テキスト テキスト テキスト
- 5.
- 6. 6 詳細を見る .button1 2 ボタンをたくさん作りました PageTop 詳細を見る 詳細を見る詳細を見る 詳しくはこちら .button2 .button3 .button4 .button5 .button6
- 7.
- 8.
- 9.
- 10. 10 #header ul #header ulli #header ul li a 4 ヘッダーナビゲーション テキスト テキスト
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. 1. 予測しやすい 2. 再利用しやすい 3.保守しやすい 4. 拡張しやすい 20 ポイント
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. 37 Stateは JavaScriptで見た目 が変わる箇所に つける テキスト テキスト <ulli a class=“sideList is-hover”> テキストの色が変わる場合
- 38.
- 39.
- 40.
- 41.
- 42.
- 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 コンテナーとコンテンツの分離 .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.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. 51 <div class=“form"> <input class=“form__input"type="text"> <input class=“form__button" type="submit"> </div> 命名規則に注意 ElementはBlockの中にある要素 送信
- 52. 52 <ul class="list list_type_primary"> Modifierは見た目が違うもの担当 テキスト テキスト テキスト テキスト <ulclass="list list_type_secondary"> 命名規則に注意
- 53.
- 54. 1. Classを使う 2. マルチクラス 3.パーツ基準 4. 基本となるclass 5. 名称担当を分ける 54 ポイント
- 55. IdはJavaScriptで使う 使い回しができない 上書きが難しい 55 Classを使う1
- 56.
- 57.
- 58. 58 基本となるclass 共通部分を 基本としてまとめる 見出し1 <h1 class=“headingheading-primary"> <h2 class=“heading heading-secondary"> <h3 class=“heading heading-tertiary"> 4 見出し2 見出し2
- 59.
- 60.
- 61. 1. 目次をつける 2. ABC順 3.構成場所で分ける 4. 子セレクタを使う 5. Media queryは場所ごとにまとめる 61 ポイント
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.