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

タイプ3 レイアウト



ページ幅固定、左右にサイドバーを配置した3カラムレイアウトです。

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

コンテナの中にヘッダ、コンテンツ、フッタを配置しているので、ページの両サイドに影や境界線を表示させるようなデザインに向いています。

メインメニューはヘッダ内に配置、3カラムレイアウトでは左サイドバー内にサブメニューが配置されています。

※枠組みのみのサンプルとなります。(ご自分で装飾を施してください)


表示例
  • 3カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 左サイドバー → 右サイドバー → フッタ の順で記述されています。
  • 2カラムレイアウトのHTMLコードは、ヘッダ → メインカラム → 右サイドバー → フッタ の順で記述されています。
  • このサンプルでは、ページコンテナの幅は980pxになります。
  • ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。
  • head要素内の設定(キーワード、説明、ページタイトル)は、必ず変更してください。
  • 下層ページの「サイトタイトル」には、トップページへのリンクを設定することができます。(リンクが不要の場合には、この部分のa要素を削除してください)
  • スタイルの設定を変更する場合は、CSSコード内のコメントを参考にしてください。また、設定に関するポイントなどを下層ページのサンプル画面内でご覧いただけます。

使用している画像

menu_line.gif menu_line.gifmenu_line.gif 拡大)

menu_triangle2.gif menu_triangle2.gif

topic_path.gif topic_path.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

使い方

「コード」のリンク先からHTMLコードとCSSコードをコピーして、それをメモ帳などに貼り付けてから保存してください。(HTMLファイルの拡張子は「.html」、CSSファイルの拡張子は「.css」です)

このサンプルでは、以下のファイル構成を想定して設定されています。

構成図

HTMLファイルが置かれたフォルダ内に「css」フォルダと「image」フォルダを作成し、CSSファイルはcssフォルダ内に、画像ファイルはimageフォルダ内に保存します。また、CSSファイルは「style.css」というファイル名で保存します。

上記以外のファイル構成にする場合は、HTMLコードとCSSコードの一部(CSSファイルや画像ファイルを読み込む部分)を変更する必要があります。

更新履歴

2010/06/14
メイリオフォント使用時の不具合を避けるため、CSSコードを微調整しました。

ページ全体

ページの先頭へ