コンポーネントの見本

このphpは見出しやcomponentの見本を掲載しています。
完成したらその都度削除したほうがいいかもしれません。

スペーシング カラー 見出し 画像比率調整 テキスト ボタン テーブル リスト タブ アコーディオン

スペーシング

余白（16remベース、0.125rem単位）

rem値 px値
0.125rem 2px
0.25rem 4px
0.375rem 6px
0.5rem 8px
0.625rem 10px
0.75rem 12px
0.875rem 14px
1rem 16px
1.125rem 18px
1.25rem 20px
1.375rem 22px
1.5rem 24px
1.625rem 26px
1.75rem 28px
1.875rem 30px
2rem 32px
2.125rem 34px
2.25rem 36px
2.375rem 38px
2.5rem 40px
2.625rem 42px
2.75rem 44px
2.875rem 46px
3rem 48px
4rem 64px
5rem 80px
6rem 96px
8rem 128px
10rem 160px
12rem 192px
16rem 256px

カラーパレット

テーマカラー・カラーパレット変数

--main
--main-light
--main-dark
--sub
--sub-light
--sub-dark
--sub2
--sub2-light
--sub2-dark
--gray
--gray-light
--gray-dark

1. 見出し

h2見出し

h2.headline.text-main

h2.headline.bg.bg-main

h2.headline.text-yellow

h2.headline.border-b.border-main

h2.headline.border-s.border-main

h2.headline.border-y.border-main

h2.headline.border-sb.border-main

h2.headline.border-b.border-sub

h2.headline.border-s.border-sub

h2.headline.border-y.border-sub

h2.headline.border-sb.border-sub

h3見出し

h3.headline.text-main

h3.headline.bg.bg-main

h3.headline.text-yellow

h3 .headline.text-main

h3.headline.border-b.border-main

h3.headline.border-s.border-main

h3.headline.border-y.border-main

h3.headline.border-sb.border-main

h3.headline.border-b.border-sub

h3.headline.border-s.border-sub

h3.headline.border-y.border-sub

h3.headline.border-sb.border-sub

h4見出し

h4 .headline.text-main

h4.headline.bg.bg-main

h4.headline.text-yellow

h4.headline.border-b.border-main

h4.headline.border-s.border-main

h4.headline.border-y.border-main

h4.headline.border-sb.border-main

h4.headline.border-b.border-sub

h4.headline.border-s.border-sub

h4.headline.border-y.border-sub

h4.headline.border-sb.border-sub

h5見出し
h5 .headline.text-main
h5.headline.bg.bg-main
h5.headline.text-yellow
h5.headline.border-b.border-main
h5.headline.border-s.border-main
h5.headline.border-y.border-main
h5.headline.border-sb.border-main
h5.headline.border-b.border-sub
h5.headline.border-s.border-sub
h5.headline.border-y.border-sub
h5.headline.border-sb.border-sub
h6見出し
h6 .headline.text-main
h6.headline.bg.bg-main
h6.headline.text-yellow
h6.headline.border-b.border-main
h6.headline.border-s.border-main
h6.headline.border-y.border-main
h6.headline.border-sb.border-main
h6.headline.border-b.border-sub
h6.headline.border-s.border-sub
h6.headline.border-y.border-sub
h6.headline.border-sb.border-sub

テキスト

フォントなど

.mincho 明朝体

.lh-lg 行間広め

テキストリンク

リンク下線あり class="text-primary text-decoration-underline"

リンク無効 class="pe-none"

背景付きテキスト

.text-main

.bg-main text-white p-3 mb-2 rounded-3

.bg-sub text-white p-3 mb-2 rounded-3

.bg-sub2 text-white p-3 mb-2 rounded-3

shadow-sm p-3 mb-2 rounded-3

.bg-main--light p-3 mb-2 rounded-3

.bg-sub--light p-3 mb-2 rounded-3

.bg-sub2--light p-3 mb-2 rounded-3

.border border-main ボーダー

画像比率調整

3:2の他、1:1、4:3、16:9のクラスがあります

