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

「HTML5 Boilerplate」から考える、
これからのマークッアプ 2013年 4月19日
Knock! Knock! 勉強会

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

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

W eb

W eb/DTP

W eb

W eb S

1/20

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

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

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

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

<!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 ?
表示をゼロにしない
(sup や sub を使えば上付き、下付きになるし、は箇条書きになる)
ul

バグ補正
( pre 要素における font-size、 9 における SVG の overﬂow の挙動など)
IE

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

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

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

normalize.css か reset.css か

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

.ir { background-color: transparent;
border: 0;
overﬂow: 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;
overﬂow: 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 */
}

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

Modernizer.js ?

Modernizr is a JavaScript library that
detects HTML5 and CSS3 features in
the user’ browser.
s
http://modernizr.com/

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

// 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', 'proﬁle', 'proﬁleEnd', '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;
}
}
}());

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

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

基本テンプレートを選択

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

・HTML5 Boilerplateには様々なウハウがギッシリ
ノ
・次世代のマークッレン
アプトドもキャッチアプ
ッ
・自分の作業テンプレートアプデートしうぜ
もッよ！

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

本日はあがとございま
りうした
ご連絡・ご質問など下記までお願いします
E-mail : info@hamnaly.com
Facebook / Twitter : yabecchy

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to 「html5 boilerplate」から考える、これからのマークアップ (20)

More from Yasuhito Yabe

More from Yasuhito Yabe (17)

Recently uploaded

Recently uploaded (10)

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