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

タイプ1 デザイン2



「タイプ1 レイアウト」をベースにしたデザインテンプレートです。(ブラック + ゴールド)


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

使用している画像

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

pageback_gray_gradation.gif pageback_gray_gradation.gif

pageback_880_gray.gif
pageback_880_gray.gif

menu_line_gray.gif menu_line_gray.gifmenu_line_gray.gif 拡大)

hor_menu5_off.gif hor_menu5_off.gif

hor_menu5_on.gif hor_menu5_on.gif

topic_path_gray.gif topic_path_gray.gif

content_top_gray.gif
content_top_gray.gif

content_bottom_gray.gif
content_bottom_gray.gif

heading_back4.gif heading_back4.gif

heading_back_gray3.gif heading_back_gray3.gif

ver_menu4_off.gif ver_menu4_off.gif

ver_menu4_on.gif ver_menu4_on.gif

form_back1_off.gif form_back1_off.gif

form_back1_on.gif form_back1_on.gif

site_title2.gif site_title2.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コード内の「新着情報」の設定を少し変更しました。

ページの先頭へ