見出しのサンプル

見出し１見出し１見出し１見出し１見出し１見出し１

解説：見出し１は基本的に１ページに１つしか使用が認められていません。当サイトではコンテナのタイトルですでにh1を使っているので、本文中にはつかわないでください。
見出しタグはすべてclear:bothがかかっています。floatで左右に振り分けた部分には見出しを適用できないので注意してください。
本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し２見出し２見出し２見出し２見出し２見出し２

本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し３見出し３見出し３見出し３見出し３見出し３

本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し４見出し４見出し４見出し４見出し４見出し４

本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し５見出し５見出し５見出し５見出し５見出し５

本文本文本文本文本文本文本文本文本文本文本文本文本文

見出し６見出し６見出し６見出し６見出し６見出し６

本文本文本文本文本文本文本文本文本文本文本文本文本文

画像の回り込みサンプル

imgタグに「class="imgRight"」を入れると、画像が右に回り込み、左と下に15pxの余白が付きます。本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト

imgタグに「class="imgLeft"」を入れると、画像が左に回り込み、右と下に15pxの余白が付きます。本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト

テーブルのサンプル

標準テーブル

項目名

100

200

300

400

項目名

あいうえお

かきくけこ

さしすせそ

tableタグに“listTable”クラスをあてると、薄いグレーの罫線のついた表になります。
listTableテーブルにcaptionタグを入れると、アンダーラインのついたタイトルになります。
listTableテーブルのtdは背景は無色です。
listTableテーブルのthは背景は薄いグレーです。
listTableテーブルのtrに“listTableHead”クラスをあてると、背景がやや濃いグレーになります。
listTableテーブルのthに“listTableEmptycell”クラスをあてると、背景が無色になり、左上に使用した場合のみ罫線がなくなります。

項目名

あいうえお

かきくけこ

さしすせそ

listTableテーブルにさらにtableタグを入れ子に入れた場合、そのテーブルには線・背景色などはつきません。

※ここにはテーブルが入れ子で入っていますが、線や色はつきません。

項目名

あいうえお

かきくけこ

さしすせそ

入れ子にしたtableにラインを入れたい場合は、その入れ子にしたテーブルのtableタグに“listTableInner”クラスをあててください。
“listTableInner”クラスをあてたテーブルのthは、背景色が薄いグレーになり周囲に点線が入ります。
“listTableInner”クラスをあてたテーブルのtdは、周囲に点線が入ります。

000	※ここには“listTableInner”クラスをあてたテーブルが入っています。
111	222

余白のないテーブルをつくりたい場合は以下を参考にしてください

余白なしテーブル
	項目名	項目名	項目名	項目名
項目名	あいうえお	かきくけこ	さしすせそ	tableタグの“listTable”のあとに半角スペースを入れ“noPadding”を追加すると、セルの余白がゼロになります。（class=“listTable noPadding”)