1. Home
  2. Webテンプレート
  3. ページ全体
  4. タイプ3 デザイン1

タイプ3 デザイン1



「タイプ3 レイアウト」をベースにしたデザインテンプレートです。(ホワイト + 薄こげ茶)

※下層ページでは、右側にサイドバーを配置した2カラムレイアウトもご用意しています。


表示例
  • 3カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 左サイドバー → 右サイドバー → フッタ の順で記述されています。
  • 2カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 右サイドバー → フッタ の順で記述されています。
  • このサンプルでは、ページコンテナの幅は980pxになります。
  • このサンプルでは、トップページ内にタブボックスが配置されています(JavaScriptを使用)。設定に関する説明などは、サンプル画面内でご覧いだたけます。
  • タブボックスの部分では、z-index プロパティが3箇所に設定されています。これ以外の部分にも z-index を設定する場合は、順序の指定内容に注意してください。(必要に応じて値の数値を変更してください)
  • ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。
  • head要素内の設定(キーワード、説明、ページタイトル)は、必ず変更してください。
  • サイトタイトル(Your Site Title)は画像で作成されています。ご自分のサイトに合わせて画像を変更するとともに、alt属性の値を必ず書き換えてください。
  • 下層ページの「サイトタイトル」には、トップページへのリンクを設定することができます。(リンクが不要の場合には、この部分のa要素を削除してください)
  • スタイルの設定を変更する場合は、CSSコード内のコメントを参考にしてください。また、設定に関するポイントなどを下層ページのサンプル画面内でご覧いただけます。

使用している画像

menu_line_gray.gif menu_line_gray.gifmenu_line_gray.gif 拡大)

topic_path_gray.gif topic_path_gray.gif

square.gif square.gifsquare.gif 拡大)

hor_menu8_off.gif hor_menu8_off.gif

hor_menu8_on.gif hor_menu8_on.gif

menu_triangle2.gif menu_triangle2.gif

menu_triangle6.gif menu_triangle6.gif

menu_triangle6_box.gif menu_triangle6_box.gif

heading_back1.gif heading_back1.gif

heading_back6.gif heading_back6.gif

emphasis_back4.gif emphasis_back4.gif

tab_gen.gif tab_gen.gif

tab_act.gif tab_act.gif

box_back_gray4.gif box_back_gray4.gif

form_back3_off.gif form_back3_off.gif

form_back3_on.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ファイルや画像ファイルを読み込む部分等)を変更する必要があります。


ページ全体

ページの先頭へ