「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」から考える、これからのマークアップ

More Related Content

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