<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>PARAISO</title>
<meta name="Keywords" content="沖縄,オクマ,PARAISO" />
<meta name="Description" content="沖縄県は最北端に位置するリゾート『JALプライベートリゾートオクマ』内にあるエンターテイメントレストラン" />
</head>
<body>
<!-- body▼ -->
<div id="body">
<!-- header▼ -->
<div id="header">
<h1 name="top" id="top"><a href="index.html">SITE NAME</a></h1>
</div>
<!-- header▲ -->
<!-- メニュー▼ -->
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="page2.html">ページ 2</a></li>
<li><a href="page2.html">ページ 3</a></li>
<li><a href="page2.html">ページ 4</a></li>
<li><a href="page2.html">ページ 5</a></li>
</ul>
</div>
<!-- メニュー▲ -->
<!-- left▼ -->
<div id="left">
<h4>MENU</h4>
<!-- サブメニュー▼ -->
<ul id="menu2">
<li><a href="#a01">メニュー 1</a></li>
<li><a href="#a01">メニュー 2</a></li>
<li><a href="#a01">メニュー 3</a></li>
<li><a href="#a01">メニュー 4</a></li>
<li><a href="#a01">メニュー 5</a></li>
</ul>
<!-- サブメニュー▲ -->
<!-- leftコンテンツ▼ -->
<!-- サイドボックス▼ -->
<div class="box_head">サイドボックス</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
<!-- サイドボックス▲ -->
<!-- leftコンテンツ▲ -->
</div>
<!-- left▲ -->
<!-- main▼ -->
<div id="main">
<!-- メインコンテンツ▼ -->
<h2>見出し</h2>
<p>
ここにテキスト
</p>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
<div class="up"><a href="#top">Page Top ▲</a></div>
<!-- メインコンテンツ▲ -->
</div>
<!-- main▲ -->
<!-- right▼ -->
<div id="right">
<!-- rightコンテンツ▼ -->
<!-- rightコンテンツ▲ -->
</div>
<!-- right▲ -->
<!-- footer▼ -->
<div id="footer">
<br /><br /><br />
Copyright (C) <a href="">サイト名</a> All Rights Reserved.
</div>
<!-- footer▲ -->
<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>
</div>
<!-- body▲ -->
</body>
</html>
ホームページにタイトルをつけます。タイトルは、ブラウザのタイトルバーに表示されたり、お気に入りや、検索エンジンの検索結果として表示されます。
<title>タイトル</title>
このページに関連するキーワードをつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
( , )で区切って複数記述することが出来ます。
記述しない場合は以下のタグを削除します。
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
このページの概要をつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
記述しない場合は以下のタグを削除します。
<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... )増やします。
<!-- メニュー▼ -->
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="page2.html">ページ 2</a></li>
<li><a href="page3.html">ページ 3</a></li>
<li><a href="page4.html">ページ 4</a></li>
<li><a href="page5.html">ページ 5</a></li>
</ul>
</div>
<!-- メニュー▲ -->
メニューの横幅を変えたいときは、スタイルシートで変更します。
ホームページテンプレートをカスタマイズに、変更方法があります。
メインメニューだけでは足りない時や、ページ内リンクに使います。
必要のない場合は削除できます。
※ホームページテンプレート1面タイプには、サブメニューはありません。
<!-- サブメニュー▼ -->
<h4>MENU</h4>
<ul id="menu2">
<li><a href="#a01">メニュー 1</a></li>
<li><a href="#a01">メニュー 2</a></li>
<li><a href="#a01">メニュー 3</a></li>
<li><a href="#a01">メニュー 4</a></li>
<li><a href="#a01">メニュー 5</a></li>
</ul>
<!-- サブメニュー▲ -->
ページ内リンクとして使う場合
ジャンプしたい所に、 name="" と id="" をつけます。
使用例
<h3 name="a01" id="a01"></h3>
<a name="a01" id="a01"></a>
サブメニューに<a href="#a01">a01にジャンプ</a>を作ります。
※a01は好きな英数字
サイドバーにサイドボックスを使います。
必要ない時は以下のタグを削除します。
※ホームページテンプレート1面タイプには、サイドボックスはありません。
<div class="box_head">ここにテキスト</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
<div class="box_head"></div>内の文字はセンタリングされます。
サイドバーに見出しを使う場合は、<h4></h4>タグや、<h5></h5>タグを使います。
見出しは、<p></p>タグの外で使います。
文章を書くには、文章を<p></p>タグで囲みます。
見出しを使う場合は、<h2></h2>タグや、<h3></h3>タグを使います。
見出しは、<p></p>タグの外で使います。
<!-- メインテキスト▼ -->
<h2>見出し</h2>
<p>
ここにテキスト
</p>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
<div class="up"><a href="#top">Page Top ▲</a></div>
<!-- メインテキスト▲ -->
改行は<p></p>タグでくくり直すか、<br />タグを使います。
ホームページ作成 XHTMLに、XHTMLタグについての説明があります。
下のようなスクロールボックスを使うには
<div class="sbox">
<p>
ここにテキスト
</p>
</div>
とすることで使うことができます。
高さが150pxを超えるとスクロールバーが出ます。
スクロールボックスは、<p></p>タグの外で使います。
スクロールボックス
・
・
・
スクロールボックス
・
・
・
スクロールボックス
下のようなカラーボックスを使うには
<div class="cbox">
<p>
ここにテキスト
</p>
</div>
とすることで使うことができます。
カラーボックスは、<p></p>タグの外で使います。
カラーボックス
・
・
・
レイアウトボックス1〜4を自由に組み合わせて、好みのデザインを作ります。
※ホームページテンプレート1面タイプ以外は、レイアウトボックスはありません。
<div id="main">
<!-- メインコンテンツ▼ -->
ここにレイアウトボックスを使います。
<!-- メインコンテンツ▲ -->
</div>
レイアウトボックス1
レイアウトボックス1は、一面タイプです。
レイアウトボックス1に見出しを使う場合は、<h2>タグや、<h3>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス1▼ -->
<div class="box1">
ここにコンテンツ
</div>
<!-- レイアウトボックス1▲ -->
レイアウトボックス2
レイアウトボックス2は、2分割タイプです。
レイアウトボックス2に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス2▼ -->
<div class="box2">
<div class="left1">
ここに左コンテンツ
</div>
<div class="right1">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス2▲ -->
レイアウトボックス3
レイアウトボックス3は、3分割タイプです。
レイアウトボックス3に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス3▼ -->
<div class="box3">
<div class="left2">
ここに左コンテンツ
</div>
<div class="center1">
ここに中央コンテンツ
</div>
<div class="right2">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス3▲ -->
レイアウトボックス4
レイアウトボックス4は、4分割タイプです。
レイアウトボックス4に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス4▼ -->
<div class="box4">
<div class="left3">
ここに左コンテンツ
</div>
<div class="center2">
ここに中央左コンテンツ
</div>
<div class="center3">
ここに中央右コンテンツ
</div>
<div class="right3">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス4▲ -->
文章を書くには、文章を<p></p>タグで囲みます。
見出しは、<p></p>タグの外で使います。
Copyrightを入れます。必要のない時は削除できます。
Copyright (C) <a href="index.html">サイト名</a> All Rights Reserved.
オリジナル画像を使う場合は、以下の名前で [ image ] フォルダ内にある画像を、オリジナル画像で上書きしてください。 画像サイズを変更する場合は、スタイルシートも変更してください。
ホームページテンプレートをカスタマイズに、スタイルシートの変更方法があります。
ヘッダー画像 | header.jpg | 横幅850px 高さ150px |
フッター画像 | footer.jpg | 横幅850px 高さ100px |
背景画像 | bg.gif | 横幅850px 高さ1px |
トップメニュー | menu_bg.jpg | 横幅850px 高さ30px |
トップメニュー マウスオーバ | menu.jpg | 横幅300px 高さ30px |
サイドメニュー | menu2_bg.jpg | 横幅180px 高さ25px |
サイドメニュー マウスオーバー | menu2.jpg | 横幅180px 高さ25px |
サイドボックスヘッダー | box_h.jpg | 横幅180px 高さ10px |
サイドボックスフッター | box_f.jpg | 横幅180px 高さ10px |
<h2></h2>タグ | h2.jpg | 横幅450px 高さ30px |
<h3></h3>タグ | h3.jpg | 横幅450px 高さ30px |
<h4></h4>タグ | h4.jpg | 横幅180px 高さ30px |
<h5></h5>タグ | h5.jpg | 横幅180px 高さ30px |
ヘッダー画像 | header.jpg | 横幅850px 高さ150px |
フッター画像 | footer.jpg | 横幅850px 高さ100px |
背景画像 | bg.gif | 横幅850px 高さ1px |
トップメニュー | menu_bg.jpg | 横幅850px 高さ30px |
トップメニュー マウスオーバ | menu.jpg | 横幅300px 高さ30px |
サイドメニュー | menu2_bg.jpg | 横幅220px 高さ25px |
サイドメニュー マウスオーバー | menu2.jpg | 横幅220px 高さ25px |
サイドボックスヘッダー | box_h.jpg | 横幅220px 高さ10px |
サイドボックスフッター | box_f.jpg | 横幅220px 高さ10px |
<h2></h2>タグ | h2.jpg | 横幅600px 高さ30px |
<h3></h3>タグ | h3.jpg | 横幅600px 高さ30px |
<h4></h4>タグ | h4.jpg | 横幅220px 高さ30px |
<h5></h5>タグ | h5.jpg | 横幅220px 高さ30px |
ヘッダー画像 | header.jpg | 横幅850px 高さ150px |
フッター画像 | footer.jpg | 横幅850px 高さ100px |
背景画像 | bg.gif | 横幅850px 高さ1px |
トップメニュー | menu_bg.jpg | 横幅850px 高さ30px |
トップメニュー マウスオーバ | menu.jpg | 横幅300px 高さ30px |
サイドメニュー | menu2_bg.jpg | 横幅200px 高さ25px |
サイドメニュー マウスオーバー | menu2.jpg | 横幅200px 高さ25px |
サイドボックスヘッダー | box_h.jpg | 横幅200px 高さ10px |
サイドボックスフッター | box_f.jpg | 横幅200px 高さ10px |
<h2></h2>タグ | h2.jpg | 横幅600px 高さ30px |
<h3></h3>タグ | h3.jpg | 横幅600px 高さ30px |
<h4></h4>タグ | h4.jpg | 横幅200px 高さ30px |
<h5></h5>タグ | h5.jpg | 横幅200px 高さ30px |
ヘッダー画像 | header.jpg | 横幅850px 高さ150px |
フッター画像 | footer.jpg | 横幅850px 高さ100px |
背景画像 | bg.gif | 横幅850px 高さ1px |
トップメニュー | menu_bg.jpg | 横幅850px 高さ30px |
トップメニュー マウスオーバ | menu.jpg | 横幅300px 高さ30px |
フッタメニュー | menu_bg2.jpg | 横幅850px 高さ20px |
フッタメニュー マウスオーバ | menu2.jpg | 横幅300px 高さ20px |
レイアウトボックス2背景画像 | box2.gif | 横幅830 高さ1px |
レイアウトボックス3背景画像 | box3.gif | 横幅830 高さ1px |
レイアウトボックス4背景画像 | box4.gif | 横幅830 高さ1px |
レイアウトボックス1<h2></h2>タグ | h2.jpg | 横幅830px 高さ30px |
レイアウトボックス1<h3></h3>タグ | h3.jpg | 横幅830px 高さ30px |
レイアウトボックス2<h4></h4>タグ | h4.jpg | 横幅410px 高さ30px |
レイアウトボックス3<h4></h4>タグ | h4a.jpg | 横幅270px 高さ30px |
レイアウトボックス4<h4></h4>タグ | h4b.jpg | 横幅200px 高さ30px |
レイアウトボックス2<h5></h5>タグ | h5.jpg | 横幅410px 高さ30px |
レイアウトボックス3<h5></h5>タグ | h5a.jpg | 横幅270px 高さ30px |
レイアウトボックス4<h5></h5>タグ | h5b.jpg | 横幅200px 高さ30px |