HTML5 Boilerplate を読む
HTML5 Boilerplate v8.0.0 を参考に必要最小限となる HTML で何が行われているか行単位に分解していきたいと思います。
テンプレートに用意された要素を紐解く
HTML5 Boilerplate の index.html だけを抜き出すと次のように用意されています。
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="js/app.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
上記 index.html を順に紐解いていきたいと思います。
1行目
<!doctype html> は、必須となる宣言で HTML5 で記述されていますという事を示しています。
<!doctype html>
2行目
HTML 文書におけるルート要素 （最初の要素） になります。 class="no-js" は、29行目にある modernizr.js が動作する環境で JavaScript が有効であるかを判断し、有効である場合は no-js から js に書き換えられます。これを利用して動作を指定するための記述となります。 lang 属性は、その文書の言語を指定することが推奨されており lang="ja" とすることで日本語であることを示しています。
<html class="no-js" lang="ja">
例えば、 class="no-js" と指定しておき動作環境の JavaScript が有効であった場合、 modernizr.js の機能でクラスに指定した no-js が js に置き換わるので id に js-block と指定されたブロックは非表示になります。
.js #js-block{
display:none;
}
4行目
head 要素は、html 要素の最初の子要素としてひとつだけ使用することができる文書のメタデータのあつまりを表します。
<head>
5行目
meta 要素の charset 属性はそのページで使用している文字エンコーディングを指定します。次の例では、「文字コードは utf-8 です。」と宣言しています。
<meta charset="utf-8">
6行目
title 要素は、メタデータの1つでそのページの題名を指定します。
<title></title>
7行目
meta 要素の name 属性は、そのメタデータが何を表すものかを指定します。name 属性に description が指定されているので、そのメタデータがぺージの説明であることを示しています。 content 属性に具体的な説明文を書きます。
<meta name="description" content="">
8行目
meta 要素の name 属性に viewport が指定されているので、そのメタデータは表示領域を示しています。content 属性に指定された width=device-width は、閲覧している画面サイズに合わせてサイズ変更するという意味になり、 initial-scale=1 は、そのページが表示されたときの初期倍率を指定しています。
viewport のイメージは、 width=370 と指定すると幅 370 の仮想的な表示エリアが用意され実際に表示されるとき端末の画面サイズに応じてレンダリング結果を拡縮してくれる感じです。 width=device-width と指定すると表示する端末の画面サイズやブラウザアプリに応じて幅が変化することになります。
<meta name="viewport" content="width=device-width, initial-scale=1">
10行目～13行目
meta 要素の property 属性は、 HTML Living Standard では定義されていないようですが、 OGP ( Open Graph Protocol ) などで使用されます。
では、 OGP とは 何か?ということになるのですが、 Open Graph Protocol と呼ばれるもので、 Twitter, Facebook, Line, mixi などがサポートしており記事などがシェアされた時、設定したページのタイトルやイメージ画像、詳細などを伝えるための仕組みに使われます。
この content 属性にタイトルを指定することで、フィード上もしくはタイムライン上に表示されるシェアのタイトルを指定することになります。
<meta property="og:title" content="">
この HTML5 Boilerplate には、 OGP の prefix="og: http://ogp.me/ns#" が見当たらなかったので少し調べてみましたが、 Twitter のドキュメントに次のような記載がありました。
Open Graphはを介して“og” RDFa Core 1.1 CURIEプレフィックスマッピングを指定することを推奨していますが、Twitterカードや、HTMLメタ要素のname属性のtwitter:プレフィックスでの使用には、そのようなマークアップは必要ありません。
11行目の og:type は、 SNS 上でシェアされる Web ページの種類を指定します。
例えば、サイトのトップページの場合は「content="website"」と記述し、記事ページなどは「content="article"」を指定します。
<meta property="og:type" content="">
12行目の og:url は、 Web ページの URL を指定します。 URL は相対パスではなく絶対パスで指定する必要があります。
<meta property="og:url" content="">
13行目の og:image は、 SNS 上でシェアされた際に表示する画像を指定します。 1200 x 630 位のサイズが推奨されているのを見かけます。
<meta property="og:image" content="">
14行目
link 要素は、外部リソースへのリンク指定に使用します。rel 属性は、そのページとの関係を示しここでの例は外部リンクされているファイルがウェブアプリマニフェストであるということになります。
ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) というウェブ技術の一部でアプリストアを通さずに端末のホーム画面にインストールするための定義になります。PWA のマニフェストには、その名前・作者・アイコンなどが JSON 形式で設定されます。
<link rel="manifest" href="site.webmanifest">
15行目
apple-touch-icon は、 iPhone や iPad の safari ・ Android 等で Web サイトをホーム画面に追加した時に表示されるアイコンを指定します。
<link rel="apple-touch-icon" href="icon.png">
16行目
コメント行になります。ここでは、ルートディレクトリに favicon.ico というアイコンファイルを配置することでファビコンとして認識されます。
ファビコンは、 Web ブラウザでサイトを開いた時にタブに表示されるアイコンになります。
<!-- Place favicon.ico in the root directory -->
19～20行目
stylesheet は、スタイルシートを利用します。 normalize.css は、ブラウザによる違いを減らし可能な限り整えてくれます。次の行の style.css は、このサイトのスタイルが定義されたものになります。
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
22行目
メタデータの theme-color は、 Web ページやユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する色を指定します。
例えば、ブラウザーのヘッダー部分がこのタグで指定された色になります。
<meta name="theme-color" content="#fafafa">
23行目
head 要素の終了タグになります。
</head>
25行目
body 要素は文書の内容を示す要素で、ひとつだけ使用することができます。
<body>
27行目
コメントになります。 body 要素内にサイトまたはアプリケーションコンテンツを追加するよう書かれています。
<!-- Add your site or application content here -->
28行目
p 要素は、テキストの段落を示します。
<p>Hello world! This is HTML5 Boilerplate.</p>
29行目
script 要素は、スクリプトのコードを指定します。外部ファイルとして用意した JavaScript を src 属性で読み込んで実行します。
ここで指定されている modernizr は、利用しているブラウザーで使用可能な機能を検出する JavaScript ライブラリです。 {{MODERNIZR_VERSION}} の部分は、 gulp で指定されたバージョン番号に置き換えられます。
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
30行目
このサイトの JavaScript を読み込みます。
<script src="js/app.js"></script>
32～37行目
Google Analytics を使用するための設定になります。UA-XXXXX-Y の部分を取得したサイト ID に置き換えて使用します。
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
38行目
body 要素の終了タグになります。
</body>
40行目
html 要素の終了タグになります。
</html>