Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
「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」から考える、これからのマークアップ
Próxima SlideShare
Cargando en…5
×

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

5.588 visualizaciones

Publicado el

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

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

Publicado en: Tecnología
  • Sé el primero en comentar

「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

×