Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ゆるふわCSS3

1,385 views

Published on

2013/7/3の社内

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ゆるふわ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. ご静聴ありがとうございました。 え!?ゆるふあじゃなかったって?

×