HTML5 ホームページテンプレート使用法
HTML5ホームページテンプレートは、<aside>タグや<article>タグを
使用していますが、これらのタグを使用しなくでも使うことができます。
<aside>タグや<article>タグは、コンテンツの内容によって使い分けてください。
使用したいHTML5ホームページテンプレートを、ホームページテンプレート一覧からダウンロードします。
ダウンロードした、( zip ) ファイルを解凍します。
中にある（ index.html ）ファイルがトップページになります。
メモ帳などのテキストエディタで開くと以下のようになっています。
色のついた部分を編集します。
※HTML5ホームページテンプレートは、文字コードUTF-8を使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=950">
<link rel="stylesheet" type="text/css" href="style.css">
<title>タイトル</title>
<meta name="Keywords" content="キーワード１,キーワード２,キーワード３">
<meta name="Description" content="サイトの説明">
</head>
<body>
<!-- body▼ -->
<div id="body">
<!-- header▼ -->
<div id="header">
<header>
<h1 id="top"><a href="index.html">SITE NAME</a></h1>
</header>
</div>
<!-- header▲ -->
<!-- メニュー▼ -->
<div id="menu">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ２</a>
<ul class="sbm">
<li><a href="page2.html">ページ ２-１</a></li>
<li><a href="page2.html">ページ ２-２</a></li>
<li><a href="page2.html">ページ ２-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ３</a>
<ul class="sbm">
<li><a href="page2.html">ページ ３-１</a></li>
<li><a href="page2.html">ページ ３-２</a></li>
<li><a href="page2.html">ページ ３-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ４</a>
<ul class="sbm">
<li><a href="page2.html">ページ ４-１</a></li>
<li><a href="page2.html">ページ ４-２</a></li>
<li><a href="page2.html">ページ ４-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ５</a>
<ul class="sbm">
<li><a href="page2.html">ページ ５-１</a></li>
<li><a href="page2.html">ページ ５-２</a></li>
<li><a href="page2.html">ページ ５-３</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- メニュー▲ -->
<!-- left▼ -->
<div id="left">
<section>
<!-- サブメニュー▼ -->
<nav>
<h4>MENU</h4>
<ul id="menu2">
<li><a href="index.html">メニュー １</a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー ２</a>
<ul class="sbm2">
<li><a href="page2.html">メニュー ２-１</a></li>
<li><a href="page2.html">メニュー ２-２</a></li>
<li><a href="page2.html">メニュー ２-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー ３</a>
<ul class="sbm2">
<li><a href="page2.html">メニュー ３-１</a></li>
<li><a href="page2.html">メニュー ３-２</a></li>
<li><a href="page2.html">メニュー ３-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー ４</a>
<ul class="sbm2">
<li><a href="page2.html">メニュー ４-１</a></li>
<li><a href="page2.html">メニュー ４-２</a></li>
<li><a href="page2.html">メニュー ４-３</a></li>
</ul>
</li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー ５</a>
<ul class="sbm2">
<li><a href="page2.html">メニュー ５-１</a></li>
<li><a href="page2.html">メニュー ５-２</a></li>
<li><a href="page2.html">メニュー ５-３</a></li>
</ul>
</li>
</ul>
</nav>
<!-- サブメニュー▲ -->
<!-- leftコンテンツ▼ -->
<!-- サイドボックス▼ -->
<aside>
<div class="box_head">サイドボックス</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
</aside>
<!-- サイドボックス▲ -->
<aside>
<h4>見出し</h4>
<p>
ここにテキスト
</p>
</aside>
<aside>
<h5>見出し</h5>
<p>
ここにテキスト
</p>
</aside>
<!-- leftコンテンツ▲ -->
</section>
</div>
<!-- left▲ -->
<!-- main▼ -->
<div id="main">
<section>
<!-- メインコンテンツ▼ -->
<article>
<h2>見出し</h2>
<p>
ここにテキスト
</p>
<div class="up"><a href="#top">Page Top ▲</a></div>
</article>
<article>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
<div class="up"><a href="#top">Page Top ▲</a></div>
</article>
<!-- メインコンテンツ▲ -->
</section>
</div>
<!-- main▲ -->
<!-- footer▼ -->
<footer>
<div id="footer">
<br><br><br>
Copyright (C) <a href="index.html">サイト名</a> All Rights Reserved.
</div>
<div id="copy">
<!--削除しないでください-->
<p><a href="http://homepagetemplate.web.fc2.com/" target="_blank" title="ホームページ テンプレート フリー H.P.T.F">ホームページ テンプレート フリー</a></p><p>Design by</p>
</div>
</footer>
<!-- footer▲ -->
</div>
<!-- body▲ -->
</body>
</html>
ホームページにタイトルをつけます。タイトルは、ブラウザのタイトルバーに表示されたり、お気に入りや、検索エンジンの検索結果として表示されます。
<title>タイトル</title>
このページに関連するキーワードをつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
（ , ）で区切って複数記述することが出来ます。
記述しない場合は以下のタグを削除します。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３">
このページの概要をつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
記述しない場合は以下のタグを削除します。
<meta name="description" content="サイトの説明">
サイト名やキーワードを入れます。ロゴ画像を使うことも出来ます。
記述しない場合は以下のタグを削除します。
<h1><a href="index.html">SITE NAME</a></h1>
ロゴ画像を使用して、トップページにリンクする場合
<h1><a href="index.html"><img src="image/ロゴ画像" width="ロゴ横幅" height="ロゴ高さ" alt="サイト名"></a></h1>
作成するページの数だけメニューを作ります。
ページを増やす場合は、（ page2.html ）などを複製して（ page3.html page4.html... ）増やします。
プルダウンメニューを増やす時は以下の部分を、メニュー部に追加します。
※スマートフォンでプルダウンメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、プルダウンメニューを使う箇所は、一番上のリンクは空にします。
<li><a href="index.html"></a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ２</a> 一番上のリンクは空にします
<ul class="sbm">
<li><a href="page2.html">ページ 2-1</a></li>
<li><a href="page3.html">ページ 2-2</a></li>
<li><a href="page4.html">ページ 2-3</a></li>
</ul>
</li>
プルダウンメニューを使わない時は以下の部分を削除して
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ２</a>
<ul class="sbm">
<li><a href="page3.html">ページ 2-1</a></li>
<li><a href="page4.html">ページ 2-2</a></li>
<li><a href="page5.html">ページ 2-3</a></li>
</ul>
</li>
これに入れ替えます。
<li><a href="page2.html">ページ ２</a></li>
メニューの横幅を変えたいときは、スタイルシートを変更します。
HTML5 ホームページテンプレート スタイルシートカスタマイズに、変更方法があります。
メインメニューだけでは足りない時や、ページ内リンクに使います。
必要のない場合は削除できます。
※HTML5ホームページテンプレート１面タイプには、サブメニューはありません。
ツリーメニューを増やす時は以下の部分を、サブメニューに追加します。
※スマートフォンでツリーメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、ツリーメニューを使う箇所は、一番上のリンクは空にします。
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー 2</a> 一番上のリンクは空にします
<ul class="sbm2">
<li><a href="page2.html">メニュー 2-1</a></li>
<li><a href="page3.html">メニュー 2-2</a></li>
<li><a href="page4.html">メニュー 2-3</a></li>
</ul>
</li>
ツリーメニューを使わない時は以下の部分を削除して
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー 2</a>
<ul class="sbm2">
<li><a href="page3.html">メニュー 2-1</a></li>
<li><a href="page4.html">メニュー 2-2</a></li>
<li><a href="page5.html">メニュー 2-3</a></li>
</ul>
</li>
これに入れ替えます。
<li><a href="page2.html">メニュー ２</a></li>
サイドバーにサイドボックスを使います。
必要ない時は以下のタグを削除します。
※ホームページテンプレート１面タイプには、サイドボックスはありません。
<aside>
<div class="box_head">ここにテキスト</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
</aside>
<div class="box_head"></div>内の文字はセンタリングされます。
サイドバーに見出しを使う場合は、<h4></h4>タグや、<h5></h5>タグを使います。
見出しは、<p></p>タグの外で使います。
<aside>
<h4>見出し</h4>
<p>
ここにテキスト
</p>
</aside>
<aside>
<h5>見出し</h5>
<p>
ここにテキスト
</p>
</aside>
改行は<p></p>タグでくくり直すか、<br>タグを使います。
ホームページ作成 HTML5に、タグについての説明があります。
<h4>見出しは、センタリング文字
<h5>見出し
文章を書くには、文章を<p></p>タグで囲みます。
見出しを使う場合は、<h2></h2>タグや、<h3></h3>タグを使います。
見出しは、<p></p>タグの外で使います。
<h2>見出しは、文字がセンタリングされます
<h3>見出し
<!-- メインテキスト▼ -->
<article>
<h2>見出し</h2>
<p>
ここにテキスト
</p>
</article>
<article>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
</article>
<div class="up"><a href="#top">Page Top ▲</a></div>
<!-- メインテキスト▲ -->
改行は<p></p>タグでくくり直すか、<br>タグを使います。
ホームページ作成 HTML5に、タグの使用法があります。
下のようなスクロールボックスを使うには
<div class="sbox">
<p>
ここにテキスト
</p>
</div>
とすることで使うことができます。
高さが150pxを超えるとスクロールバーが出ます。
スクロールボックスの高さを変えたいときは、スタイルシートで変更します。
HTML5 ホームページテンプレート スタイルシートカスタマイズに、変更方法があります。
スクロールボックスは、<p></p>タグの外で使います。
スクロールボックス
・
・
・
スクロールボックス
・
・
・
スクロールボックス
下のようなカラーボックスを使うには
<div class="cbox">
<p>
ここにテキスト
</p>
</div>
とすることで使うことができます。
カラーボックスは、<p></p>タグの外で使います。
レイアウトボックス１〜４を自由に組み合わせて、好みのデザインを作ります。
レイアウトボックスに見出しを使う場合は、<h2> - <h5>タグを使います。
※ホームページテンプレート１面タイプ以外は、レイアウトボックスはありません。
<div id="main">
<section>
<!-- メインコンテンツ▼ -->
ここにレイアウトボックスを使います。
<!-- メインコンテンツ▲ -->
</section>
</div>
レイアウトボックス１
レイアウトボックス１は、一面タイプです。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス１▼ -->
<div class="box1">
<article>
<h2>見出し</h2>
<p>
ここにコンテンツ
</p>
</article>
</div>
<!-- レイアウトボックス１▲ -->
レイアウトボックス２
レイアウトボックス２は、２分割タイプです。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス２▼ -->
<div class="box2">
<article>
<div class="left1">
<h4>見出し</h4>
<p>
ここに左コンテンツ
</p>
</div>
<div class="right1">
<p>
ここに右コンテンツ
</p>
</div>
</article>
</div>
<!-- レイアウトボックス２▲ -->
レイアウトボックス３
レイアウトボックス３は、３分割タイプです。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス３▼ -->
<div class="box3">
<article>
<div class="left2">
<h4>見出し</h4>
<p>
ここに左コンテンツ
</p>
</div>
<div class="center1">
<p>
ここに中央コンテンツ
</p>
</div>
<div class="right2">
<p>
ここに右コンテンツ
</p>
</div>
</article>
</div>
<!-- レイアウトボックス３▲ -->
レイアウトボックス４
レイアウトボックス４は、４分割タイプです。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス４▼ -->
<div class="box4">
<article>
<div class="left3">
<h4>見出し</h4>
<p>
ここに左コンテンツ
</p>
</div>
<div class="center2">
<p>
ここに中央左コンテンツ
</p>
</div>
<div class="center3">
<p>
ここに中央右コンテンツ
<p>
</div>
<div class="right3">
<p>
ここに右コンテンツ
</p>
</div>
</article>
</div>
<!-- レイアウトボックス４▲ -->
文章を書くには、文章を<p></p>タグで囲みます。
見出しは、<p></p>タグの外で使います。
Copyrightを入れます。必要のない時は削除できます。
Copyright (C) <a href="index.html">サイト名</a> All Rights Reserved.
オリジナル画像を使う場合は、以下の名前で [ image ] フォルダ内にある画像を、オリジナル画像で上書きしてください。
画像サイズを変更する場合は、スタイルシートも変更してください。
HTML5 ホームページテンプレート スタイルシートカスタマイズに、スタイルシートの変更方法があります。
HTML5ホームページテンプレートに使用している画像サイズ
HTML5ホームページテンプレート ３分割タイプ
| ヘッダー画像 |
header.jpg |
横幅1px 高さ200px |
| フッター画像 |
footer.jpg |
横幅1px 高さ150px |
| 背景画像 |
bg.gif |
横幅950px 高さ1px |
| トップメニュー |
menu_bg.jpg |
横幅1px 高さ30px |
| トップメニュー マウスオーバ |
menu.jpg |
横幅1px 高さ30px |
| サイドメニュー |
menu2_bg.jpg |
横幅25px 高さ25px |
| サイドメニュー マウスオーバー |
menu2.jpg |
横幅25px 高さ25px |
| サイドボックスヘッダー |
box_h.jpg |
横幅210px 高さ10px |
| サイドボックスフッター |
box_f.jpg |
横幅210px 高さ10px |
| <h2> - <h5>タグ |
h.jpg |
横幅1px 高さ30px |
HTML5ホームページテンプレート 2分割タイプ
| ヘッダー画像 |
header.jpg |
横幅1px 高さ200px |
| フッター画像 |
footer.jpg |
横幅1px 高さ150px |
| 背景画像 |
bg.gif |
横幅950px 高さ1px |
| トップメニュー |
menu_bg.jpg |
横幅1px 高さ30px |
| トップメニュー マウスオーバ |
menu.jpg |
横幅1px 高さ30px |
| サイドメニュー |
menu2_bg.jpg |
横幅25px 高さ25px |
| サイドメニュー マウスオーバー |
menu2.jpg |
横幅25px 高さ25px |
| サイドボックスヘッダー |
box_h.jpg |
横幅270px 高さ10px |
| サイドボックスフッター |
box_f.jpg |
横幅270px 高さ10px |
| <h2> - <h5>タグ |
h.jpg |
横幅1px 高さ30px |
HTML5ホームページテンプレート フレームタイプ
| ヘッダー画像 |
header.jpg |
横幅1px 高さ200px |
| フッター画像 |
footer.jpg |
横幅1px 高さ150px |
| 背景画像 |
bg.gif |
横幅950px 高さ1px |
| トップメニュー |
menu_bg.jpg |
横幅1px 高さ30px |
| トップメニュー マウスオーバ |
menu.jpg |
横幅1px 高さ30px |
| サイドメニュー |
menu2_bg.jpg |
横幅25px 高さ25px |
| サイドメニュー マウスオーバー |
menu2.jpg |
横幅25px 高さ25px |
| サイドボックスヘッダー |
box_h.jpg |
横幅250px 高さ10px |
| サイドボックスフッター |
box_f.jpg |
横幅250px 高さ10px |
| <h2> - <h5>タグ |
h.jpg |
横幅1px 高さ30px |
HTML5ホームページテンプレート １面タイプ
| ヘッダー画像 |
header.jpg |
横幅1px 高さ200px |
| フッター画像 |
footer.jpg |
横幅1px 高さ150px |
| 背景画像 |
bg.gif |
横幅910px 高さ1px |
| トップメニュー |
menu_bg.jpg |
横幅1px 高さ30px |
| トップメニュー マウスオーバ |
menu.jpg |
横幅1px 高さ30px |
| レイアウトボックス2背景画像 |
box2.gif |
横幅890 高さ1px |
| レイアウトボックス3背景画像 |
box3.gif |
横幅890 高さ1px |
| レイアウトボックス4背景画像 |
box4.gif |
横幅890 高さ1px |
| <h2> - </h5>タグ |
h.jpg |
横幅1px 高さ30px |