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

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

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

Transcript

1. 開発現場の実 入門 脱・ビギナーのための
2. 自分の書き終わった 二度と見返したくない人‍♂
3. とりあえず書いたけれども ✔ 後からどこを修正すればいいかわからない ✔ 携帯から見たら画面が崩れる・・・ ✔ 新しい要素を作るたび、他のスタイルを消した り取り消ししている
4. とりあえず書いたけれども ✔ 後からどこを修正すればいいかわからない ✔ 携帯から見たら画面が崩れる・・・ ✔ 新しい要素を作るたび、他のスタイルを消した り取り消ししている 二度と見返したくない の誕生
5. の学びたては、 ぐちゃぐちゃなコードを書きがち
6. 開発現場では そうした課題を どうしているの？
7. 実は解決手段が あるんです
8. 課題解決のポイント プリプロセッ サ 設計
9. 詳しく説明する前に
10. まずはおさらい
11. とは を修飾するための言語 書き方 　セレクタ　： を適用する対象を指定 　プロパティ：適用する の種類を指定 セレクタ { プロパティ: 値; }
12. 文章構造を定義（骨組み） 文章を装飾（肉付け） 文章の構造を機械 がわかるように書いてあげる （ クローラーなど）
13. 規模の大きい サイトを作ると で修飾する量・範囲が増え、 管理が難しくなっていく
14. なので
15. 実際の開発現場では プリプロセッサを使う
16. プロセッサ ＝ 処理する
17. プリプロセッサ をよりプログラミングに近い形で、 より簡潔・わかりやすい形で記述できる言語 最後にコンパイルし、 ファイルを書き出す 代表的なプリプロセッサ • • •
18. プリプロセッサでできること ✔ ミックスイン 事前に設定したプロパティを 変数名で呼び出せる ✔ 変数定義 色名・数値などを変数定 義し値として代入 ✔ ループ For...each, whileなどの 繰り返し処理
19. ポストプロセッサ すでにある ファイルを、プロセッサを通しコンパ イルし、より良い形にする （自動整形、不要箇所の削除など） 代表的なポストプロセッサ • PurgeCSS • Autoprefixer
20. ポストプロセッサ で改良された ツールとしての利用 などの プリプロセッサ コンパイル コンパイル プロセッサを使うことで、生の を直接書かずにより効 率的に を生成できる ※ ※ ※コンパイルする際は、 や などの言語を使用し変換
21. それでも 大規模開発で 簡単に は破綻する
22. より良い を書くために もうひとつ大事なこと
23. 設計を知ること
24. 設計 書き方のルール 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい
25. 設計 複数人による の記述・管理、 あるいは設計上の破綻を防ぐことを目的として 事前に定める、 記述時のルールのこと。
26. 設計 複数人による の記述・管理、 あるいは設計上の破綻を防ぐことを目的として 事前に定める、 記述時のルールのこと。 ✔ ✔ ✔ ✔ ✔ ［ 設計アイディアの主な種類 ］
27. 代表例①
28. 　 ルール／概念 ページを構成する要素（オブジェクト／コンポー ネント）をBlock, Element, Modifierの３つの要 素に分類して を命名する
29. 命名規則 の要素と命名規則 と は アンダースコア つ （塊・起点） Button A Button A Button A Button B Input Element （blockの構成要素）
30. 命名規則 の要素と命名規則 Block （塊・起点） Button A Button A Button A Button B Input Element （blockの構成要素） Modifier （Block / Elementの 　バリエーション） modifierはハイフン 2つで繋ぐ 命名規則 block--modifier
31. 命名規則 の要素と命名規則 と は アンダースコア つ と はハイフン つ Button A Button B
32. のメリット 命名規則が強力、かつ重複が起こらない。 → コードを見た際に、 クラスが持つ 機能、構造が明確
33. 代表例②
34. ルール／概念 の役割を５つのカテゴリ（ベース／レイアウ ト／モジュール／ステート（状態）テーマ）に分け て管理を行う
35. のカテゴリ分け ［ ベース ］ サイトの背景色 フォントスタイル など（属性セレクタ） 　プロジェクトのデフォルトスタイル。一度決めたら基本的に書き換えないもの ［ レイアウト ］ ヘッダー フッター サイドバー など（属性 セレクタ） 　ページレイアウトを構成する大枠のスタイル。基本 ページに つしかないもの ［ モジュール ］ ボタン リスト など（基本 セレクタ） 　 、 を除いた、ほぼ全ての ページの構成物。部品のスタイル ［ ステート ］ の制御で切り替わるもの（ など） 　 や の表示 非表示 など、状態変化後のスタイル ［ テーマ ］ テーマ毎に切り替える必要のあるもの 　 よりも広い範囲で、ユーザーの好みで ページのスタイルをカスタマイズ 　する場合などに使用（必須のカテゴリではない） Aa Aa Background : #b8d200 Click Sign in Sign out
36. のメリット レイアウトとモジュールが分離しており、スタイ ルの再利用性が高い →コードの記述量が減る／違うレイアウト内で も同じモジュールを何度も利用できる
37. 設計を知れば、 わかりやすい を書けるようになる
38. 設計 書き方のルール 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 自体は変わらないた め、書き方にルールを設 けることで「メンテナンス のしやすい」 を実現 させる試み
39. も も両方知っていないとダメ？
40. すべての 設計を把握する必要はない 考え方を知ることが大事
41. まとめ
42. 課題解決のポイント プリプロセッ サ 設計 より簡潔な記述 効率的なコード 誰にでもわかりやすい メンテナンスしやすさ
43. 開発現場でも通用する 運用をできるように
44. ありがとうございました
45. 最近は と呼ばれるフレームワークなども 使われ始めているので興味ある方は調べてみると 良いかと思います。 代表例 補足 • Styled Components • Emotion.js