あなたのサイト名などお書きください

制作者より

非常にシンプルな1カラムのCSSデザインテンプレートです。ギャラリーサイトや写真を並べるのにはちょうどよいシンプルさだと思います。blogのデザインとしてもよいですよね。

デザイン的には個人サイト向けなのですが、商用サイトでもお使いいただけるので、商用サイト向けのCSSデザインプレートのカテゴリに入れました。

完全幅固定タイプです。全体的な横幅は740pxで、左右にそれぞれ20pxの余白を設けています。

このテンプレートはfamfamfam.comやフリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」のようなミニマムなアイコンがすごく似合うと思います。上部のアイコンは当サイトのオリジナルになります。もし他のサイトで配布しているアイコンを使用する場合は、それぞれのライセンス規約にしたがって使用してください。

カスタマイズについて

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

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

画像について

画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。

ページ上部への戻りリンクについて

ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。

カスタマイズについて

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

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

サンプルタグについて

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

INFORMATION

2009-04-28: ○○新聞に取材を受けました。
2009-04-24: 休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。

タグサンプル

h3タグ

h4タグ

h5タグ

h6タグ

強調（em） より強い強調（strong） 追加（ins） ~~削除（del）~~
テキストアンカー

定義リスト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

フォトサンプル

小さなお花が咲きました。

blog記事やフォトギャラリーを想定して制作しました。写真をポラロイド風にします。写真の後ろの段落は回り込むようにしてあります。

写真の横幅は固定してください。サンプルでは、横200pxの画像を使用しています。指定する幅は写真＋ボーダー2px＋余白20px（左右10pxずつ）の計222pxになります。

枠の色はCSSで指定してあるので自由に色を変えることができます。影の部分は画像を使用しています。

次の要素も回り込むので、回り込みをしたくない場合は、回り込みを解除してください。

下のように写真を並べることも出来ます。そのような場合は、ulに｢class="pola"｣を指定してください。ここはinline-bloackを使って横並びにしているので、ブラウザの仕様のためどうしても半角分のスペースが空いてしまいます。それを回避したい場合は、ulに｢letter-spacing:-0.4em｣を指定して隙間を埋めることができます。サンプルでは左側に余白を設けたいので、marginで10pxの隙間を空けています。ああ、でもブラウザチェックしててOperaで修正されていないことに気づきました。とりあえずOperaは保留です。HTMLソースコードを変更すると何とかなりますけども･･･。