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

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

976 views

Published on

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

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

No Downloads
Views
Total views
976
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
3
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. WEBフロントエンド開発のトレンドについてのディスカッション
  2. 2. 自己紹介http://www.pictron.nettwitter:pictron2009facebook 杉山敦
  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. 使われているモジュール ModernizrHTML5、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のテーマ

×