制作者より

企業サイトをはじめ、どんなホームページにもマッチしやすい汎用性の高いCSSデザインテンプレートです。試しに企業サイトにアレンジしてみました。

2013年に入り、IEもバージョン10が出て、Webサイト制作の状況もかなり変わってきております。Webサイト制作においても一般的にIE6～7はサポート対象外になり、CSSもバージョン3が主流となってきました。

当サイトでもその流れを汲み、このCSSテンプレートはIE10以上のブラウザ対象になっております。IEの下位バージョンでもレイアウト崩れを起こすことはないようにしておりますが、デザインが大きく異なって見えてしまいます。

これも、できるだけカスタマイズして欲しいという意図の現れでもあります。画像を使用することにより、IEの下位バージョンでもデザインを同じにすることは可能なのですが、そうすると色変更等に画像編集ソフトが必要となり、デザインに汎用性を持たせることができません。

一方で、画像を使用していないため、編集する際に画像編集が必要なく、CSSで自由に色の変更やグラデーションの変更が行えるようになっています。

見出しのグラデーションを変更するには、Webサービスを利用すると簡単にCSSを取得できます。色々あるのですが、サンプルからグラデーションのデザインを選ぶことのできるGrad3がお勧めです。

テンプレートサイズについて

完全幅固定タイプです。
全体的な横幅は960px、メインコンテンツ部分620px（余白除く）、サブコンテンツ部分300px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。

インデックスページの画像のスライドショーについて

画像がフェードしながら自動で切り替わるように設定しています。切り替わる時間やフェードの時間などいろいろオプションが変更できます。サンプル画像は当方で撮影したものです。画像を差し替えてご利用ください。
詳しい使い方は、「jQueryで画像やテキストを自動で切り替える [Cool Web Window]」をご参考ください。

ページトップへの戻りリンクについて

ページトップへの戻りリンクは、ページの右下に配置しており、スクロールすると現れる仕組みになっています。こうすることにより、ページトップへの戻りリンクが目に入りやすく、ユーザにこのリンクを、より活用していただけるのではないかと思います。

JavaScript(jQuery）の使用について

当CSSデザインテンプレートでは、JavaScript(jQueryライブラリ）を使用しています。使用している箇所は、インデックスページのスライドショー、インデックスページのスライドショー下の3つコンテンツが並んでいるエリア、ページトップへの戻りリンクです。そのため、JavaScriptを有効にしていないブラウザではレイアウト崩れを起こしてしまいますので、ご留意ください。

カスタマイズについて

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

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

サンプルタグについて

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

h2タグ

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
ページのトップへ戻る