Downloaded 15 times
![<!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 site's 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>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f20130419html5boilerplate-130422080852-phpapp01%2f75%2fhtml5-boilerplate-18-2048.jpg&f=jpg&w=240)
![<!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>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f20130419html5boilerplate-130422080852-phpapp01%2f75%2fhtml5-boilerplate-19-2048.jpg&f=jpg&w=240)
![// 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; } }}());](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f20130419html5boilerplate-130422080852-phpapp01%2f75%2fhtml5-boilerplate-45-2048.jpg&f=jpg&w=240)
Uploaded byYasuhito Yabe
6,045 views
「html5 boilerplate」から考える、これからのマークアップ
「14th Knock!」 第14回Knock! Knock! 勉強会（2013年 4月 19日、B-nest静岡市産学交流センターにて）http://knock3.hamnaly.com/vol14/
Recommended
More Related Content
What's hot
Similar to 「html5 boilerplate」から考える、これからのマークアップ
More from Yasuhito Yabe
「html5 boilerplate」から考える、これからのマークアップ
- 1.「HTML5 Boilerplate」から考える、これからのマーク ッ ア プ 2013年 4月19日 Knock! Knock! 勉強会
- 2.１）構成フ イ ァ ルを確認してみよう２）各フ イ ァ ルを検証してみよう３）も と便利にBoilerplateを使う っ には
- 3.
- 5.W eb 51/20
- 6.W eb W eb/DTP W eb W eb S1/20
- 7.
- 8.
- 9.１）構成フ イ ァ ルを確認してみよう
- 11.
- 12.隠し ァ ル フ イ
- 13.テンプレート ァ ル フ イ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 ドキ メン フ イ ュ ト ァ ル
- 14.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
- 15.２）各フ イ ァ ルを検証してみよう
- 17.
- 18.<!DOCTYPE html><!--[if ltIE 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 site's 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>
- 19.<!DOCTYPE html><!--[if ltIE 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>
- 20.IEの条件分岐コメント × html要素CSSハックやIE専用CSSファイルに換わる手法IEのバージョンによて、 要素のク っ html ラス属性を変更 例）IE7の場合 → <html class="no-js lt-ie9 lt-ie8">
- 21.<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 site's ID. -->（GAト ラッキングタ グ→省略） </body> JavaScriptはBody要素の閉じタグの直前
- 22.JavaScriptの記述はbody要素の閉じタグ直前表示速度の最適化 → JSの読込中はHTMLレンダングがスト リ ップ （少しでも早くレンダ ングした方がユーザーの待たされている感が少ない） リ → jQueryでは、 ページの読み込みが終わっ ら てか 処理を開始す るパターンが多い。 それな HTMLの最後でも問題ないよね ら、 （HTMLの読み込み = DOMの構築を待ってから処理を始めるため）
- 23.CDNの読み込みとフォールバックCDNの読み込みは、 プロトコルhttp / https） （ を省略 → htmlファ ルに合ったプロトコルを自動的に選択 イ ただし、 配布元のSSL対応には注意CDNに接続できない場合のフォールバック → 接続できない場合のみ、ローカルのファ ルを参照 イ （表示速度向上のため、有名ライブラリのキャッシュ イ ファ ルを効率的に使う）
- 25.
- 26.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
- 27.normalize.css か reset.cssか好きなヤツを使えばいいじゃん…
- 28.
- 29.
- 30..ir { background-color:transparent; border: 0; overflow: hidden; *text-indent: -9999px; /* IE 6/7 fallback */}.ir:before { content: ""; display: block; width: 0; height: 150%;}
- 31.<h1 class="logo ir"> 静岡のWeb系勉強会/セミナー Knock! Knock!</h1>.logo { width: 220px; height: 160px; background: url(/img/logo.png) no-repeat;}
- 32.
- 33./* * Hidefrom both screenreaders and browsers */ ヴ ジュ ィ アル上もス リー ク ンリーダーでも消え る.hidden { display: none !important; visibility: hidden;}
- 34./* Hide onlyvisually, 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;}
- 35./* Hide visuallyand from screenreaders, but maintain layout */ ィ アル/ス リー ヴ ジュ ク ンリーダーからは消え る.invisible { レイ ト アウ 上は残る visibility: hidden;}
- 36.
- 37..clearfix:before, .clearfix:after { content: " "; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1; /* For IE 6/7 only */}
- 38.
- 39.min-widthの単位はem@media only screenand (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 */}
- 41.
- 42.Modernizer.js ?Modernizr isa JavaScript library thatdetects HTML5 and CSS3 features inthe user’ browser. s http://modernizr.com/Modernizrは HTML 5とユーザーのブラウザにCSS 3の機能を検出するJavaScriptライブラリです。 （Google 翻訳）
- 43.<html class="no-js" lang="ja"><htmlclass=" 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">
- 44.
- 45.// 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; } }}());
- 46.
- 47.・カスタム404ページ・Google Chrome Frameを呼び出す設定・MIMEType・URL Rewrite wwwア /ナシの統一とか） （ リ
- 48.
- 50.
- 51.テンプレートをカス イ タマ ズ
- 57.
- 58.・HTML5 Boilerplateには様々な ウハウがギッシリ ノ・次世代のマーク ッ レン ア プト ドもキャッチア プ ッ・自分の作業テンプレート ア プデートし うぜ も ッ よ ！
- 59.実装に困っ ら た ご連絡ください！
- 60.本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy