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

タイプ2 デザイン1



「タイプ2 レイアウト」をベースにしたデザインテンプレートです。(ブルー + ホワイト)


表示例
  • HTMLコードは、ヘッダ → メインカラム → サイドバー → フッタ の順で記述されています。
  • このサンプルでは、ページコンテナの幅は880pxになります。
  • 背景表示の都合上、body要素に対して最小幅(min-width)を設定しています。(コンテナの幅と同じ値を指定)
  • メインカラムの幅を変更する場合は、強調セクションの背景画像(emphasis_back2.gif)の幅も変更する必要があります。
  • ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。
  • head要素内の設定(キーワード、説明、ページタイトル)は、必ず変更してください。
  • サイトタイトル(Your Site Title)は画像で作成されています。ご自分のサイトに合わせて画像を変更するとともに、alt属性の値を必ず書き換えてください。
  • 下層ページのサイトタイトルには、トップページへのリンクを設定することができます。(リンクが不要の場合には、この部分のa要素を削除してください)
  • 下層ページのメインカラム内では、各セクションに仮のIDが設定されています。ご自分のサイトに合わせてID名を変更、または削除してください。
  • スタイルの設定を変更する場合は、CSSコード内のコメントを参考にしてください。また、設定に関するポイントなどを下層ページのサンプル画面内でご覧いただけます。

使用している画像

※一部の画像は縮小して表示しています。

top_back1.gif top_back1.gif

menu_triangle1_box.gif menu_triangle1_box.gif

menu_triangle1.gif menu_triangle1.gif

topic_path_gray.gif topic_path_gray.gif

opening_back1.gif opening_back1.gif (縮小して表示しています)

hor_menu6_off.gif hor_menu6_off.gif

hor_menu6_on.gif hor_menu6_on.gif

content_back1.gif content_back1.gif

heading_back5_6.gif
heading_back5_6.gif

heading_square11.gif heading_square11.gif

emphasis_back2.gif
emphasis_back2.gif

box_back_blue1.gif box_back_blue1.gif

box_back_green1.gif box_back_green1.gif

ver_menu5_6off.gif ver_menu5_6off.gif

ver_menu5_6on.gif ver_menu5_6on.gif

form_back1_off.gif form_back1_off.gif

form_back1_on.gif form_back1_on.gif

foot_back1.gif foot_back1.gif

site_title.gif site_title.gif (仮のタイトル画像です)

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

画像の制作について

使い方

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

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

構成図

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

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

更新履歴

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

ページの先頭へ