Upload
mitsuru-ogawa
View
644
Download
2
Embed Size (px)
DESCRIPTION
2013/7/3の社内
Citation preview
ゆるふわ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だと思われて修正されたりと、あまりいい思いでがない。
ご静聴ありがとうございました。え!?ゆるふあじゃなかったって?