HTML5の書き方（第3回）～テンプレート紹介～

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は、HTML5で新しく追加された要素の一部を簡単にご紹介いたしました。

HTML5を手軽に使ってみるには、デザインやレイアウトが完成された「テンプレート」を利用すると便利です。

今回は、たくさんのテンプレートを公開しているテンプレート配布サイトをご紹介いたします。

◆Template Portfolio – Free HTML5 Templates

上記は、「Free HTML5 Templates」というウェブサイトで配布されているテンプレートの一覧ページです。

ここで公開されている200種類を越えるテンプレートは、すべてHTML5で作られています。

英語サイトではありますが、以下の手順で簡単に利用できますので、ぜひ試してみてください。

１．テンプレートを探す

このページには、小さなサムネイル画像が並んでいますので、興味があるものを見つけたら画像をクリックしてみてください。
少し大きなサイズで確認ができます。

気に入ったテンプレートが見つかったら、サムネイル画像の下にある「more info」というリンクをクリックしてください。

すると、そのテンプレートの配布ページに移動できます。

２．テンプレートの詳細を見る

それぞれのテンプレートの配布ページでは、ページを下方向にスクロールすると、「View Demo」と「Download Here」という２つのボタンが見えます。

「View Demo」をクリックすると、そのテンプレートを使ったサンプルページが表示されます。自分の望むデザインになっているかどうかを確認してみてください。

このサンプルは、画像で表示されているわけではなく、テンプレートのHTMLが実際に使われています。

そのため、ブラウザ上での表示を確認できるほか、ソースを表示させて、実際の記述内容を確認することもできます。

３．テンプレートをダウンロードする

「Download Here」をクリックすると、テンプレートの構成ファイル一式をダウンロードできます。

ZIP形式で圧縮されていますから、ダウンロード後に展開してください。

テンプレート一式には、HTMLファイルとCSSファイルが含まれています。さらに、画像ファイルやJavaScriptファイル等が含まれているものもあります。

テンプレートによっては、ウェブ上にアップロードしないと、うまく表示確認ができないものもあります。

もし、サンプル通りに表示されない場合には、一旦、ウェブサーバ上にアップロードしてみてください。

また、readme.pdf や lisence.txt などの名称のファイルには、説明書きやライセンス情報が書かれています。（それらがないテンプレートもあります）

◆テンプレートを利用する際の注意

このテンプレート配布サイトで公開されているテンプレートのライセンスは、

「Creative Commons Attribution (by) 3.0」として提供されています。

これは、

・原著作者のクレジットを表示する必要がある。

・商用利用しても良い。

などの意味になります。詳しくはこちらのページをご参照ください。

これらのテンプレートを使うときには、ページのどこかに原著作者のクレジットを表示する必要があります。

例えば、以下のようなリンクを含めておくと良いでしょう。

<a href=”http://freehtml5templates.com/”>Free HTML5 Templates</a>

さて、3回にわたって、HTML5の書き方とHTML5のテンプレートを簡単にご紹介いたしました。ぜひ、HTML5を活用してみてください。

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス（ツール）は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