Recommandé
Contenu connexe
En vedette
Similaire à Css benkyou
Similaire à Css benkyou (13)
Css benkyou
- 3. CSSのどこが難しいのか • デザインそのものが難しい & 知らない • GUI構築そのものが複雑で難しい行為 • CSSの言語仕様の貧弱さ • CSSの機能が多すぎるので覚えきれない とか、主にそういった理由ではなかろうか。
- 11. GUI構築の複雑さ
- 13. おさえるべきポイント • UIそのものに対する「気持ち」 • GUI構築の基本的なパターン • Webという環境の向き、不向き • GUI環境として日々進歩しているWeb界隈の情報収集
- 14. WebUIに求められる知見 • HTMLのセマンティクス • CSSの仕様 • 欲しいレイアウトを組むためのノウハウ • etc…… 上記の内容を駆使しつつ、JavaScriptによる インタラクションを視野に入れて設計しないといけない。
- 15. 対策 • HTML、CSSの『仕様』を読む • JavaScriptも頑張る • 『何が出来るか』の知見を集める • 試行錯誤して経験を積む 身も蓋もないけど、これしかない。 適当にググって、その場しのぎのCSSスニペットを コピペしたところで永遠に何も身に付かない……。
- 18. メタCSSか次世代CSSを使う • CSSに対する不満点の7割はそれで解消する • 変数、四則演算、mixin、関数…… • コンパイルの手間とかはかかるけど、ペイする いい加減、生のCSSはありえない！！ やめよう！
- 19. 残った3割の不満は？ • 全てがグローバルなのつらい • スタイルの再利用性とか幻想じゃないですか • BEMとかの運用努力にも限界が…… 耐えましょう。
- 21. ReactStyle • ほぼSPA前提 • HTML（構造）、CSS（スタイル）、 JavaScript（ロジック）に分裂した世界を統合する 技術 • スコープの概念がCSSにも！ • でもそこまでReactに依存していいの……という不安
- 22. Polymer（Web Components） • スコープ、パーツの再利用性に重きを置いている？ • WebUIの世界にModuleの概念が！ • JavaScriptも含めた包括的なスコープを作る • まだまだ仕様が不安定っぽい雰囲気をかんじる あんまよくわかってないですごめんなさい……
- 23. がんばろう！ 未来は明るい。
- 24. CSSの機能がおおすぎる
- 26. がむしゃら前の頑張りポイント 1. まず綺麗なHTMLありき！ 2. 次にCSSの基本仕様！ 3. BEMとかそこらへんの知見をおさえる 4. 色々なウェブサービスのUIを日頃から意識する 5. CSSの引き際を覚える（複雑なことはJS） 6. 新しいCSSの仕様をチェックする
- 27. フックポイント • ボックスモデル • display • float（overflow） • position ここら辺をおさえておけば、 基本的なレイアウトはサッと作れるようになる（はず）。
- 28. 中級フック • 擬似要素、擬似クラス • box-sizing • flexbox • transform ここら辺をおさえるとちょっと複雑なデザインもがんばれる（かも）。
- 29. まとめ
- 30. • まずはHTML • 逆引きテクニックの前に仕様 • 何かしらのメタCSSは必須 • BEMで命名する • 思い通りのレイアウトを作れるようになったら、 変更に強いコーディングをできるマンになろう • クラスの再利用性は割り切る • あんまり複雑なものは諦めてJSを使う
- 31. fin
- 32. DEMO （いまつくってるやつ）