タイプ2 デザイン1
HTMLコード（下層ページ用）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="description" content="このページに関する簡単な説明。">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>ページのタイトル</title>
</head>
<body>
<!-- ヘッダ開始 -->
<div id="header">
<div class="top">
<div class="container">
<p class="siteTitle"><strong><a href="type2_design1_top.html"><img src="image/site_title.gif" alt="サイトのタイトル" width="229" height="27"></a></strong></p>
<p class="catch"><strong>Webテンプレート HTML+CSSサンプルコード集</strong></p>
<ul class="guide">
<li class="first"><a href="#">FAQ</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
</div>
<div class="nl">
<div class="container">
<ul class="clearFix">
<li><a href="type2_design1_top.html">ホーム <span class="en">Home</span></a></li>
<li class="active"><a href="type2_design1_low.html">サービス内容 <span class="en">Service</span></a></li>
<li><a href="#">制作実績 <span class="en">Works</span></a></li>
<li><a href="#">料金表 <span class="en">Price</span></a></li>
<li><a href="#">会社案内 <span class="en">Company</span></a></li>
<li class="last"><a href="#">お問い合わせ <span class="en">Contact</span></a></li>
</ul>
</div>
</div>
<div class="topicPath">
<div class="container">
<ol>
<li><a href="type2_design1_top.html">ホーム</a></li>
<li>サービス内容</li>
</ol>
</div>
</div>
<hr class="none">
</div>
<!-- ヘッダ終了 -->
<!-- コンテンツ開始 -->
<div id="content">
<div class="container">
<!-- メインカラム開始 -->
<div id="main">
<h1 class="pageTitle">ページタイトル</h1>
<div class="section emphasis">
<h2>テンプレートのご利用について</h2>
<p>このページは、TAG indexが配布するテンプレートです。まずはじめに、「<a href="../../docs/note.html">ご利用について</a>」と「<a href="../../docs/rule.html">ご利用規約</a>」を必ずご覧になってください。</p>
<p><a href="../type2_design1.html">前のページに戻る</a></p>
</div>
<div class="section normal" id="noteSection">
<div class="heading">
<h2>テンプレートの内容について</h2>
</div>
<p>ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。</p>
<p>特に、head要素内の「キーワード」「ページに関する説明」「ページのタイトル」の変更を忘れないようにご注意ください。</p>
</div>
<div class="section normal" id="pageSection">
<div class="heading">
<h2>ページ全体について</h2>
</div>
<p>ヘッダ、コンテンツ、フッタの幅は100%、その中に配置されるコンテナの幅は880pxで設定されています。</p>
<p>メインカラムの幅は660pxで設定されていますが、そのうちの20pxは左側の余白（サイドバーとの間隔）に使用しています。</p>
<p>サイドバーの幅は220pxで設定されています。この幅を変更する場合は、メインカラムの幅も調整してください。（合計で880pxになるように設定してください）</p>
</div>
<div class="section normal" id="pointSection">
<div class="heading">
<h2>設定に関するポイント</h2>
</div>
<p>下層ページの「サイトタイトル」には、トップページへのリンクを設定することができます。リンクが不要の場合には、この部分のa要素を削除してください。</p>
<p>サイトタイトルの下にはキャッチコピー等を入れることができます。ここに重要なキーワードを含めておきましょう。</p>
<p>メインメニューには6つの項目が配置されています。この項目数で使用する場合は、内容のテキスト量を全角で8文字以内に収めてください。この文字数を超えると、ブラウザの文字サイズを大きくした際に折り返しが入ってしまう可能性があります。また、メニュー本体の幅（878px）を6で割り切れないので、最初と最後の項目にクラス名を設定して項目幅を調整しています。</p>
<p>メインカラム内では、「標準セクション」「強調セクション」「新着情報（トップページのみ）」、この3つのスタイルが設定されています。このサンプルでは、メインカラム内の上部で「強調セクション」を使用しています。</p>
<p>サイドバー内では、「標準セクション（グレー）」「強調セクション1（水色）」「強調セクション2（グリーン）」「サブメニュー」「お問い合わせ」、この5つのスタイルが設定されています。</p>
</div>
<div class="section normal" id="submenuSection">
<div class="heading">
<h2>サブメニューの扱いについて</h2>
</div>
<p>下層ページでは、サイドバー内に「サブメニュー」が配置されています。同じカテゴリー内に別のページ（更に下層のページ）がある場合は、このメニューからリンクしてください。または、同一ページ内の見出しの頭出しとしても使用できます。どちらも不要の場合はサブメニューを削除してください。見出しの頭出しとして使用する場合は、メインカラム内の各セクションにIDを設定する必要があります。</p>
<p>このサンプル（下層ページ）では、サブメニューを見出しの頭出し用として使用しています。メインカラム内の各セクション（標準セクション×5）に仮のIDが設定されているので、そのID名を変更または削除してから使用してください。</p>
</div>
<div class="section normal" id="serviceSection">
<div class="heading">
<h2>カスタマイズサービス</h2>
</div>
<p>色の変更、画像の加工、メニュー項目の変更など、テンプレートの編集をお手伝いいたします。また、テンプレートをベースとしたホームページの制作、メールフォームの設置なども承ります。</p>
<p>※事業者の方向けのサービスとなります。</p>
<p><a href="../../service/index.html">カスタマイズサービスのご案内</a></p>
</div>
</div>
<!-- メインカラム終了 -->
<!-- サイドバー開始 -->
<div id="nav">
<div class="section subMenu">
<h2>サブメニュー</h2>
<ul class="nl">
<li><a href="#noteSection">テンプレートの内容について</a></li>
<li><a href="#pageSection">ページ全体について</a></li>
<li><a href="#pointSection">設定に関するポイント</a></li>
<li><a href="#submenuSection">サブメニューの扱いについて</a></li>
<li><a href="#serviceSection">カスタマイズサービス</a></li>
</ul>
</div>
<div class="section emphasis">
<div class="inner">
<h2>ピックアップ</h2>
<p><a href="#">特に告知したいコンテンツに対してここからリンク。</a></p>
<p>ピックアップコンテンツに関する簡単な説明をここに記載。</p>
</div>
</div>
<div class="section normal">
<h2>サポートエリア</h2>
<p>東京 神奈川 埼玉 千葉 を中心に対応しております。（ネットを利用したサポートは全国に対応可能）</p>
</div>
<div class="section normal contact">
<h2>お問い合わせ</h2>
<p>お気軽にお問い合わせください。</p>
<p class="tel">Tel 03-0000-0000</p>
<p>営業時間 平日 9:00〜18:00<br>（定休日 土日祝）</p>
<p class="form"><a href="#">お見積り・お問い合わせ</a></p>
</div>
</div>
<!-- サイドバー終了 -->
<hr class="clear">
</div>
</div>
<!-- コンテンツ終了 -->
<!-- フッタ開始 -->
<div id="footer">
<div class="container">
<ul class="nl">
<li><a href="type2_design1_top.html">ホーム</a></li>
<li><a href="type2_design1_low.html">サービス内容</a></li>
<li><a href="#">制作実績</a></li>
<li><a href="#">料金表</a></li>
<li><a href="#">会社案内</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<ul class="nl guide">
<li><a href="#">FAQ</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<address>
<strong>あなたのサイト名</strong>
<br>
東京都北区0-0-0 タグインデックスビル10F TEL 03-0000-0000
<br>
Copyright (C) 2010 あなたのサイト名. All Rights Reserved.
</address>
</div>
</div>
<!-- フッタ終了 -->
</body>
</html>
前のページに戻る