<div class="ratio ratio-3x2">
 <img src="noimg.jpg" class="object-fit-contain" />
</div>

<div class="ratio ratio-3x2">
 <img src="noimg.jpg" class="object-fit-cover" />
</div>

2. ボタン

default、outline
アイコンを変えたもの（内部リンク、外部リンク、ファイル形式）

標準ボタン

class="btn btn--main" 標準ボタン

class="btn btn--sub" サブカラーボタン

class="btn btn--outline-main" アウトラインボタン

class="btn btn--outline-sub" アウトラインボタン

角丸ボタン（Bootstrap rounded-pill）

class="btn btn--main rounded-pill" 角丸メインボタン

class="btn btn--sub rounded-pill" 角丸サブボタン

ボタン無効

class="btn btn--main disabled" ボタン無効

アイコン付きボタン

class="btn btn--main btn--arrow btn--with-icon" 内部リンク

class="btn btn--outline-main btn--arrow btn--with-icon" 内部リンク

class="btn btn--main btn--external btn--with-icon" 外部リンク

class="btn btn--outline-main btn--external btn--with-icon" 外部リンク

class="btn btn--main btn--pdf btn--with-icon" PDFリンク

class="btn btn--outline-main btn--pdf btn--with-icon" PDFリンク

サイズバリエーション

class="btn btn--main btn-sm" 小さめボタン

class="btn btn--main w-100" 幅100%ボタン

class="btn btn--main btn--min-reset" 最小幅リセットボタン

class="btn btn--main min-w-100" min-width ボタン

class="btn btn--main min-w-200" min-width 200px

class="btn btn--main min-w-300" min-width 300px

アイコン付きボタン（サイズ変更）

class="btn btn--main btn--arrow btn--with-icon btn-sm" 小さいボタン中央寄せ

class="btn btn--outline-main btn--external btn--with-icon btn-sm" 外部リンク中央寄せ

class="btn btn--outline-main btn--pdf btn--with-icon btn-sm" PDF中央寄せ

注意： 以前の属性セレクタ（[href$=\".html\"]、[target=\"_blank\"][href^=\"http\"]など）は廃止され、明示的なクラス（btn--arrow、btn--external、btn--pdf）を使用するよう変更されました。

3. テーブル

table class="table"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table--th-main"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-lg"(タテ幅広め)

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table no-responsive"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered table-color"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered" thead

thead Header 1 thead Data 1
Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table--top-header"

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

table class="table table--has-total"

Header 1 Data 1 Data 1
Header 2 Data 2 Data 2
Header 3 Data 3 Data 3

table class="table table--two-header"

※thead左上のすきまは空タグに反応するようになっているから、thead内左上以外は空タグにしないでね。

Header 2 Header 3 Header 4
Header 1 Data 1 Data 1 Data 1
Header 2 Data 2 Data 2 Data 2
Header 3 Data 3 Data 3 Data 3

4. リスト

  • ul class="list--dot"
  • 丸
  • ul class="list--sq"
  • 四角
  1. ol
  2. 丸番号
  1. ol class="list--round-num"
  2. 丸番号
  1. ol class="list--sq-num"
  2. 四角番号

5. タブ

ul class="nav nav--default nav-pills"

ul class="nav nav--default nav-pills"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

ul class="nav nav--default nav-pills nav--btn"

ul class="nav nav--default nav-pills nav--btn"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

ul class="nav nav--default nav-tabs"

ul class="nav nav--default nav-tabs"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

verticalタブ class="tab-vertical"

  • カテゴリー01
  • カテゴリー02
  • カテゴリー03

6. アコーディオン

背景色 div class="accordion accordion__bg"

これが最初のアイテムのアコーディオン本体。...

これは2番目のアイテムのアコーディオン本体。...

これは3番目のアイテムのアコーディオン本体。...

下線 div class="accordion accordion__line"

これが最初のアイテムのアコーディオン本体。...

これは2番目のアイテムのアコーディオン本体。...

これは3番目のアイテムのアコーディオン本体。...