HTMLを勉強しているときに見つけたHTML5のテンプレートです。HTML5とは現在のWeb制作で標準となっているHTMLのバージョンです。私と同じようなHTML初心者はテンプレートの中身を知るだけでも勉強になると思います。今回がQiitaの初投稿です。HTMLの初心者なので上級者の方々にはつまらない内容だと思いますが、それでもよければお付き合いください。ブログに投稿した内容とほぼ同じです。
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>タイトル</title>
<meta name="description" content="説明文">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- アイコンのファイルはルートディレクトに配置 -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 9]>
<p class="browserupgrade">IE9未満用のメッセージ</p>
<![endif]-->
<!-- ここにコンテンツ -->
<p>コンテンツ</p>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: UA-XXXXX-YをあなたのIDに変更 -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
ぱっと見ではなにをやっているのか全くわからず拒絶反応が出そうですね。41行もありますが、のんびりとコーヒーでも飲みながら私と一緒に1行ずつ紐解いていくことで謎の英数字アレルギーから卒業しましょう。
1行目
<!doctype html>
<!doctype html>はHTML文書の宣言です。以下の文章はHTML5で記述されていますという宣言をしています。
2行目
<html class="no-js" lang="ja">
HTML文書は<html>タグから始まるので、この行からスタートします。class="no-js"はJavaScriptがOFFのときの動作を操作するための記述です。lang=jaは日本語準拠という意味です。
3行目
<head>
<head>タグです。この文書に関する情報を表すタグです。<head>タグはここからスタートします。
4行目
<meta charset="utf-8">
meta要素の指定です。文字コードはutf-8ですと宣言しています。
5行目
<meta http-equiv="x-ua-compatible" content="ie=edge">
またmeta要素です。http-equivも要素です。http-equivはブラウザに対して状態や挙動を指示することができます。例えば<http-equiv="refresh" content="10; url=http://www.google.co.jp">こう書いて10秒後にGoogleにジャンプするというような動作は一度は見たことがありますね。私はあまり好きではありません。で、x-ua-compatibleはなにかというと互換モードで描画（以下レンダリング）させない処置です。
InternetExplorer（以下IE）はバージョンによってレンダリングが異なります。例えば制作者が新しい技術を利用して華やかなサイトを作っても、古いIEだと新しいレンダリングに対応できないため制作差は古いIEに対応した方法でサイトを作るしかありません。仮にユーザーが新しいIEをインストールしていても互換モードというボタンを押すことで古いIEに対応したページが表示されてしまいます。ユーザーが間違えて互換モードに切り替えてしまうことを防ぐためにx-ua-compatibleを指定するというわけです。ie=edgeはインストールされているIEの最新バージョンの標準モードでレンダリングするという意味です。
<meta http-equiv="x-ua-compatible" content="ie=edge">は外部JSやCSSの前に指定しないと上書きされてしまうので注意です。
6行目
<title>タイトル</title>
titleはそのページのタイトルを指定します。この記事だと「HTML初心者のためのHTML5のテンプレートとその解説」がそれにあたります。
7行目
<meta name="description" content="説明文">
またまたmeta要素です。name="description"はページの簡単な説明です。Googleの検索結果に表示されることもあります。content="説明文"に具体的な説明文を書きます。
8行目
<meta name="viewport" content="width=device-width, initial-scale=1">
おなじみのmeta要素です。name=viewportは表示領域の指定です。おもにスマホに対応させるために使うことが多いです。いわゆるレスポンシブルデザインですね。content="width=device-width, initial-scale=1"は表示領域の幅を端末の等倍に合わせるという意味です。
10行目
<link rel="apple-touch-icon" href="apple-touch-icon.png">
link rel="apple-touch-icon"はスマホのホーム画面にショートカットアイコンを表示させることができます。オリジナルの画像を用意しておけば表示させることもでき、href="apple-touch-icon.png"はそのURLです。Appleという名前ですがAndroidでも利用可能です。
11行目
<!-- アイコンのファイルはルートディレクトに配置 -->
ルートディレクトリというのは階層の一番上にあるディレクトリのことです。
13行目
<link rel="stylesheet" href="css/normalize.css">
link rel="stylesheet"はスタイルシートを利用するという宣言です。href="css/normalize.css"はそのCSSファイルのURLです。この場合はCSSフォルダのなかにあるnormalize.cssというファイルを指定しています。このnormalize.cssというのは世の中にあるいろいろな種類のブラウザでできる限り同じように表示させるための慣例的な名前です。
14行目
<link rel="stylesheet" href="css/main.css">
13行目と同じですが、こちらで2つ目のcssを指定しています。このことからもわかるようにcssはは複数指定することができ状況により使い分けることが可能です。
15行目
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
cssと同じで今回はJavaScriptファイルを指定しています。cssとJavaScriptでは少しだけ指定の記述が違うところに注意してください。
16行目
</head>
headタグの終了位置です。htmlは基本的に<xxx>で始まり</xxx>で終わるタグと呼ばれる要素で構成されています。
1/3が終了
ここまでで約1/3が終わりました。最初はただの英数字の羅列に見えていたものが振り返ってみると意味のあるものに見えてきませんか？ここから先は長いように見えて大きな要素がいくつか書かれているだけなので比較的楽ですよ。さあ、またのんびりと読み進めてみましょう。
17行目
<body>
bodyタグの開始です。ここからサイトに表示されるコンテンツを書いていきます。
18行目
<!--[if lt IE 9]>
<!>はコメントアウトです。この行は実際には表示されない仕組みになっています。メモ代わりに使うのが一般的です。
19行目
<p class="browserupgrade">IE9未満用のメッセージ</p>
<p>タグです。「段落」という意味のパラグラフの頭文字です。pタグの前後の行は空行になると覚えてください。<class="browserupgrade"はclassという属性でCSSで装飾するときに使います。ここで任意の名前をつけておいてCSSファイルで「browserupgradeという名前のclassの文字色を赤にする」というような使い方ができます。便利ですね。
20行目
<![endif]-->
これもコメントアウトです。
23行目
<p>コンテンツ</p>
これもpタグですね。
25~28行目
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
これはjQueryという技術のファイルを読み込んで使用する内容になっています。jQueryとはJavaScriptを簡単に書ける技術だと覚えてください。そのjQueryをCDNという配信方法でファイルを利用するのですがCDNで読み込めなかった場合にはあらかじめ用意しておいたファイルを使いますよという内容です。CDNとは簡単にいうとユーザーから近いサーバーを利用してファイルを配信する仕組みです。
31~39行目
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
Google Analyticsです。これはアクセスしてきたユーザーの情報を解析してサイトの運用に役立てるための仕組みだと覚えてください。
40行目
</body>
bodyタグの終了です。
41行目
</html>
htmlタグの終了です。
最後にもう一度眺めてみましょう
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>タイトル</title>
<meta name="description" content="説明文">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- アイコンのファイルはルートディレクトに配置 -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 9]>
<p class="browserupgrade">IE9未満用のメッセージ</p>
<![endif]-->
<!-- ここにコンテンツ -->
<p>コンテンツ</p>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: UA-XXXXX-YをあなたのIDに変更 -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
あとがき
いかがでしたか？これはいわゆるテンプレートなので実際にはいろいろなコンテンツを書いていくことになりますが1行ずつ紐解くと、さほど難しくはないと感じませんか？HTMLは私も勉強を始めたばかりです。これからも一緒に少しずつ紐解きながらHTMLを利用できるようになりましょう。
もし間違いがあれば指摘していただけると勉強になります。