仕様書（仮）

アイコンを変えたい

青文字Spanタグがアイコン箇所になります。

① Bootstrap Iconサイトにて変更したいアイコンを選択

② 遷移先ページ右側にあるアイコンフォントよりクラスをコピー

③ spanタグ 元のクラスと差し替え
※時計アイコンに変更

リストを変えたい

• テキストテキストテキストテキスト
• テキストテキストテキストテキスト
• テキストテキストテキストテキスト

• テキストテキストテキストテキスト
• テキストテキストテキストテキスト
• テキストテキストテキストテキスト

青文字ulタグにlist_discクラス付与

• テキストテキストテキストテキスト
• テキストテキストテキストテキスト
• テキストテキストテキストテキスト

青文字ulタグにList_checkクラス付与

• テキストテキストテキストテキスト
• テキストテキストテキストテキスト
• テキストテキストテキストテキスト

青文字ulタグにList_checkクラス付与
liタグにカラーコードクラス付与

• テキストテキストテキストテキスト
• テキストテキストテキストテキスト
• テキストテキストテキストテキスト

青文字liタグにarrow-link-afterクラス付与

フォントサイズを変えたい

テキストテキストテキスト

テキストテキストテキスト

青文字pタグにfz26クラス付与
※fz**となっており**に任意の数字で適用
※10px ~ 50pxまで適用可

テキストテキストテキスト

青文字pタグにfz**クラス付与でスマホフォントサイズ適用
fz-md-**クラス付与でPCフォントサイズ適用

色を変えたい

青文字divタグにbg-**クラス付与で背景色適用
※bg-**となっており**にカラークラスで適用

テキストテキストテキスト

青文字pタグにtext-**クラス付与で背景色適用
※text-**となっており**にカラークラスで適用

空白調整したい（Bootstrap Original）

p-0 padding: 0;
p-1 padding: 0.25rem;
p-2 padding: 0.5rem;
p-3 padding: 1;
p-4 padding: 1.5;
p-5 padding: 3;

px-0 padding-right: 0; padding-left: 0;
px-1 padding-right: 0.25rem; padding-left: 0.25rem;
px-2 padding-right: 0.5rem; padding-left: 0.5rem;
px-3 padding-right: 1rem; padding-left: 1rem;
px-4 padding-right: 1.5rem; padding-left: 1.5rem;
px-5 padding-right: 3rem; padding-left: 3rem;

py-0 padding-top: 0; padding-bottom: 0;
py-1 padding-top: 0.25rem; padding-bottom: 0.25rem;
py-2 padding-top: 0.5rem; padding-bottom: 0.5rem;
py-3 padding-top: 1rem; padding-bottom: 1rem;
py-4 padding-top: 1.5rem; padding-bottom: 1.5rem;
py-5 padding-top: 3rem; padding-bottom: 3rem;

pt-0 padding-top: 0;
pt-1 padding-top: 0.25rem;
pt-2 padding-top: 0.5rem;
pt-3 padding-top: 1rem;
pt-4 padding-top: 1.5rem;
pt-5 padding-top: 3rem;

pe-0 padding-right: 0;
pe-1 padding-right: 0.25rem;
pe-2 padding-right: 0.5rem;
pe-3 padding-right: 1rem;
pe-4 padding-right: 1.5rem;
pe-5 padding-right: 3rem;

pb-0 padding-bottom: 0;
pb-1 padding-bottom: 0.25rem;
pb-2 padding-bottom: 0.5rem;
pb-3 padding-bottom: 1rem;
pb-4 padding-bottom: 1.5rem;
pb-5 padding-bottom: 3rem;

ps-0 padding-left: 0;
ps-1 padding-left: 0.25rem;
ps-2 padding-left: 0.5rem;
ps-3 padding-left: 1rem;
ps-4 padding-left: 1.5rem;
ps-5 padding-left: 3rem;

MarginはPaddingのクラスをmに変更でMargin適用
p-1 padding: 0.25rem; → m-1 margin: 0.25rem;

Bootstrapの空白ユーティリティ詳細は公式ドキュメント参照

