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.
Upcoming SlideShare
Bab 11
Bab 11
Loading in …3
×
1 of 16

フロンエンドトレンドについて話そう

4

Share

Download to read offline

WordBench神戸2012/11/10発表資料

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

フロンエンドトレンドについて話そう

  1. 1. WEBフロントエンド開発の トレンドについてのディスカッション
  2. 2. 自己紹介 http://www.pictron.net twitter:pictron2009 facebook 杉山敦
  3. 3. 最近の俺 仕事 飲み食い 5% 10% サッカー 読書 40% 15% 音楽 30%
  4. 4. さて本題 フロントエンド開発、コーディングの セオリーやトレンドは? css framework,sass,less,レスポンシブ WordPressに関係ある?
  5. 5. さて本題 もちろん関係おおあり。 そういう事をみんなでソース見ながら お話しようという感じです。
  6. 6. そこでまずトレンドを探る意味で 他にもたくさんあるのですが 話題のHTML5のテンプレートから ベストプラクティスを探る。
  7. 7. HTML5でサイトを作る際の コーディングや環境設定の 標準構成となるテンプレート BOILERPLATEをさらにカスタムビルド したページを作るのに必要最低限な構成
  8. 8. ファイル構成を見てみよう 404.html favicon.ico apple-touch-icon.png robot.txt など必要なファイルのセオリーを確認
  9. 9. 使われているモジュール normalize.css プロパティ標準化のリセットするCSS 定義量が少なくて済むと言われる
  10. 10. 使われているモジュール Modernizr HTML5、CSS3 の機能の有無をテストし <html>にクラス名として追加
  11. 11. Modernizr /* boxshadowが使えないスタイル */ #box{  background-color:#fff;  border-right:2px solid #ccc;  border-bottom:2px solid #ccc; } /* boxshadowが使える場合のスタイル */ .boxshadow #box{ border:none; -moz-box-shadow:#666 1px 1px 3px; -webkit-box-shadow:#666 1px 1px 3px; box-shadow:#666 1px 1px 3px; }
  12. 12. 実はバージョンを経る過程で けっこう内容は変わってきている
  13. 13. かつて入っていたモジュール Respond.js   Respond.jsとレスポンシブWebデザインをめぐる ベストプラクティス議論
  14. 14. ヘッダーでやっている事 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->! <!--[if IE 7]><html class=“no-js lt-ie9 lt-ie8”> <![endif]à! セマンテックでクリーンなコードのために Paul Irishが提唱するにはcss-hackではなく div.foo { color: inherit;}! .ie7 div.foo { color: #ff8000; }! CSSとしてエラーではない!分岐させる箇所を1つに
  15. 15. もちろんWordPressのテーマ
  16. 16. もちろんWordPressのテーマ

×