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

制作者より

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

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

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

各種コンテンツについて

各種コンテンツの制作も賜っております。

サンプルについて

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

INFORMATION

2009-10-11: ギャラリーページを制作しました。
2009-09-01: サイトを公開しました。

タグサンプル

h3タグ

h4タグ

h5タグ

h6タグ

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

定義リスト1: 定義した用語の説明
定義リスト2: 定義した用語の説明
定義リスト3: 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

フォトサンプル

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

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

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

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

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

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