見出し1: h1

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


見出し2: h2

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

見出し3: h3

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

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

「ビジュアル」で左寄せ

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

「ビジュアル」で右寄せ

見出し4: h4

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

見出し5: h5

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

見出し6: h6

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

中黒リスト: ul

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

数字リスト: ol

  1. 数字
  2. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  3. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  4. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  5. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  6. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  7. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  8. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  9. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  10. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  11. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  12. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  13. 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

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

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

※リスト: ul.kome

  • 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  • 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
  • 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

枠線なしテーブル: table

ABCD
1234
5678

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

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

ABBD
1234
5678

線あり+色無し

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

ABBD
1234
5678

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

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

ABBD
1234
5678

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

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

1234
5678

改行禁止: table.nowrap-all 他

table.nowrap-all全部nowrap
table.nowrap-thTHだけnowrap
table.nowrap-tdTDだけnowrap
span.nowrap対象をnowrap

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

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
1234
5678

小さいフォントサイズ: .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

top_img

中寄せ

画像左寄せ: .alignleft

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

画像右寄せ: .alignright

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

clearfix: hr.clear

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


care

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

グリッド: sample1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.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

top_img

top_img
中央

top_img

top_img

top_img
中央

top_img

横幅: .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;}

イメージ横並び

top_img

top_img
中央

top_img

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


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

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