やばいCSS 楽しく学ぼう

小倉 大樹

CSSが苦手？結構、ではますます嫌いになりますよ。

CSSのどこが難しいのか• デザインそのものが難しい & 知らない

• GUI構築そのものが複雑で難しい行為

• CSSの言語仕様の貧弱さ

• CSSの機能が多すぎるので覚えきれない

とか、主にそういった理由ではなかろうか。

そもそもデザインって 難しいよ

Bootstrapはデザインの問題を解決しないよ。

コンポーネント作成とか、基本的なレイアウトに必要な汎用クラスを用意する手間を減らしてくれるだけだよ。 とはいえ便利だよ。

今回、デザインそのものについては扱い(え)ません。

PDFなどにおこされた絵を、 そのままHTMLとCSSで仕上げる技術についてのみ言及します。

とはいえ、 フロントエンドを実装するにあたって、 デザインのコンテクストを理解できるように なるためにも基礎的事項は押さえておくほうが 望ましいです。

最初の基礎の基礎的な入門にはノンデザイナーズデザインブックがおすすめ！

デザイナーに頼れない場合は？弊社あるあるの事象

とりあえずレイアウトだけでも基本を守ってきっちり作ろう！

それだけでかなり使いやすいUIになるはず。

色増やしたり、あちこちにシャドウを入れたり、画像を入れたボタンを作ったり……グラデーションさせたり、アニメーションさせたり……素人が付け焼刃の『デザイン』をしても逆効果にしかならないよ！

フラットデザインの流れは「簡単」ではないけど、エンジニアでもとっつきやすいものなのでどんどん取り入れていきましょう。

GUI構築の複雑さ

そもそもUIの構築って難しい……

そして、HTMLやCSSは そもそもGUIを構築するために生まれたものではない

おさえるべきポイント

• UIそのものに対する「気持ち」

• GUI構築の基本的なパターン

• Webという環境の向き、不向き

• GUI環境として日々進歩しているWeb界隈の情報収集

WebUIに求められる知見• HTMLのセマンティクス

• CSSの仕様

• 欲しいレイアウトを組むためのノウハウ

• etc……

上記の内容を駆使しつつ、JavaScriptによる インタラクションを視野に入れて設計しないといけない。

対策• HTML、CSSの『仕様』を読む

• JavaScriptも頑張る

• 『何が出来るか』の知見を集める

• 試行錯誤して経験を積む

身も蓋もないけど、これしかない。適当にググって、その場しのぎのCSSスニペットをコピペしたところで永遠に何も身に付かない……。

言語としての CSSが しんどい件について

meta CSS or

cssnext

メタCSSか次世代CSSを使う

• CSSに対する不満点の7割はそれで解消する

• 変数、四則演算、mixin、関数……

• コンパイルの手間とかはかかるけど、ペイする

いい加減、生のCSSはありえない！！ やめよう！

残った3割の不満は？

• 全てがグローバルなのつらい

• スタイルの再利用性とか幻想じゃないですか

• BEMとかの運用努力にも限界が……

耐えましょう。

もしかしたら救ってくれるかもしれない技術

ReactStyle• ほぼSPA前提

• HTML（構造）、CSS（スタイル）、JavaScript（ロジック）に分裂した世界を統合する技術

• スコープの概念がCSSにも！

• でもそこまでReactに依存していいの……という不安

Polymer（Web Components）

• スコープ、パーツの再利用性に重きを置いている？

• WebUIの世界にModuleの概念が！

• JavaScriptも含めた包括的なスコープを作る

• まだまだ仕様が不安定っぽい雰囲気をかんじる

あんまよくわかってないですごめんなさい……

がんばろう！未来は明るい。

CSSの機能がおおすぎる

作りまくるしかない。

CSSのノウハウ系の知識は、書籍にしろネットにしろいい加減なものが多いし……

がむしゃら前の頑張りポイント1. まず綺麗なHTMLありき！

2. 次にCSSの基本仕様！

3. BEMとかそこらへんの知見をおさえる

4. 色々なウェブサービスのUIを日頃から意識する

5. CSSの引き際を覚える（複雑なことはJS）

6. 新しいCSSの仕様をチェックする

フックポイント

• ボックスモデル

• display

• float（overflow）

• position

ここら辺をおさえておけば、基本的なレイアウトはサッと作れるようになる（はず）。

中級フック

• 擬似要素、擬似クラス

• box-sizing

• flexbox

• transform

ここら辺をおさえるとちょっと複雑なデザインもがんばれる（かも）。

まとめ

• まずはHTML

• 逆引きテクニックの前に仕様

• 何かしらのメタCSSは必須

• BEMで命名する

• 思い通りのレイアウトを作れるようになったら、 変更に強いコーディングをできるマンになろう

• クラスの再利用性は割り切る

• あんまり複雑なものは諦めてJSを使う

fin

DEMO（いまつくってるやつ）