やばい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
(いまつくってるやつ)

Css benkyou