Upgrade to Pro — share decks privately, control downloads, hide ads and more …

脱ビギナーのためのCSS入門

 脱ビギナーのためのCSS入門

HTML/CSSの勉強中の方に向けて作成した現場でよく使われるCSS設計、プリプロセッセについて説明しています。

Mentaにてフロントエンドエンジニアを目指す方向けのレッスンを提供しております。ご興味ある方は下記リンクをご確認ください。
https://menta.work/plan/1608

version1-workspace

June 02, 2020
Tweet

More Decks by version1-workspace

Other Decks in Programming

Transcript

  1. 開発現場の実 入門
    脱・ビギナーのための

    View full-size slide

  2. 自分の書き終わった
    二度と見返したくない人‍♂

    View full-size slide

  3. とりあえず書いたけれども
    ✔ 後からどこを修正すればいいかわからない
    ✔ 携帯から見たら画面が崩れる・・・
    ✔ 新しい要素を作るたび、他のスタイルを消した
    り取り消ししている

    View full-size slide

  4. とりあえず書いたけれども
    ✔ 後からどこを修正すればいいかわからない
    ✔ 携帯から見たら画面が崩れる・・・
    ✔ 新しい要素を作るたび、他のスタイルを消した
    り取り消ししている
    二度と見返したくない の誕生

    View full-size slide

  5. の学びたては、
    ぐちゃぐちゃなコードを書きがち

    View full-size slide

  6. 開発現場では
    そうした課題を
    どうしているの?

    View full-size slide

  7. 実は解決手段が
    あるんです

    View full-size slide

  8. 課題解決のポイント
    プリプロセッ

    設計

    View full-size slide

  9. 詳しく説明する前に

    View full-size slide

  10. まずはおさらい

    View full-size slide

  11. とは
    を修飾するための言語
    書き方
     セレクタ : を適用する対象を指定
     プロパティ:適用する の種類を指定
    セレクタ { プロパティ: 値; }

    View full-size slide

  12. 文章構造を定義(骨組み) 文章を装飾(肉付け)
    文章の構造を機械
    がわかるように書いてあげる
    ( クローラーなど)

    View full-size slide

  13. 規模の大きい サイトを作ると
    で修飾する量・範囲が増え、
    管理が難しくなっていく

    View full-size slide

  14. 実際の開発現場では
    プリプロセッサを使う

    View full-size slide

  15. プロセッサ = 処理する

    View full-size slide

  16. プリプロセッサ
    をよりプログラミングに近い形で、
    より簡潔・わかりやすい形で記述できる言語
    最後にコンパイルし、 ファイルを書き出す
    代表的なプリプロセッサ ●


    View full-size slide

  17. プリプロセッサでできること
    ✔ ミックスイン
    事前に設定したプロパティを
    変数名で呼び出せる
    ✔ 変数定義
    色名・数値などを変数定
    義し値として代入
    ✔ ループ
    For...each, whileなどの
    繰り返し処理

    View full-size slide

  18. ポストプロセッサ
    すでにある ファイルを、プロセッサを通しコンパ
    イルし、より良い形にする
    (自動整形、不要箇所の削除など)
    代表的なポストプロセッサ ● PurgeCSS
    ● Autoprefixer

    View full-size slide

  19. ポストプロセッサ
    で改良された
    ツールとしての利用
    などの
    プリプロセッサ
    コンパイル コンパイル
    プロセッサを使うことで、生の を直接書かずにより効
    率的に を生成できる
    ※ ※
    ※コンパイルする際は、 や などの言語を使用し変換

    View full-size slide

  20. それでも
    大規模開発で
    簡単に は破綻する

    View full-size slide

  21. より良い を書くために
    もうひとつ大事なこと

    View full-size slide

  22. 設計を知ること

    View full-size slide

  23. 設計 書き方のルール
    予測しやすい
    再利用しやすい
    保守しやすい
    拡張しやすい

    View full-size slide

  24. 設計
    複数人による の記述・管理、
    あるいは設計上の破綻を防ぐことを目的として
    事前に定める、 記述時のルールのこと。

    View full-size slide

  25. 設計
    複数人による の記述・管理、
    あるいは設計上の破綻を防ぐことを目的として
    事前に定める、 記述時のルールのこと。
    ✔ ✔ ✔
    ✔ ✔
    [ 設計アイディアの主な種類 ]

    View full-size slide

  26. 代表例①

    View full-size slide

  27.  
    ルール/概念
    ページを構成する要素(オブジェクト/コンポー
    ネント)をBlock, Element, Modifierの3つの要
    素に分類して を命名する

    View full-size slide

  28. 命名規則
    の要素と命名規則
    と は
    アンダースコア つ
    (塊・起点)
    Button A Button A Button A
    Button B
    Input
    Element
    (blockの構成要素)

    View full-size slide

  29. 命名規則
    の要素と命名規則
    Block
    (塊・起点)
    Button A Button A Button A
    Button B
    Input
    Element
    (blockの構成要素)
    Modifier
    (Block / Elementの
     バリエーション)
    modifierはハイフン
    2つで繋ぐ
    命名規則 block--modifier

    View full-size slide

  30. 命名規則
    の要素と命名規則
    と は
    アンダースコア つ

    はハイフン つ
    Button A
    Button B

    View full-size slide

  31. のメリット
    命名規則が強力、かつ重複が起こらない。
    → コードを見た際に、 クラスが持つ
    機能、構造が明確

    View full-size slide

  32. 代表例②

    View full-size slide

  33. ルール/概念
    の役割を5つのカテゴリ(ベース/レイアウ
    ト/モジュール/ステート(状態)テーマ)に分け
    て管理を行う

    View full-size slide

  34. のカテゴリ分け
    [ ベース ] サイトの背景色 フォントスタイル など(属性セレクタ)
     プロジェクトのデフォルトスタイル。一度決めたら基本的に書き換えないもの
    [ レイアウト ] ヘッダー フッター サイドバー など(属性 セレクタ)
     ページレイアウトを構成する大枠のスタイル。基本 ページに つしかないもの
    [ モジュール ] ボタン リスト など(基本 セレクタ)
      、 を除いた、ほぼ全ての ページの構成物。部品のスタイル
    [ ステート ] の制御で切り替わるもの( など)
      や の表示 非表示 など、状態変化後のスタイル
    [ テーマ ] テーマ毎に切り替える必要のあるもの
      よりも広い範囲で、ユーザーの好みで ページのスタイルをカスタマイズ
     する場合などに使用(必須のカテゴリではない)
    Aa
    Aa
    Background :
    #b8d200
    Click
    Sign in
    Sign out

    View full-size slide

  35. のメリット
    レイアウトとモジュールが分離しており、スタイ
    ルの再利用性が高い
    →コードの記述量が減る/違うレイアウト内で
    も同じモジュールを何度も利用できる

    View full-size slide

  36. 設計を知れば、
    わかりやすい
    を書けるようになる

    View full-size slide

  37. 設計 書き方のルール
    予測しやすい
    再利用しやすい
    保守しやすい
    拡張しやすい
    自体は変わらないた
    め、書き方にルールを設
    けることで「メンテナンス
    のしやすい」 を実現
    させる試み

    View full-size slide

  38. も も両方知っていないとダメ?

    View full-size slide

  39. すべての 設計を把握する必要はない
    考え方を知ることが大事

    View full-size slide

  40. 課題解決のポイント
    プリプロセッ

    設計
    より簡潔な記述
    効率的なコード
    誰にでもわかりやすい
    メンテナンスしやすさ

    View full-size slide

  41. 開発現場でも通用する
    運用をできるように

    View full-size slide

  42. ありがとうございました

    View full-size slide

  43. 最近は と呼ばれるフレームワークなども
    使われ始めているので興味ある方は調べてみると
    良いかと思います。
    代表例
    補足
    ● Styled Components
    ● Emotion.js

    View full-size slide