HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
Post on:2015年10月26日
sponsors
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。
画像: Girly Drop
※以前、当ブログで紹介したものもバージョンアップされています。
HTML5で作成する時の必要最小限のテンプレート
まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。
ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
テンプレートはIE9や8以下への最低限の配慮がとられています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="shortcut icon" href=""> </head> <body> <!-- コンテンツを配置 --> <!-- SCRIPTS --> <!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> </body> </html> |
上記の各コードについて説明した、コメント版。
※コメントは訳したもので、一部、補足を加えました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <!-- 互換性とアクセシビリティのために<html>タグの「lang=""」属性をセット。 HTMLタグのほかの属性については下記ページを参考に。 参考: http://www.w3.org/TR/html-markup/global-attributes.html --> <html> <head> <!-- IE8+に対して「IE=edge」と指定することで、 利用できる最も互換性の高い最新のエンジンを使用するよう指示できます。 参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- パフォーマンスのために使用する文字のエンコーディングを記述。 最初のオプションとしてHTTPヘッダで指定し、 HTTPヘッダとmetaタグでの指定が同じであることを確認。 参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly --> <meta charset="utf-8"> <!-- ページのタイトルを記述 --> <title></title> <!-- Scontent属性にページの紹介文を記述 --> <meta name="description" content=""> <!-- content属性にページの著者情報を記述 --> <meta name="author" content=""> <!-- モバイル端末への対応、 ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降） ズームを許可しない設定「user-scalable=no」は加えない --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- スタイルシートはできるだけ早くレンダリングされるため、 HTMLドキュメントの上の方に記述 href属性にスタイルシートファイルのURIを記述 --> <link rel="stylesheet" href=""> <!-- IE8以下用に2つのスクリプトを記述 html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる respond.js: IE8以下にMedia Queriesの代替え機能を提供 --> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- href属性にファビコンファイルのURIを記述 --> <link rel="shortcut icon" href=""> <!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 --> <!-- <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="196x196" href=""> <link rel="apple-touch-icon" sizes="152x152" href=""> --> <!-- スクリプトでブロッキングを起こさないものはここに記述 可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用 例: <script src="" async></script> --> </head> <body> <!-- コンテンツを配置 --> <!-- スクリプトでブロッキングを起こすものはここに記述 ブロッキングを起こす原因としては、 CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど --> <!-- SCRIPTS --> <!-- 例: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> </body> </html> |
補足：スクリプトの配置
スクリプトはページのレンダリングをブロックするため、ドキュメントの一番下、</body>の上に記述することは良い習慣です。これだけでWebページのパフォーマンスはだいぶ改善されます。
しかし、一番下に記述することは常に可能というわけではありません。例えばページのレンダリングに関するスクリプトは上に記述しておかないとページのレンダリングが遅くなります。そういった場合は可能であれば、「async」を加え並列にロードするように指定しておきます。
|
1 |
<script src="my-script.js" async></script> |
補足：metaタグのviewportの指定
スマフォなどの小さいサイズのスクリーン用に下記を記述します。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
この指定は、ページをデバイスのビューポートの幅に合わせて、コンテンツの幅を調整します。
補足：IE9と以下のサポート
IEも最新のバージョンを使用するようにさまざまなキャンペーンを行っていますが、実際にはIE9や8以下を使用する人がまだ多くいます。HTML5の新しい要素とMedia Queriesは、html5shiv.jsとrespond.jsを加えることで問題ないでしょう。テンプレートでは信頼できる公共のCDNを利用しています。また条件付きコメントを使い、IE8以下のみロードするようにしています。
IE用にはもう一つ、次のmetaタグを加えています。
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
これはIEで利用できる最も互換性の高い最新のエンジンを使用するための指定です。古いIEを使用するユーザーがいなくなった時に、こういった固有のブラウザ用の記述がテンプレートから取り除かれることを望みます。
現状としては、少し余分のマークアップを加えるだけで、IE8以下でもHTML5の要素とMedia Queriesを利用できるということは、合理的な妥協点でしょう。
ナビゲーションを上部に固定配置
最近多く見かける、ナビゲーションのバーをスクロールしても上部に固定させるテンプレートです。
ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
スクロールしても、上部に固定配置されています。
デモページ: 少しスクロールしたところ
HTML
nav要素と「.fixed-nav-bar」が最小構成です。この中にロゴやメニューを配置します。
|
1 2 3 |
<nav class="fixed-nav-bar"> <!-- ナビゲーションバーに配置するコンテンツ --> </nav> |
ナビゲーションバーに配置するコンテンツは、例えばこんな感じに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<nav class="fixed-nav-bar"> <div id="menu" class="menu"> <a class="sitename" href="fixed-navigation-bar.html">Fixed Nav Bar</a> <!-- Example responsive navigation menu --> <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a> <ul class="menu-items"> <li><a href="//sixrevisions.com">Home</a></li> <li><a href="//sixrevisions.com/about/">About</a></li> <li><a href="//sixrevisions.com/contact/">Contact</a></li> <li><a href="//twitter.com/sixrevisions">Twitter</a></li> <li><a href="//www.facebook.com/sixrevisions">Facebook</a></li> </ul> </div> </nav> |
CSS
|
1 2 3 4 5 6 7 8 9 |
.fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; background-color: #00a087; } |
背景画像をブラウザいっぱいに表示
背景画像をブラウザいっぱいに表示します。
デスクトップだけでなくスマフォやタブレットにも対応、しかもCSSはたった一行で記述できるので簡単便利です。
ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
デモページ: 幅1,200pxで表示
デモページ: 幅780pxで表示
デモページ: 幅480pxで表示
HTML
必要最小限のHTMLで、コンテンツは自由に配置できます。
|
1 2 3 4 5 6 |
<!doctype html> <html> <body> <!-- コンテンツを配置 --> </body> </html> |
ブラウザのビューポート全体をカバーするように画像を配置するのは、bodyに背景画像として表示します。このテクニックはbodyだけでなく、div, article, form などのブロックレベル要素にも利用することができます。
CSS
背景を表示するために、bodyにスタイルシートを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { /* 画像ファイルの指定 */ background-image: url(images/background-photo.jpg); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } |
「background-size: cover;」のプロパティと値の組み合わせは要素の幅と高さに対して画像を相対的に調整します。また、画像がビューポートの天地左右の中央に配置されるように「background-position: center center;」も忘れないように指定します。
一行のスタイルシートで記述
上記はすべて「background」の指定のため、ショートハンドを使って短く記述できます。
|
1 2 3 |
body { background: url(background-photo.jpg) center center / cover no-repeat fixed; } |
オプション：スマフォに最適化
スマフォやタブレットなどの小さいスクリーンサイズ用にはMedia Queriesを使って、より小さいサイズの画像を背景に表示することもできます。
|
1 2 3 4 5 |
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); } } |
IE8以下にも対応したい場合
IE8以下は「background-size」に対応していません。しかしIE8以下にも、いやIE6/7/8にも対応したい時は下記のスクリプトを使用すると、IE6/7/8でも利用できます。
sponsors
