HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。

HTML5のシンプルなテンプレートのまとめ

画像: Girly Drop

※以前、当ブログで紹介したものもバージョンアップされています。

HTML5で作成する時の必要最小限のテンプレート

まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。

ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。

テンプレートはIE9や8以下への最低限の配慮がとられています。

上記の各コードについて説明した、コメント版。
※コメントは訳したもので、一部、補足を加えました。

補足:スクリプトの配置

スクリプトはページのレンダリングをブロックするため、ドキュメントの一番下、</body>の上に記述することは良い習慣です。これだけでWebページのパフォーマンスはだいぶ改善されます。

しかし、一番下に記述することは常に可能というわけではありません。例えばページのレンダリングに関するスクリプトは上に記述しておかないとページのレンダリングが遅くなります。そういった場合は可能であれば、「async」を加え並列にロードするように指定しておきます。

補足:metaタグのviewportの指定

スマフォなどの小さいサイズのスクリーン用に下記を記述します。

この指定は、ページをデバイスのビューポートの幅に合わせて、コンテンツの幅を調整します。

補足:IE9と以下のサポート

IEも最新のバージョンを使用するようにさまざまなキャンペーンを行っていますが、実際にはIE9や8以下を使用する人がまだ多くいます。HTML5の新しい要素とMedia Queriesは、html5shiv.jsとrespond.jsを加えることで問題ないでしょう。テンプレートでは信頼できる公共のCDNを利用しています。また条件付きコメントを使い、IE8以下のみロードするようにしています。

IE用にはもう一つ、次のmetaタグを加えています。

これはIEで利用できる最も互換性の高い最新のエンジンを使用するための指定です。古いIEを使用するユーザーがいなくなった時に、こういった固有のブラウザ用の記述がテンプレートから取り除かれることを望みます。

現状としては、少し余分のマークアップを加えるだけで、IE8以下でもHTML5の要素とMedia Queriesを利用できるということは、合理的な妥協点でしょう。

ナビゲーションを上部に固定配置

最近多く見かける、ナビゲーションのバーをスクロールしても上部に固定させるテンプレートです。

ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。

デモのキャプチャ

デモページ

スクロールしても、上部に固定配置されています。

デモのキャプチャ

デモページ: 少しスクロールしたところ

HTML

nav要素と「.fixed-nav-bar」が最小構成です。この中にロゴやメニューを配置します。

ナビゲーションバーに配置するコンテンツは、例えばこんな感じに。

CSS

背景画像をブラウザいっぱいに表示

背景画像をブラウザいっぱいに表示します。
デスクトップだけでなくスマフォやタブレットにも対応、しかもCSSはたった一行で記述できるので簡単便利です。

ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。

デモのキャプチャ

デモページ: 幅1,200pxで表示

デモのキャプチャ

デモページ: 幅780pxで表示

デモのキャプチャ

デモページ: 幅480pxで表示

HTML

必要最小限のHTMLで、コンテンツは自由に配置できます。

ブラウザのビューポート全体をカバーするように画像を配置するのは、bodyに背景画像として表示します。このテクニックはbodyだけでなく、div, article, form などのブロックレベル要素にも利用することができます。

CSS

背景を表示するために、bodyにスタイルシートを定義します。

「background-size: cover;」のプロパティと値の組み合わせは要素の幅と高さに対して画像を相対的に調整します。また、画像がビューポートの天地左右の中央に配置されるように「background-position: center center;」も忘れないように指定します。

一行のスタイルシートで記述

上記はすべて「background」の指定のため、ショートハンドを使って短く記述できます。

オプション:スマフォに最適化

スマフォやタブレットなどの小さいスクリーンサイズ用にはMedia Queriesを使って、より小さいサイズの画像を背景に表示することもできます。

IE8以下にも対応したい場合

IE8以下は「background-size」に対応していません。しかしIE8以下にも、いやIE6/7/8にも対応したい時は下記のスクリプトを使用すると、IE6/7/8でも利用できます。

top of page

©2018 coliss