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.
「HTML5 Boilerplate」から考える、これからのマーク ッ  ア プ        2013年 4月19日                  Knock! Knock! 勉強会
1)構成フ イ     ァ ルを確認してみよう2)各フ イ    ァ ルを検証してみよう3)も と便利にBoilerplateを使う   っ                  には
※ 今日は新しいタグとか、要素とか、そういう話はないですよ
W eb              51/20
W eb       W eb/DTP          W eb                    W eb   S1/20
Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
1/20
1)構成フ イ     ァ ルを確認してみよう
h5bp-html5-boilerplate-v4.2.0-0-g0adda79.zip
隠し ァ ル  フ イ
テンプレート ァ ル                               フ イcssフ ルダ / imgフ ルダ / jsフ ルダ /     ォ           ォ        ォapple-touch-icon群 / fav...
cssフ ルダ / imgフ ルダ / jsフ ルダ /     ォ          ォ         ォapple-touch-icon群 / favicon.ico /index.html / 404.html /crossdmain....
2)各フ イ    ァ ルを検証してみよう
2-1)index.html
<!DOCTYPE html><!--[if lt IE 7]>   <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>      <html class="...
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js l...
IEの条件分岐コメント × html要素CSSハックやIE専用CSSファイルに換わる手法IEのバージョンによ て、 要素のク          っ html    ラス属性を変更 例)IE7の場合 → <html class="no-js lt...
<script src="//ajax.googleapis.com/ajax/libs/   jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.wr...
JavaScriptの記述はbody要素の閉じタグ直前表示速度の最適化 → JSの読込中はHTMLレンダ ングがスト                 リ     ップ  (少しでも早くレンダ ングした方がユーザーの待たされている感が少ない)  ...
CDNの読み込みとフォールバックCDNの読み込みは、  プロトコル http / https)                 (            を省略 → htmlファ ルに合ったプロトコルを自動的に選択         イ   ただ...
2-2-1)normalize.css
Normalize.css ?表示をゼロにしない(sup や sub を使えば上付き、下付きになるし、 は箇条書きになる)                           ulバグ補正( pre 要素における font-size、 9 にお...
normalize.css か reset.css か好きなヤツを使えばいいじゃん…
2-2-2)main.css
画像置換
.ir { background-color: transparent;      border: 0;      overflow: hidden;      *text-indent: -9999px; /* IE 6/7 fallback ...
<h1 class="logo ir">    静岡のWeb系勉強会/セミナー Knock! Knock!</h1>.logo {     width: 220px;     height: 160px;     background: url...
数種類の非表示処理
/* * Hide from both screenreaders and browsers */         ヴ ジュ             ィ アル上もス リー  ク ンリーダーでも消え      る.hidden {   displ...
/* Hide only visually,   but have it available for screenreaders */                  ス リー                   ク ンリーダーでは読み上げ....
/* Hide visually and from screenreaders,   but maintain layout */         ィ アル/ス リー       ヴ ジュ         ク ンリーダーからは消え      る...
簡素化されていくclearfix
.clearfix:before, .clearfix:after {   content: " ";   display: table;}.clearfix:after {   clear: both;}.clearfix {   *zoom: 1;...
サンプル Media Queries
min-widthの単位はem@media only screen and (min-width: 35em) {  /* Style adjustments for viewports that meet the condition */}T...
2-3-1)Modernizer.js
Modernizer.js ?Modernizr is a JavaScript library thatdetects HTML5 and CSS3 features inthe user’ browser.         s       ...
<html class="no-js" lang="ja"><html class=" js flexbox canvas canvastext webglno-touch geolocation postmessage websqldata-b...
2-3-1)plugin.js
// Avoid `console` errors in browsers that lack a console.(function() {   var method;   var noop = function () {};   var m...
2-4).htaccess
・カスタム404ページ・Google Chrome Frameを呼び出す設定・MIME Type・URL Rewrite wwwア /ナシの統一とか)           (     リ
3)も と便利にBoilerplateを使う   っ                  には
基本テンプレートを選択
テンプレートをカス イ         タマ ズ
まとめ
・HTML5 Boilerplateには様々な ウハウがギッシリ                       ノ・次世代のマーク ッ レン        ア プト ドもキャッチア プ                    ッ・自分の作業テンプレ...
実装に困っ ら     た ご連絡ください!
本日はあ がと ございま    り う     した ご連絡・ご質問など下記までお願いし            ます   E-mail : info@hamnaly.com  Facebook / Twitter : yabecchy
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Upcoming SlideShare
Loading in …5
×

