見出し1: h1

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

見出し2: h2

見出し3: h3

本文本文本文本文本文本文本文本文本文リンク文本文本文本文本文本文本文本文本文本文本太字本文イタリック本文下線本文~~打消し線~~文本文本文本文本文^上付き本文本_下付き本文本文本文本文本文本文本文本文本文本文本文本文本文本文

「ビジュアル」で左寄せ

「ビジュアル」で中央揃え

「ビジュアル」で右寄せ

見出し4: h4

見出し5: h5

見出し6: h6

中黒リスト: ul

中黒
bbb本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
ccc本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

数字リスト: ol

数字
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

中黒なしリスト: ul.ls-none

中黒無し
bbb本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
ccc本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

※リスト: ul.kome

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

枠線なしテーブル: table

A	B	C	D
1	2	3	4
5	6	7	8

線なし＋色無し（default）
※必ずテーブルタグを「div.table-wrapper」で包むこと

枠線ありテーブル: table.table-1

A	B	B	D
1	2	3	4
5	6	7	8

線あり＋色無し

プロフィール・歴史色付きテーブル: table.table-2

A	B	B	D
1	2	3	4
5	6	7	8

両サイド線無し＋線あり＋TH色有り＋高さ広く、thead部分は濃い色になる

色付きテーブル: table.table-3

A	B	B	D
1	2	3	4
5	6	7	8

線あり＋TH色有り、thead部分は濃い色になる

スマホのみ対応: table.table-block-sp

1	2	3	4
5	6	7	8

改行禁止: table.nowrap-all 他

table.nowrap-all	全部nowrap
table.nowrap-th	THだけnowrap
table.nowrap-td	TDだけnowrap
span.nowrap	対象をnowrap

改行禁止のサンプル: table.table-2.nowrap-all

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト	ダミーテキスト	ダミーテキスト	ダミーテキスト
1	2	3	4
5	6	7	8

小さいフォントサイズ: .small

小さいフォントサイズ

普通フォントサイズ: .normal

普通フォントサイズ

大きいフォントサイズ: .large

大きいフォントサイズ

縦スペース用: hr.space-05, ～ hr.space-4

縦スペース用

.space-05　0.5行

.space-1　1行

.space-2　2行

.space-3　3行

.space-4　4行

.space-5　5行

.space-dott

画像中寄せ: .aligncenter

中寄せ

画像左寄せ: .alignleft

左寄せ
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

画像右寄せ: .alignright

右寄せ
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

clearfix: hr.clear

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

「hr.clear」を挿入しないと、右の画像は上の段落の右に表示されます。

グリッド: sample1

.col-1

<div class="row">
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
</div>

「.row」で包んで
「.col-数字」でグリッド幅の指定をします。
<p> はmarginがあるので、<div>を使用してください。

グリッドの総数は「12」

イメージグリッド: sample-2

左

中央

右

左

中央

右

横幅: .w-0 ～ .w-12

class="w-1" ～ class="w-12"
.w-12{width:100%}
.w-11_5{width:95.83333333%;}
.w-11{width:91.66666667%}
.w-10_5{width:87.5%;}
.w-10{width:83.33333333%}
.w-9_5{width:79.16666667%;}
.w-9{width:75%}
.w-8_5{width:70.83333333%;}
.w-8{width:66.66666667%}
.w-7_5{width:62.5%;}
.w-7{width:58.33333333%}
.w-6_5{width:54.16666667%;}
.w-6{width:50%}
.w-5_5{width:45.83333333%;}
.w-5{width:41.66666667%}
.w-4_5{width:37.5%;}
.w-4{width:33.33333333%}
.w-3_5{width:29.16666667%;}
.w-3{width:25%}
.w-2_5{width:20.83333333%;}
.w-2{width:16.66666667%}
.w-1_5{width:12.5%;}
.w-1{width:8.33333333%}
.w-0_5{width:4.16666667%}
.w-0{width:auto;}

イメージ横並び

左

中央

右

枠

テキストリンク: a.text-link

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

テキストリンク: h2 a.text-link

本文本文

画像スタイルサンプル

・ただの枠　スタイル：border_box

・影付き　スタイル：border_shadow

・左右傾け　右スタイル：tilt_right

・左右傾け　左スタイル：tilt_left

・点線　スタイル：border_dotted

・ドット　スタイル：border_dot

・破線　スタイル：border_dashed