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

タイプ1 デザイン1



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


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

使用している画像

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

pageback_880.gif
pageback_880.gif (分かりやすくするために画像の境界線を表示しています)

head_back1.gif head_back1.gif

path_back1.gif path_back1.gif

menu_line_gray.gif menu_line_gray.gifmenu_line_gray.gif 拡大)

hor_menu3_off.gif hor_menu3_off.gif

topic_path_gray.gif topic_path_gray.gif

ver_separator1.gif ver_separator1.gifver_separator1.gif 拡大)

heading_back1.gif heading_back1.gif

emphasis_back1.gif emphasis_back1.gif

heading_back_gray2.gif heading_back_gray2.gif

heading_back_green2.gif heading_back_green2.gif

heading_back_orange2.gif heading_back_orange2.gif

form_back1_off.gif form_back1_off.gif

form_back1_on.gif form_back1_on.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コードを微調整しました。
2010/03/12
CSSコード内の「新着情報」の設定を少し変更しました。
2010/03/03
CSSコードを微調整しました。(境界線の色を少し濃くしました)
2010/02/26
カスタマイズしやすくするために、CSSコードとHTMLコードの一部を変更しました。(div要素を1組追加して、その中にメインカラムとサイドバーを配置しました)

ページの先頭へ