Your SlideShare is downloading. ×
0
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

590

Published on

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

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

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

No Downloads
Views
Total Views
590
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WEBフロントエンド開発のトレンドについてのディスカッション
  • 2. 自己紹介http://www.pictron.nettwitter:pictron2009facebook 杉山敦
  • 3. 最近の俺 仕事 飲み食い 5% 10% サッカー読書 40%15% 音楽 30%
  • 4. さて本題フロントエンド開発、コーディングのセオリーやトレンドは?css framework,sass,less,レスポンシブWordPressに関係ある?
  • 5. さて本題もちろん関係おおあり。そういう事をみんなでソース見ながらお話しようという感じです。
  • 6. そこでまずトレンドを探る意味で 他にもたくさんあるのですが話題のHTML5のテンプレートから ベストプラクティスを探る。
  • 7. HTML5でサイトを作る際の コーディングや環境設定の 標準構成となるテンプレートBOILERPLATEをさらにカスタムビルドしたページを作るのに必要最低限な構成
  • 8. ファイル構成を見てみよう 404.html favicon.ico apple-touch-icon.png robot.txtなど必要なファイルのセオリーを確認
  • 9. 使われているモジュール normalize.cssプロパティ標準化のリセットするCSS 定義量が少なくて済むと言われる
  • 10. 使われているモジュール ModernizrHTML5、CSS3 の機能の有無をテストし <html>にクラス名として追加
  • 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. 実はバージョンを経る過程でけっこう内容は変わってきている
  • 13. かつて入っていたモジュール Respond.js  Respond.jsとレスポンシブWebデザインをめぐる ベストプラクティス議論
  • 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. もちろんWordPressのテーマ
  • 16. もちろんWordPressのテーマ

×