制作者より

カーショップやサイクルショップ、スポーツショップ、ジムなど大人っぽくてかっこいいイメージやアクティブなイメージを出したいホームページに適したCSSデザインテンプレートです。

試しにサイクルショップにアレンジしてみました。サンプルのように大きな写真を使用するとよりサイトが引き締まった印象になりますね。

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

画像なしのサンプルページについて

アイキャッチ画像のないページも用意しました。トップページ以外のページにお使いください。

画像なしのページはこちらから

サンプル画像について

ロゴに使用している自転車のシルエットは、商用フリーで使える影絵素材サイト シルエットデザイン様[自転車の影絵素材その１（真横バージョン）]からお借りしております。psdデータは規約上の都合により同梱しておりませんのでご了承ください。

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

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

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

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

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

このCSSテンプレートでも実験的に「プログレッシブ エンハンスメント」を取り入れてみました。まずは、上部のメニューにはCSS3のプロパティを使用しております。CSS3に対応しているブラウザで閲覧するとアクティブな動きになっているのがわかると思います。CSS3に対応していないブラウザで閲覧してもデザイン的には見劣りしますが、情報はきちんと表示されます。また、ページへ戻るリンクはJavaScriptを用い、スムースに上部へ戻るようになっています。

サンプルについて

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

INFORMATION

2010-07-20
本日より8月31日まで、タイヤのパンク修理が30%OFFです。
2009-07-01
シマノの新作ロードバイクを入荷いたしました！限定3台です。詳細はこちらから。

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要素にはインライン要素しか記述することができません。