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

タイプ1 レイアウト



ページ幅固定、左側にサイドバーを配置した2カラムレイアウトです。(floatやclear、マージン等の設定を変更することで、右サイドバーに変更することも可能です)

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

メインメニューはヘッダ内に配置、下層ページではサイドバー内にサブメニューを配置することができます。

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


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

使用している画像

menu_line.gif menu_line.gifmenu_line.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コードを微調整しました。
2010/03/12
CSSコード内の「新着情報」の設定を少し変更しました。
2010/02/26
カスタマイズしやすくするために、CSSコードとHTMLコードの一部を変更しました。(div要素を1組追加して、その中にメインカラムとサイドバーを配置しました) ※変更が続いてしまってすみません。
2010/02/25
CSSコードとHTMLコードの一部を変更しました。(ページタイトルの配置換えやクラスの設定変更等)

ページの先頭へ