h1見出しです。h1見出しです。h1見出しです。h1見出しです。h1見出しです。h1見出しです。h1見出しです。h1見出しです。h1見出しです。
背景を画像にする場合は、「.bg-image」を使い、直下子要素のimg要素に「.object-fit」を使用してください。
h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。h2テキストが入ります。
h3テキストが入ります。h3テキストが入ります。h3テキストが入ります。h3テキストが入ります。h3テキストが入ります。h3テキストが入ります。h3テキストが入ります。h4テキストが入ります。h4テキストが入ります。
h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。h4テキストが入ります。
h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。h5テキストが入ります。
中央寄せテキスト txt-align-center 中央寄せテキスト
左寄せテキス txt-align-left 左寄せテキスト
右寄せテキスト txt-align-right 右寄せテキスト
weight:700(bold) weight:700(bold) weight:700(bold) weight:700(bold) weight:700(bold) weight:700(bold)
weight:900(black) weight:900(black) weight:900(black) weight:900(black) weight:900(black)
横並び2カラム
横並び3カラム
横並び4カラム(SPでは2カラム)
横並びカラムをSPでは1カラムにする場合は「.sp_b」を使用する
同様にPCだけなら「.pc_b」、Padだけなら「.pad_b」を使用する
パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネル
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネル
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
横並び2カラム
パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネル
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネルのtitleが入ります。パネル
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
横並び3カラム
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
横並び4カラム(SPでは2カラム、1カラムにする場合は「.sp_b」を使用する)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
| テーブル（4カラム）_見出し | テーブル（4カラム）_見出し |
|---|---|
| 項目 | 項目 |
横並び2カラム
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
横並び3カラム
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
横並び4カラム(SPでは2カラム、1カラムにする場合は「.sp_b」を使用する)
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
| テーブル見出し | テーブル見出し |
|---|---|
| 項目 | 項目 |
画像とテキスト(SPで1カラムにする場合は「.sp_b」を使用する)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
画像とテキストを反対にする場合は、「.fd-rr」を使用(SPで1カラムにした場合、順は戻る)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。
- dt
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキステキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- dt
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- dt
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リスト1（ul）見出し
- 項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1
- 項目2
リスト1（ol）見出し
- 項目1
- 項目2
- 見出し無しul
- 見出し無しul
- 見出し無しol
- 見出し無しol
display
| .pc_b | display:block(PCのみ、その他display:none) |
|---|---|
| .pc_i | display:inline(PCのみ、その他display:none) |
| .pc_ib | display:inline-block(PCのみ、その他display:none) |
| .pc_f | display:flex(PCのみ、その他display:none) |
| .pad_b | display:block(Padのみ、その他display:none) |
|---|---|
| .pad_i | display:inline(Padのみ、その他display:none) |
| .pad_ib | display:inline-block(Padのみ、その他display:none) |
| .pad_f | display:flex(Padのみ、その他display:none) |
| .sp_b | display:block(SPのみ、その他display:none) |
|---|---|
| .sp_i | display:inline(SPのみ、その他display:none) |
| .sp_ib | display:inline-block(SPのみ、その他display:none) |
| .sp_f | display:flex(SPのみ、その他display:none) |
margin
| .mt-1 ~ .mt-20 | margin-top: 10~200px |
|---|---|
| .mb-1 ~ .mb-20 | margin-bottom: 10~200px |
| .ml-1 ~ .ml-20 | margin-left: 10~200px |
| .mr-1 ~ .mr-20 | margin-right: 10~200px |
padding
| .pt-1 ~ .pt-20 | padding-top: 10~200px |
|---|---|
| .pb-1 ~ .pb-20 | padding-bottom: 10~200px |
| .pl-1 ~ .pl-20 | padding-left: 10~200px |
| .pr-1 ~ .pr-20 | padding-right: 10~200px |
font-size
| .fs-10 ~ .fs-50 | font-size: 10~50px |
|---|
line-height
| .lh-10 ~ .lh-30 | line-height: 1、 1,1、 1.2... ~ 3まで |
|---|
color
| .c-white | color: #fff; |
|---|---|
| .c-black | color: #000; |
| .c-gray | color: #d5dae0; |
| .c-lightgray | color: #e4e7eb; |
| .c-red | color: #f00; |
| .c-blue | color: #00f; |
| .c-lime | color: #0f0; |
| .c-yellow | color: #ff0; |
| .c-cyan | color: #0ff; |
| .c-magenta | color: #f0f; |
| .c-lilac | color: #d0cee9; |
| .c-lavender | color: #ede9f3; |
| .c-dodgerblue | color: #1e96d5; |
| .c-grayishblue | color: #ecf0f4; |
border-radius
| .br-1 ~ .br-10 | border-radius: 10~100px |
|---|
border-width
| .bw-1 ~ .bw-10 | border-width: 1~10px |
|---|
border-color
| .bc-white | border-color: #fff; |
|---|---|
| .bc-black | border-color: #000; |
| .bc-gray | border-color: #d5dae0; |
| .bc-lightgray | border-color: #e4e7eb; |
| .bc-red | border-color: #f00; |
| .bc-blue | border-color: #00f; |
| .bc-lime | border-color: #0f0; |
| .bc-yellow | border-color: #ff0; |
| .bc-cyan | border-color: #0ff; |
| .bc-magenta | border-color: #f0f; |
| .bc-lilac | border-color: #d0cee9; |
| .bc-lavender | border-color: #ede9f3; |
| .b-dodgerblue | border-color: #1e96d5; |
| .bc-grayishblue | border-color: #ecf0f4; |
background
| .bg-image |
直下においたimg要素に「.object-fit」を付与すると背景になります。(必ず上下左右中央のcover)
|
|---|---|
| .bg-white | background: #fff; |
| .bg-black | background: #000; |
| .bg-gray | background: #d5dae0; |
| .bg-lightgray | background: #e4e7eb; |
| .bg-red | background: #f00; |
| .bg-blue | background: #00f; |
| .bg-lime | background: #0f0; |
| .bg-yellow | background: #ff0; |
| .bg-cyan | background: #0ff; |
| .bg-magenta | background: #f0f; |
| .bg-lilac | background: #d0cee9; |
| .bg-lavender | background: #ede9f3; |
| .bg-dodgerblue | background: #1e96d5; |
| .bg-grayishblue | background: #ecf0f4; |