制作者より
前回ブログっぽいのテンプレートを公開しましたが、そのタイプでより商用利用できそうなデザインにしてみました。
完全幅固定タイプです。全体的な横幅は800pxで、左右にそれぞれ10pxの余白を設けています。
プログレッシブ エンハンスメントという考え
ホームページは、どの環境のユーザでも不具合なく閲覧できる事が最も望ましい事です。しかし、ブラウザによって対応しているCSSやJavaScriptが異なっており、全てのブラウザで全く同じ動作をするということが非常に困難です。そのため、ハックなどを使い、古い技術でしかホームページを作るしかできませんでした。
しかしそれでは膨大な作業工数になってしまい、製作者は非常に負担が増えてしまいます。そこで、「プログレッシブ エンハンスメント」という考え方です。
「プログレッシブ エンハンスメント」とは、どのブラウザでも情報が欠けることなく参照できるが、最新のブラウザであればよりリッチに見ることが出来、古いブラウザでもデザイン的に劣っても情報が欠けることなく参照できるようにする、という考えです。
つまりは、これまでの「全てのブラウザで全く同じに見えないといけない」という考えではなく、「必要な情報が提供できれば、ブラウザごとに見た目が変わってもよいじゃない」という考えです。
このCSSテンプレートでも実験的に「プログレッシブ エンハンスメント」を取り入れてみました。上部のメニューはブラウザによってカーソルを合わせたときに少し見た目が変わります。
画像について
画像は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
- 番号付きリスト2
- 番号付きリスト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 |