「html5 boilerplate」から考える、これからのマークアップ

5,505 views

Published on

「14th Knock!」 第14回Knock! Knock! 勉強会(2013年 4月 19日、B-nest静岡市産学交流センターにて)

http://knock3.hamnaly.com/vol14/

Published in: Technology
  • Be the first to comment

「html5 boilerplate」から考える、これからのマークアップ

  1. 1. 「HTML5 Boilerplate」から考える、これからのマーク ッ ア プ 2013年 4月19日 Knock! Knock! 勉強会
  2. 2. 1)構成フ イ ァ ルを確認してみよう2)各フ イ ァ ルを検証してみよう3)も と便利にBoilerplateを使う っ には
  3. 3. ※ 今日は新しいタグとか、要素とか、そういう話はないですよ
  4. 4. W eb 51/20
  5. 5. W eb W eb/DTP W eb W eb S1/20
  6. 6. Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
  7. 7. 1/20
  8. 8. 1)構成フ イ ァ ルを確認してみよう
  9. 9. h5bp-html5-boilerplate-v4.2.0-0-g0adda79.zip
  10. 10. 隠し ァ ル フ イ
  11. 11. テンプレート ァ ル フ イcssフ ルダ / imgフ ルダ / jsフ ルダ / ォ ォ ォapple-touch-icon群 / favicon.ico /index.html / 404.html /crossdmain.xml / humans.txt / robot.txt /.htaccessdocsフ ルダ / LICENSE.md / ォREADME.md / CHANGELOG.md ドキ メン フ イ ュ ト ァ ル
  12. 12. cssフ ルダ / imgフ ルダ / jsフ ルダ / ォ ォ ォapple-touch-icon群 / favicon.ico /index.html / 404.html /crossdmain.xml / humans.txt / robot.txt /.htaccessdocsフ ルダ / LICENSE.md / ォREADME.md / CHANGELOG.md
  13. 13. 2)各フ イ ァ ルを検証してみよう
  14. 14. 2-1)index.html
  15. 15. <!DOCTYPE html><!--[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]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script></head><body><!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p><![endif]--><!-- Add your site or application content here --><p>Hello world! This is HTML5 Boilerplate.</p><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>window.jQuery || document.write(<script src="js/vendor/jquery-1.9.1.min.js"></script>)</script><script src="js/plugins.js"></script><script src="js/main.js"></script><!-- Google Analytics: change UA-XXXXX-X to be your sites ID. --><script> var _gaq=[[_setAccount,UA-XXXXX-X],[_trackPageview]]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=//www.google-analytics.com/ga.js; s.parentNode.insertBefore(g,s)}(document,script));</script></body></html>
  16. 16. <!DOCTYPE html><!--[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]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head>
  17. 17. IEの条件分岐コメント × html要素CSSハックやIE専用CSSファイルに換わる手法IEのバージョンによ て、 要素のク っ html ラス属性を変更 例)IE7の場合 → <html class="no-js lt-ie9 lt-ie8">
  18. 18. <script src="//ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write( <script src="js/vendor/jquery-1.9.1.min.js"></script> )</script> <script src="js/plugins.js"></script> CDNの読み込みと <script src="js/main.js"></script> フ ォールバック <!-- Google Analytics: change UA-XXXXX-X to be your sites ID. -->(GAト ラッキングタ グ→省略) </body> JavaScriptはBody要素の閉じタグの直前
  19. 19. JavaScriptの記述はbody要素の閉じタグ直前表示速度の最適化 → JSの読込中はHTMLレンダ ングがスト リ ップ (少しでも早くレンダ ングした方がユーザーの待たされている感が少ない) リ → jQueryでは、 ページの読み込みが終わっ ら てか 処理を開始す るパターンが多い。 それな HTMLの最後でも問題ないよね ら、 (HTMLの読み込み = DOMの構築を待ってから処理を始めるため)
  20. 20. CDNの読み込みとフォールバックCDNの読み込みは、 プロトコル http / https) ( を省略 → htmlファ ルに合ったプロトコルを自動的に選択 イ ただし、 配布元のSSL対応には注意CDNに接続できない場合のフォールバック → 接続できない場合のみ、ローカルのファ ルを参照 イ (表示速度向上のため、有名ライブラリのキャッシュ イ ファ ルを効率的に使う)
  21. 21. 2-2-1)normalize.css
  22. 22. Normalize.css ?表示をゼロにしない(sup や sub を使えば上付き、下付きになるし、 は箇条書きになる) ulバグ補正( pre 要素における font-size、 9 における SVG の overflow の挙動など) IECSS 解析時に、必要以上のゴミとなるコードを作らない(リセット系 CSS は結果的にゴミとなる margin:0 などが大量に挿入される)必要に応じて不要箇所を削除しても OK( Nomalize.css は適切にコメントで区切られていて、不要箇所は削除が簡単) http://www.yomotsu.net/blog/2013/02/23/normalize.html
  23. 23. normalize.css か reset.css か好きなヤツを使えばいいじゃん…
  24. 24. 2-2-2)main.css
  25. 25. 画像置換
  26. 26. .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; /* IE 6/7 fallback */}.ir:before { content: ""; display: block; width: 0; height: 150%;}
  27. 27. <h1 class="logo ir"> 静岡のWeb系勉強会/セミナー Knock! Knock!</h1>.logo { width: 220px; height: 160px; background: url(/img/logo.png) no-repeat;}
  28. 28. 数種類の非表示処理
  29. 29. /* * Hide from both screenreaders and browsers */ ヴ ジュ ィ アル上もス リー ク ンリーダーでも消え る.hidden { display: none !important; visibility: hidden;}
  30. 30. /* Hide only visually, but have it available for screenreaders */ ス リー ク ンリーダーでは読み上げ.visuallyhidden { ヴ ジュ ィ アル上では消える border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
  31. 31. /* Hide visually and from screenreaders, but maintain layout */ ィ アル/ス リー ヴ ジュ ク ンリーダーからは消え る.invisible { レイ ト アウ 上は残る visibility: hidden;}
  32. 32. 簡素化されていくclearfix
  33. 33. .clearfix:before, .clearfix:after { content: " "; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1; /* For IE 6/7 only */}
  34. 34. サンプル Media Queries
  35. 35. min-widthの単位はem@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */}These examples override the primary (mobile first) styles.@media print, (モバイ ルファーストな基本ス ルを上書きする) タイ (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */}
  36. 36. 2-3-1)Modernizer.js
  37. 37. Modernizer.js ?Modernizr is a JavaScript library thatdetects HTML5 and CSS3 features inthe user’ browser. s http://modernizr.com/Modernizrは HTML 5とユーザーのブラウザにCSS 3の機能を検出するJavaScriptライブラリです。 (Google 翻訳)
  38. 38. <html class="no-js" lang="ja"><html class=" js flexbox canvas canvastext webglno-touch geolocation postmessage websqldata-base indexeddb hashchange history dragand-drop websockets rgba hsla multiplebgs back-groundsize borderimage borderradius boxshad-ow textshadow opacity cssanimations csscol-umns cssgradients cssreflections csstransformscsstransforms3d csstransitions fontface generat-edcontent video audio localstorage sessionstor-age webworkers applicationcache svg inlinesvgsmil svgclippaths" lang="ja">
  39. 39. 2-3-1)plugin.js
  40. 40. // Avoid `console` errors in browsers that lack a console.(function() { var method; var noop = function () {}; var methods = [ assert, clear, count, debug, dir, dirxml, error, exception, group, groupCollapsed, groupEnd, info, log,consoleに対応していないブラウザでも markTimeline, profile, profileEnd, table, time, timeEnd, timeStamp, trace, warn ]; エラー表示を出さないようにする var length = methods.length; var console = (window.console = window.console || {}); while (length--) { method = methods[length]; if (!console[method]) { console[method] = noop; } }}());
  41. 41. 2-4).htaccess
  42. 42. ・カスタム404ページ・Google Chrome Frameを呼び出す設定・MIME Type・URL Rewrite wwwア /ナシの統一とか) ( リ
  43. 43. 3)も と便利にBoilerplateを使う っ には
  44. 44. 基本テンプレートを選択
  45. 45. テンプレートをカス イ タマ ズ
  46. 46. まとめ
  47. 47. ・HTML5 Boilerplateには様々な ウハウがギッシリ ノ・次世代のマーク ッ レン ア プト ドもキャッチア プ ッ・自分の作業テンプレート ア プデートし うぜ も ッ よ !
  48. 48. 実装に困っ ら た ご連絡ください!
  49. 49. 本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy

×