制作者より

またもや架空のWebサイトを作ろうと思って、今回は歯医者さんです。歯医者さんって怖いですよねー(笑)。歯医者に限らず病院は怖いっていうイメージがあるので、それを払拭するためにも堅い感じではなく、パステル系とか柔らかい色使いにすると、ベターかと思います。

病院のホームページでも歯医者さん、つまり個人病院です。それくらいの規模にはちょうどいいレイアウトかと思います。総合病院になるともっと別のレイアウトが望ましいと思います。個人病院に限らず、個人塾とかエステやネイルなどの美容系のWebサイトにも適したCSSテンプレートです。

完全幅固定タイプです。全体的な横幅は800pxです。

編集する際に注意点です。2カラムで右カラムと左カラムの縦の長さが違う場合でも下までサブの背景(ピンク色)を延ばして表示したい場合は、メインコンテンツの背景画像で指定するのが一般的です。サブコンテンツ(メインコンテンツの左側のサイドメニュー)の幅を自由に変更できるように、横幅500pxの画像を-300pxにずらして表示しています。こうすることで、画像の編集なしに自由に横幅が変えれるようになります。色を変更したい場合は別途画像編集ソフトを持ちいらなければなりませんが。

さらにカスタマイズしやすいように、サブメニューの背景をCSSで指定するようにしました。サブメニューの横幅を変更する際は、CSSにて、 #contents {
width:800px;
clear:both;
float:left;
background:#ffe7e7 url(../images/bg_contents.gif) 200px 0 repeat-y;
}
ここの『background:#ffe7e7 url(../images/bg_contents.gif) 200px 0 repeat-y;』の200pxのところを、サブメニューの横幅と同じにしてください。

プログレッシブ エンハンスメントという考え

ホームページは、どの環境のユーザでも不具合なく閲覧できる事が最も望ましい事です。しかし、ブラウザによって対応しているCSSやJavaScriptが異なっており、全てのブラウザで全く同じ動作をするということが非常に困難です。そのため、ハックなどを使い、古い技術でしかホームページを作るしかできませんでした。

しかしそれでは膨大な作業工数になってしまい、製作者は非常に負担が増えてしまいます。そこで、「プログレッシブ エンハンスメント」という考え方です。

「プログレッシブ エンハンスメント」とは、どのブラウザでも情報が欠けることなく参照できるが、最新のブラウザであればよりリッチに見ることが出来、古いブラウザでもデザイン的に劣っても情報が欠けることなく参照できるようにする、という考えです。

つまりは、これまでの「全てのブラウザで全く同じに見えないといけない」という考えではなく、「必要な情報が提供できれば、ブラウザごとに見た目が変わってもよいじゃない」という考えです。

このCSSテンプレートでも実験的に「プログレッシブ エンハンスメント」を取り入れてみました。上部のメニューはブラウザによってカーソルを合わせたときに少し見た目が変わります。

とは言ったものの、病院や行政など公的なWebサイトはネットリテラシーの低い方やお年寄りの方も見たりするので、色使いや文字の大きさなどには気をつけないといけません。

画像について

画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。

ページ上部への戻りリンクについて

ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。

カスタマイズについて

カスタマイズはご自由になさってください。
制限はありません。

その他、不具合などございましたら
CoolWebWindowにお知らせください。

サンプルタグについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

INFORMATION

2009-04-28
○○新聞に取材を受けました。
2009-04-24
休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。

タグサンプル

h3タグ

h4タグ

h5タグ
h6タグ

強調(em) より強い強調(strong) 追加(ins) 削除(del)
テキストアンカー

リスト

普通のリスト

  • 普通のリスト1
  • 普通のリスト2
  • 普通のリスト3

番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
    li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。

定義リスト

定義リスト1
定義した用語の説明
定義リスト2
定義した用語の説明
定義リスト3
定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1見出し2見出し3見出し4見出し5
セル1セル2セル3セル4セル5
セル1セル2セル3セル4セル5
セル1セル2セル3セル4セル5

インプラント歯科

きりかぶ歯科クリニック
東京都XX区1-1-1

【診療時間】

月~土曜日
9:00~13:00 14:00~18:00

【休診】

日曜日・祝祭日

【ご予約】

0120-XXX-XXX