空白調整したい（Library Original）

p-0px padding: 0px;
p-1px padding: 1px;

p-**pxクラス付与でpadding適用
※p-**pxとなっており**は0~100まで可

pt-0px padding-top: 0px;
pt-1px padding-top: 1px;

pt-**pxクラス付与でpadding-top適用
※pt-**pxとなっており**は0~100まで可

pr-0px padding-right: 0px;
pr-1px padding-right: 1px;

pr-**pxクラス付与でpadding-right適用
※pr-**pxとなっており**は0~100まで可

pb-0px padding-bottom: 0px;
pb-1px padding-bottom: 1px;

pt-**pxクラス付与でpadding-bottom適用
※pb-**pxとなっており**は0~100まで可

pl-0px padding-left: 0px;
pl-1px padding-left: 1px;

pt-**pxクラス付与でpadding-left適用
※pt-**pxとなっており**は0~100まで可

MarginはPaddingのクラスをmに変更でMargin適用
p-1px padding: 1px; → m-1px margin: 1px;

スマホ → p-1px
PC → p-md-1px

レイアウトを変更したい

Bootstrapは横幅を12分割してレイアウトを構成してます。

3カラムの場合は1つのブロックを4ずつ使用することで再現（4×3のイメージ）

PC → 3カラム
SP → 1カラム

4カラムの場合は1つのブロックを3ずつ使用することで再現（3×4のイメージ）

12分割のため、3カラムのうち1つだけ横幅を小さくして他2つを広めにといったことも可能です。

PC → 3カラム
SP → 1カラム

紹介した記述以外にもレイアウト再現の方法はございます。
詳細は公式ドキュメントを参照ください

ビガーリンクについて

ビガーリンク使用時にリンクが1つの場合
aタグにtarget=“_blank” 使用可能

ビガーリンク使用時にリンクが複数の場合（blink-parents使用）
blink配下のaタグ全てにtarget=“_blank” 使用不可

ボタンを変えたい

背景／カラークラス
ホバーあり

青文字divタグにbtn btn-**クラス付与
※btn-**となっており**にカラークラスで適用
※基本的にテキスト色は黒ですが、背景色によっては白（視認性によって自動変更）

背景／カラークラス
テキスト／白
ホバー背景色／透明
ホバーテキスト／カラークラス

青文字divタグにbtn btn-**-wh-inversionクラス付与
btn-**-wh-inversionなっており**にカラークラスで適用

背景／カラークラス
テキスト／黒
ホバー背景／透明
ホバーテキスト
カラークラス

青文字divタグにbtn btn-**-bk-inversionクラス付与
btn-**-bk-inversionなっており**にカラークラスで適用

背景／透明
テキスト／カラークラス
ボーダー／カラークラス
ホバー背景／カラークラス
ホバーテキスト／黒

青文字divタグにbtn btn-outline-**クラス付与
btn-outline-**なっており**にカラークラスで適用
※基本的にホバーテキスト色は黒ですが、カラーによっては白（視認性によって自動変更）

背景／カラークラス
テキスト／白
ホバー背景／白
ホバーテキスト／カラークラス
ホバー／カラークラス

青文字divタグにbtn btn-**-wh-inversion-bg-whクラス付与
btn-**-wh-inversion-bg-whなっており**にカラークラスで適用

背景／カラークラス
テキスト／黒
ホバー背景／白
ホバーテキスト／カラークラス
ホバー／カラークラス

青文字divタグにbtn btn-**-bk-inversion-bg-whクラス付与
btn-**-bk-inversion-bg-whなっており**にカラークラスで適用

ボタンサイズを小さくしたい

青文字divタグに任意のボタンクラスを付与に加えてbtn-smクラス付与

ボタンサイズを大きくしたい

青文字divタグに任意のボタンクラスを付与に加えてbtn-lgクラス付与

注意点

基本的に同ブロック内の画像は一律して画像比率が揃った画像を推奨

スライダーでメディア配信する際はメディア配信数を4配信以上推奨
※4配信未満でも問題ございませんがスライダーの特性上、4配信以上を推奨しております