ゆるふわCSS3
2013/07/03 社内フロント技術勉強会#01
LT 小川 充@mitsuruog
1

偏り注意
!
偏り注意 10分という短い時間で
基本から最先端まで一気にいきます。
また、個人的に趣向により、かなり内容に偏りがございます。
ご了承ください。

目次
1. 基本を行く
1.1. よく使うCSS3
1.2.今後、お世話になりそうなCSS3
2. 先端を行く
2.1.CSSプリプロセッサ
2.2.Grunt
3. 最先端を行く
3.1.OOCSS
3.2.モジュール化と命名規約
3.3.shame.css（おまけ）

1. 基本を行く

よく使うCSS3
角丸
透明度1.0
•
角丸
•
•
透明度0.3
透明度
•
•
border-radius
opacity
影
•
text-shadow
text-shadow、box-shadow
box-shadow

よく使うCSS3
•
属性セレクタ
•
•
UI擬似クラス
•
•
[attr^="hoge"]、[attr$="hoge"]、[attr*="hoge"]
jQueryでおなじみのやつです。
:enabled、:disabled、:checked
構造擬似クラス
•
:first-child（最初の要素） :last-child（最後の要素）
•
:nth-child(n)（n番目の要素）

今後お世話になりそうなCSS3
•
floatの代わり
ボックスレイアウト
•
display:box/inline-box
!
http://www.css-lecture.com/log/css3/css3-layout-box.html
!
•
マルチカラムレイアウト
•
columns: 段の横幅 段の数
!
divの中で段組
http://thinkit.co.jp/story/2012/04/12/3515?page=0,2

今後お世話になりそうなCSS3
•
ターゲット擬似クラス
•
:target（リンク先のターゲットを指定）
<a href= #hoge">aaaa</a>
<div id= hoge ></div>
a:targetで指定→#hoge
tabなどで使います。

今後お世話になりそうなCSS3
•
グラデーション
•
linear-grandient、radial-grandient
かっこよく使うのが難しい。
http://www.colorzilla.com/gradient-editor/

今後お世話になりそうなCSS3
•
アニメーション
•
tranform（2D、3D変形）
•
transsition（:hover時のアニメーション）
•
@keyframes animation
CSS Only Macbook Air
CSSアニメーションの表現力は豊か
今後アニメーション表現の主力となる
だろう。
http://cssdeck.com/labs/css-only-macbook-air

2. 先端を行く

CSSプリプロセッサ
•
CSSのよくある問題点
Webページが複雑になればなるほどCSSのコード量が増える。
CSSには他のプログラミング言語にあるモジュール化と再利用と
いう概念がない。
CSSのコード量が増えるに従い、冗長なものが増えメンテナンス
困難になる 。
CSSの弱点をツールにて補完
CSSプリプロセッサとは
CSSにプログラミング言語的な機能を付け加えるもの。
CSSプリプロセッサ
形式で記述
ビルド
CSS

代表的なCSSプリプロセッサ
less
Sass
stylus
http://lesscss.org/
http://sass-lang.com/
http://learnboost.github.io/stylus/
実は、ドキュメントの日本語訳すべてenja-ossメンバーにて行いました。
less
http://less-ja.studiomohawk.com/
Sass
https://github.com/enja-oss/Sass/tree/master/docs
stylus https://github.com/enja-oss/stylus/tree/master/docs

Grunt
•
Grunt（http://gruntjs.com/）
•
大規模でCSSを記述する場合はビルドプロセスが必須
•
CSSプリプロセッサ
•
静的構文チェック
•
最適化（ミニファイ、結合）

Grunt
•
良く使うタスク
•
CSSプリプロセッサビルド系
•
https://npmjs.org/package/grunt-contrib-compass（Sassビルド）
•
https://npmjs.org/package/grunt-contrib-less（Lessビルド）
•
•
静的構文チェック系
•
•
https://npmjs.org/package/grunt-contrib-stylus（Stylusビルド）
https://npmjs.org/package/grunt-contrib-csslint（構文チェック）
最適化系
•
https://npmjs.org/package/grunt-contrib-cssmin（CSSミニファイ）
•
https://npmjs.org/package/grunt-csso（CSSミニファイ）

3. 最先端を行く

OOCSS
•
OOCSS
•
オブジェクト思考CSS
Nicole
Sullivan
http://www.slideshare.net/stubbornella/object-oriented-css

モジュール化と命名規約
•
CSSのモジュール化と命名規約は本当に大事。
（大規模Web開発やっみると良く分かる話。）
ちゃんとCSSを書くために - CSS/Sass設計の話
日本語で書かれた素晴らしい
スライドです。
http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture

SMACSS
•
SMACSS
•
Scalable and Modular Architecture for CSS
CSS設計の
鉄板です
http://smacss.com/
http://smacss.com/ja
先日、和訳されました。
（enja-oss監訳者の斉藤さん）

shame.css(おまけ)
•
フロントエンドの歴史はブラウザとの し合いの歴
史。 フロントエンジニアとしての苦渋の決断であ
る、CSSハック達をshame.cssとしてまとめよう
という話。
（shameとは「恥」という意味）
CSSハックは静的構文チェックでエラー
になったり、Typoだと思われて修正さ
れたりと、あまりいい思いでがない。
http://csswizardry.com/2013/04/shame-css/

ご静聴ありがとうございました。
え！？ゆるふあじゃなかったって？