「タイプ3 レイアウト」をベースにしたデザインテンプレートです。（ホワイト + 薄こげ茶）
※下層ページでは、右側にサイドバーを配置した2カラムレイアウトもご用意しています。
- 3カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 左サイドバー → 右サイドバー → フッタ の順で記述されています。
- 2カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 右サイドバー → フッタ の順で記述されています。
- このサンプルでは、ページコンテナの幅は980pxになります。
- このサンプルでは、トップページ内にタブボックスが配置されています（JavaScriptを使用）。設定に関する説明などは、サンプル画面内でご覧いだたけます。
- タブボックスの部分では、z-index プロパティが3箇所に設定されています。これ以外の部分にも z-index を設定する場合は、順序の指定内容に注意してください。（必要に応じて値の数値を変更してください）
- ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。
- head要素内の設定（キーワード、説明、ページタイトル）は、必ず変更してください。
- サイトタイトル（Your Site Title）は画像で作成されています。ご自分のサイトに合わせて画像を変更するとともに、alt属性の値を必ず書き換えてください。
- 下層ページの「サイトタイトル」には、トップページへのリンクを設定することができます。（リンクが不要の場合には、この部分のa要素を削除してください）
- スタイルの設定を変更する場合は、CSSコード内のコメントを参考にしてください。また、設定に関するポイントなどを下層ページのサンプル画面内でご覧いただけます。
コード
HTMLコード、CSSコード、JavaScriptコードは、下記のページでご覧いただけます。コピーしてお使いください。
使用している画像
menu_line_gray.gif （ 拡大）
topic_path_gray.gif
square.gif （ 拡大）
hor_menu8_off.gif
hor_menu8_on.gif
menu_triangle2.gif
menu_triangle6.gif
menu_triangle6_box.gif
heading_back1.gif
heading_back6.gif
emphasis_back4.gif
tab_gen.gif
tab_act.gif
box_back_gray4.gif
form_back3_off.gif
form_back3_on.gif
※画像へは直接リンクしないでください。（ダウンロードしてから使用してください）
使い方
「コード」のリンク先からHTMLコード、CSSコード、JavaScriptコードをコピーして、それをメモ帳などに貼り付けてから保存してください。（HTMLファイルの拡張子は「.html」、CSSファイルの拡張子は「.css」、JavaScriptファイルの拡張子は「.js」です）
このサンプルでは、以下のファイル構成を想定して設定されています。
HTMLファイルが置かれたフォルダ内に「css」フォルダ、「js」フォルダ、「image」フォルダを作成し、CSSファイルはcssフォルダ内に、JavaScriptファイルはjsフォルダ内に、画像ファイルはimageフォルダ内に保存します。また、CSSファイルは「style.css」、JavaScriptファイルは「topics.js」というファイル名で保存します。
上記以外のファイル構成にする場合は、HTMLコードとCSSコードの一部（CSSファイルや画像ファイルを読み込む部分等）を変更する必要があります。
- サイト内検索
