制作者より
またもや架空のWebサイトを作ろうと思って、今回は歯医者さんです。歯医者さんって怖いですよねー（笑）。歯医者に限らず病院は怖いっていうイメージがあるので、それを払拭するためにも堅い感じではなく、パステル系とか柔らかい色使いにすると、ベターかと思います。
病院のホームページでも歯医者さん、つまり個人病院です。それくらいの規模にはちょうどいいレイアウトかと思います。総合病院になるともっと別のレイアウトが望ましいと思います。個人病院に限らず、個人塾とかエステやネイルなどの美容系のWebサイトにも適したCSSテンプレートです。
完全幅固定タイプです。全体的な横幅は800pxです。
編集する際に注意点です。2カラムで右カラムと左カラムの縦の長さが違う場合でも下までサブの背景（ピンク色）を延ばして表示したい場合は、メインコンテンツの背景画像で指定するのが一般的です。サブコンテンツ（メインコンテンツの左側のサイドメニュー）の幅を自由に変更できるように、横幅500pxの画像を-300pxにずらして表示しています。こうすることで、画像の編集なしに自由に横幅が変えれるようになります。色を変更したい場合は別途画像編集ソフトを持ちいらなければなりませんが。
プログレッシブ エンハンスメントという考え
ホームページは、どの環境のユーザでも不具合なく閲覧できる事が最も望ましい事であります。しかし、ブラウザによって対応しているCSSやJavaScriptが異なっており、全てのブラウザで全く同じ動作をするということが非常に困難です。そのため、ハックなどを使い、古い技術でしかホームページを作るしかできませんでした。
しかしそれでは、膨大な作業工数になってしまい、製作者は非常に負担が増えてしまいます。そこで、「プログレッシブ エンハンスメント」という考え方です。
「プログレッシブ エンハンスメント」とは、どのブラウザでも情報が欠けることなく参照できるが、最新のブラウザであればよりリッチに見ることが出来、古いブラウザでもデザイン的に劣っても情報が欠けることなく参照できるようにする、という考えです。
つまりは、これまでの「全てのブラウザで全く同じに見えないといけない」という考えではなく、「必要な情報が提供できれば、ブラウザごとに見た目が変わってもよいじゃない」という考えです。
このCSSテンプレートでも実験的に「プログレッシブ エンハンスメント」を取り入れてみました。まずは、上部のメニューはブラウザによってカーソルを合わせたときに少し見た目が変わります。そして、ページへ戻るリンクはJavaScriptを用い、スムースに上部へ戻るようになっています。
とは言ったものの、病院や行政など公的なWebサイトはネットリテラシーの低い方やお年寄りの方も見たりするので、色使いや文字の大きさなどには気をつけないといけません。
各種コンテンツについて
各種コンテンツの制作も賜っております。
サンプルについて
以下、サンプルタグになります。
INFORMATION
- 2009-12-11
-
休業のお知らせ。誠に勝手ながら12月18日から1月4日まで長期休暇日とさせていただきます。ご了承ください。
- 2009-12-01
-
サイトを公開しました。
タグサンプル
h3タグ
h4タグ
h5タグ
h6タグ
強調（em）
より強い強調（strong）
追加（ins）
削除（del）
テキストアンカー
リスト
普通のリスト
- 普通のリスト1
- 普通のリスト2
- 普通のリスト3
番号付きリスト
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。
定義リスト
- 定義リスト1
- 定義した用語の説明
- 定義リスト2
- 定義した用語の説明
- 定義リスト3
- 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。