背景を画像にする場合は、「.bg-image」を使い、直下子要素のimg要素に「.object-fit」を使用してください。
中央寄せテキスト 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カラムにした場合、順は戻る)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。
リスト1(ul)見出し
リスト1(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; |