ゆるふわCSS32013/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

• 角丸 • border-radius

• 透明度 • opacity

• 影 • text-shadow、box-shadow

角丸

透明度1.0

透明度0.3

box-shadow

text-shadow

よく使うCSS3• 属性セレクタ

• [attr^="hoge"]、[attr$="hoge"]、[attr*="hoge"]

• UI擬似クラス • :enabled、:disabled、:checked

• 構造擬似クラス • :first-child（最初の要素） :last-child（最後の要素） • :nth-child(n)（n番目の要素）

jQueryでおなじみのやつです。

今後お世話になりそうなCSS3• ボックスレイアウト

• display:box/inline-box

!

!

• マルチカラムレイアウト • columns: 段の横幅 段の数

!

http://www.css-lecture.com/log/css3/css3-layout-box.html

http://thinkit.co.jp/story/2012/04/12/3515?page=0,2

divの中で段組

floatの代わり

今後お世話になりそうな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

http://cssdeck.com/labs/css-only-macbook-air

CSSアニメーションの表現力は豊か 今後アニメーション表現の主力となる

だろう。

CSS Only Macbook Air

2. 先端を行く

CSSプリプロセッサ• CSSのよくある問題点 Webページが複雑になればなるほどCSSのコード量が増える。

CSSには他のプログラミング言語にあるモジュール化と再利用という概念がない。

CSSのコード量が増えるに従い、冗長なものが増えメンテナンス困難になる 。

CSSプリプロセッサとは

CSSにプログラミング言語的な機能を付け加えるもの。

CSSプリプロセッサ形式で記述 ビルド CSS

CSSの弱点をツールにて補完

代表的なCSSプリプロセッサ

http://learnboost.github.io/stylus/http://lesscss.org/ http://sass-lang.com/

https://github.com/enja-oss/Sass/tree/master/docshttp://less-ja.studiomohawk.com/

https://github.com/enja-oss/stylus/tree/master/docs

less Sass stylus

実は、ドキュメントの日本語訳すべてenja-ossメンバーにて行いました。

lessSassstylus

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

http://www.slideshare.net/stubbornella/object-oriented-css

Nicole Sullivan

モジュール化と命名規約• CSSのモジュール化と命名規約は本当に大事。 （大規模Web開発やっみると良く分かる話。）

http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture

ちゃんとCSSを書くために - CSS/Sass設計の話

日本語で書かれた素晴らしい スライドです。

SMACSS• SMACSS

• Scalable and Modular Architecture for CSS

http://smacss.com/

CSS設計の 鉄板です

http://smacss.com/ja

先日、和訳されました。 （enja-oss監訳者の斉藤さん）

shame.css(おまけ)• フロントエンドの歴史はブラウザとの騙し合いの歴史。 フロントエンジニアとしての苦渋の決断である、CSSハック達をshame.cssとしてまとめようという話。 （shameとは「恥」という意味）

http://csswizardry.com/2013/04/shame-css/

CSSハックは静的構文チェックでエラーになったり、Typoだと思われて修正されたりと、あまりいい思いでがない。

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