制作者より　メダカの村ページ作成中

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

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

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

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

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

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

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

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

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

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

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

カスタマイズについて

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

メダカの村運営にあたりご協力頂いておりますサイト様です。
めだかについて

サンプルタグについて

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

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