ゆるふわCSS3

1,140 views

Published on

2013/7/3の社内

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,140
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

ゆるふわCSS3

  1. 1. ゆるふわCSS3 2013/07/03 社内フロント技術勉強会#01 LT 小川 充@mitsuruog 1
  2. 2. 偏り注意 ! 偏り注意 10分という短い時間で 基本から最先端まで一気にいきます。 また、個人的に趣向により、かなり内容に偏りがございます。 ご了承ください。
  3. 3. 目次 1. 基本を行く 1.1. よく使うCSS3 1.2.今後、お世話になりそうなCSS3 2. 先端を行く 2.1.CSSプリプロセッサ 2.2.Grunt 3. 最先端を行く 3.1.OOCSS 3.2.モジュール化と命名規約 3.3.shame.css(おまけ)
  4. 4. 1. 基本を行く
  5. 5. よく使うCSS3 角丸 透明度1.0 • 角丸 • • 透明度0.3 透明度 • • border-radius opacity 影 • text-shadow text-shadow、box-shadow box-shadow
  6. 6. よく使うCSS3 • 属性セレクタ • • UI擬似クラス • • [attr^="hoge"]、[attr$="hoge"]、[attr*="hoge"] jQueryでおなじみのやつです。 :enabled、:disabled、:checked 構造擬似クラス • :first-child(最初の要素) :last-child(最後の要素) • :nth-child(n)(n番目の要素)
  7. 7. 今後お世話になりそうな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
  8. 8. 今後お世話になりそうなCSS3 • ターゲット擬似クラス • :target(リンク先のターゲットを指定) <a href= #hoge">aaaa</a> <div id= hoge ></div> a:targetで指定→#hoge tabなどで使います。
  9. 9. 今後お世話になりそうなCSS3 • グラデーション • linear-grandient、radial-grandient かっこよく使うのが難しい。 http://www.colorzilla.com/gradient-editor/
  10. 10. 今後お世話になりそうなCSS3 • アニメーション • tranform(2D、3D変形) • transsition(:hover時のアニメーション) • @keyframes animation CSS Only Macbook Air CSSアニメーションの表現力は豊か 今後アニメーション表現の主力となる だろう。 http://cssdeck.com/labs/css-only-macbook-air
  11. 11. 2. 先端を行く
  12. 12. CSSプリプロセッサ • CSSのよくある問題点 Webページが複雑になればなるほどCSSのコード量が増える。 CSSには他のプログラミング言語にあるモジュール化と再利用と いう概念がない。 CSSのコード量が増えるに従い、冗長なものが増えメンテナンス 困難になる 。 CSSの弱点をツールにて補完 CSSプリプロセッサとは CSSにプログラミング言語的な機能を付け加えるもの。 CSSプリプロセッサ 形式で記述 ビルド CSS
  13. 13. 代表的な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
  14. 14. Grunt • Grunt(http://gruntjs.com/) • 大規模でCSSを記述する場合はビルドプロセスが必須 • CSSプリプロセッサ • 静的構文チェック • 最適化(ミニファイ、結合)
  15. 15. 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ミニファイ)
  16. 16. 3. 最先端を行く
  17. 17. OOCSS • OOCSS • オブジェクト思考CSS Nicole Sullivan http://www.slideshare.net/stubbornella/object-oriented-css
  18. 18. モジュール化と命名規約 • CSSのモジュール化と命名規約は本当に大事。 (大規模Web開発やっみると良く分かる話。) ちゃんとCSSを書くために - CSS/Sass設計の話 日本語で書かれた素晴らしい スライドです。 http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture
  19. 19. SMACSS • SMACSS • Scalable and Modular Architecture for CSS CSS設計の 鉄板です http://smacss.com/ http://smacss.com/ja 先日、和訳されました。 (enja-oss監訳者の斉藤さん)
  20. 20. shame.css(おまけ) • フロントエンドの歴史はブラウザとの し合いの歴 史。 フロントエンジニアとしての苦渋の決断であ る、CSSハック達をshame.cssとしてまとめよう という話。 (shameとは「恥」という意味) CSSハックは静的構文チェックでエラー になったり、Typoだと思われて修正さ れたりと、あまりいい思いでがない。 http://csswizardry.com/2013/04/shame-css/
  21. 21. ご静聴ありがとうございました。 え!?ゆるふあじゃなかったって?

×