Download as PDF, PPTX
Css benkyou
- 1.
- 2.
- 3. CSSのどこが難しいのか • デザインそのものが難しい &知らない • GUI構築そのものが複雑で難しい行為 • CSSの言語仕様の貧弱さ • CSSの機能が多すぎるので覚えきれない とか、主にそういった理由ではなかろうか。
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. おさえるべきポイント • UIそのものに対する「気持ち」 • GUI構築の基本的なパターン •Webという環境の向き、不向き • GUI環境として日々進歩しているWeb界隈の情報収集
- 14. WebUIに求められる知見 • HTMLのセマンティクス • CSSの仕様 •欲しいレイアウトを組むためのノウハウ • etc…… 上記の内容を駆使しつつ、JavaScriptによる インタラクションを視野に入れて設計しないといけない。
- 15. 対策 • HTML、CSSの『仕様』を読む • JavaScriptも頑張る •『何が出来るか』の知見を集める • 試行錯誤して経験を積む 身も蓋もないけど、これしかない。 適当にググって、その場しのぎのCSSスニペットを コピペしたところで永遠に何も身に付かない……。
- 16.
- 17.
- 18. メタCSSか次世代CSSを使う • CSSに対する不満点の7割はそれで解消する • 変数、四則演算、mixin、関数…… •コンパイルの手間とかはかかるけど、ペイする いい加減、生のCSSはありえない！！ やめよう！
- 19. 残った3割の不満は？ • 全てがグローバルなのつらい • スタイルの再利用性とか幻想じゃないですか •BEMとかの運用努力にも限界が…… 耐えましょう。
- 20.
- 21. ReactStyle • ほぼSPA前提 • HTML（構造）、CSS（スタイル）、 JavaScript（ロジック）に分裂した世界を統合する 技術 •スコープの概念がCSSにも！ • でもそこまでReactに依存していいの……という不安
- 22. Polymer（Web Components） • スコープ、パーツの再利用性に重きを置いている？ •WebUIの世界にModuleの概念が！ • JavaScriptも含めた包括的なスコープを作る • まだまだ仕様が不安定っぽい雰囲気をかんじる あんまよくわかってないですごめんなさい……
- 23.
- 24.
- 25.
- 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.
- 32.