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

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

⍫ㇱ㕏ੱ

2013年 4月19日Knock! Knock! 勉強会

１）構成ファイルを確認してみよう２）各ファイルを検証してみよう３）もっと便利にBoilerplateを使うには

※ 今日は新しいタグとか、要素とか、そういう話はないですよ

⥄Ꮖ⚫

5

ฬ�೨㧤߾ ߣ߭ߔ߾ߴ�

ᐕ�㦂㧤ਃච〝߫߆ߥߩ

�ᚲ㧤㐳ᴰ↸

⡯�ᬺ 㧤ᬺਥᄦ�ψ�৻ఽߩῳࠎ߾ߜ

� W ebో⥸ࠦޔ ࠖ࠺ ࠣࡦ ߌ⺧ਅߩ

� ᐢ๔ోࡦࠗࠩ࠺⥸

1/20

W ebࠩ࠺ ࠗ࠽ω

W eb/DTPࠩ࠺ 㓸✬ߩࡄࡍࡈޔࠗ࠽ω

W eb࠺ ࠢࠖ ࠣࡦ࠾ࡦࡊ�࠲ ༡ᬺω

Wߩࠬࡦࡈ eb⠪S2࠽ࡦࡊ

1/20

Knock! Knock! ～静岡のWeb制作者のための勉強会～

ߔ߹ߒ㗿߅ߊߒࠈࠃ

1/20

１）構成ファイルを確認してみよう

h5bp-html5-boilerplate-v4.2.0-0-g0adda79.zip

隠しファイル

cssフォルダ / imgフォルダ / jsフォルダ /apple-touch-icon群 / favicon.ico /index.html / 404.html / crossdmain.xml / humans.txt / robot.txt /.htaccess

docsフォルダ / LICENSE.md / README.md / CHANGELOG.md

テンプレートファイル

ドキュメントファイル

cssフォルダ / imgフォルダ / jsフォルダ /apple-touch-icon群 / favicon.ico /index.html / 404.html / crossdmain.xml / humans.txt / robot.txt /.htaccess

docsフォルダ / LICENSE.md / README.md / CHANGELOG.md

２）各ファイルを検証してみよう

２-１） index.html

<!DOCTYPE html> <html class="no-js"> <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">



<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>

<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>

<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>

<!DOCTYPE html> <html class="no-js"> <head>

IEの条件分岐コメント × html要素

CSSハックやIE専用CSSファイルに換わる手法IEのバージョンによって、html要素のクラス属性を変更

例） IE7の場合 → <html class="no-js lt-ie9 lt-ie8">

JavaScriptの記述はbody要素の閉じタグ直前

表示速度の最適化 → JSの読込中はHTMLレンダリングがストップ（少しでも早くレンダリングした方がユーザーの待たされている感が少ない）

→ jQueryでは、ページの読み込みが終わってから処理を開始するパターンが多い。それなら、HTMLの最後でも問題ないよね（HTMLの読み込み = DOMの構築を待ってから処理を始めるため）

CDNの読み込みとフォールバック

CDNの読み込みは、プロトコル（http / https）を省略 → htmlファイルに合ったプロトコルを自動的に選択ただし、配布元のSSL対応には注意

CDNに接続できない場合のフォールバック → 接続できない場合のみ、ローカルのファイルを参照（表示速度向上のため、有名ライブラリのキャッシュファイルを効率的に使う）

２-２-１） normalize.css

Normalize.css ?

http://www.yomotsu.net/blog/2013/02/23/normalize.html

表示をゼロにしない (sup や sub を使えば上付き、下付きになるし、ul は箇条書きになる)

バグ補正 ( pre 要素における font-size、IE9 における SVG の overflow の挙動など)

CSS 解析時に、必要以上のゴミとなるコードを作らない (リセット系 CSS は結果的にゴミとなる margin:0 などが大量に挿入される)

必要に応じて不要箇所を削除しても OK ( Nomalize.css は適切にコメントで区切られていて、不要箇所は削除が簡単)

normalize.css か reset.css か

好きなヤツを使えばいいじゃん…

２-２-２） main.css

画像置換

.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; /* IE 6/7 fallback */}.ir:before { content: ""; display: block; width: 0; height: 150%;}

<h1 class="logo ir"> 静岡のWeb系勉強会/セミナー Knock! Knock!</h1>

.logo { width: 220px; height: 160px; background: url(/img/logo.png) no-repeat;}

数種類の非表示処理

/* * Hide from both screenreaders and browsers */

.hidden { display: none !important; visibility: hidden;}

ヴィジュアル上もスクリーンリーダーでも消える

/* 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;}

スクリーンリーダーでは読み上げヴィジュアル上では消える

/* Hide visually and from screenreaders, but maintain layout */

.invisible { visibility: hidden;}

ヴィジュアル/スクリーンリーダーからは消えるレイアウト上は残る

簡素化されていくclearfix

.clearfix:before, .clearfix:after { content: " "; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1; /* For IE 6/7 only */}

サンプルMedia Queries

@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */}

@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 */}

min-widthの単位はem

（モバイルファーストな基本スタイルを上書きする） These examples override the primary ('mobile !rst') styles.

２-３-１） Modernizer.js

Modernizer.js ?

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

http://modernizr.com/

ModernizrはHTML5とユーザーのブラウザにCSS3の機能を検出するJavaScriptライブラリです。（Google 翻訳）

２-３-１） plugin.js

// 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', '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; } }}());

consoleに対応していないブラウザでもエラー表示を出さないようにする

２-４） .htaccess

・カスタム404ページ・ Google Chrome Frameを呼び出す設定・ MIME Type・ URL Rewrite（wwwアリ/ナシの統一とか）

３）もっと便利にBoilerplateを使うには

基本テンプレートを選択

テンプレートをカスタマイズ

まとめ

・ HTML5 Boilerplateには様な々ノウハウがギッシリ

・次世代のマークアップトレンドもキャッチアップ・自分の作業テンプレートもアップデートしようぜ！

実装に困ったらご連絡ください！

本日はありがとうございました

ご連絡・ご質問など下記までお願いしますE-mail : [email protected] / Twitter : yabecchy

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

Technology