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)

URL内部リンクの表示です。

URL外部リンクの表示です。

横並び2カラム

flex-item pt-10 bg-gray
flex-item pt-10 bg-gray

横並び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. 項目1
  2. 項目2
  • 見出し無しul
  • 見出し無しul
  1. 見出し無しol
  2. 見出し無し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;