コピーテンプレート04【目次あり】
目次タイトルテキスト01タイトルテキストテキスト02タイトルテキストテキスト03タイトルテキストテキ...
labサポート
時計 アイコン
※時計アイコン
#br青文字Spanタグがアイコン箇所になります。
① Bootstrap Iconサイトにて変更したいアイコンを選択
② 遷移先ページ右側にあるアイコンフォントよりクラスをコピー
③ spanタグ 元のクラスと差し替え
※時計アイコンに変更
メール アイコン
メールアイコン
#br青文字ulタグにlist_discクラス付与
チェックマーク青文字ulタグにList_checkクラス付与
色付き チェックマーク青文字ulタグにList_checkクラス付与
liタグにカラーコードクラス付与
青文字liタグにarrow-link-afterクラス付与
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
@blue青文字pタグにfz26クラス付与
※fz**となっており**に任意の数字で適用
※10px ~ 50pxまで適用可
テキストテキストテキスト
テキストテキストテキスト
@blue青文字pタグにfz**クラス付与でスマホフォントサイズ適用
fz-md-**クラス付与でPCフォントサイズ適用
青文字divタグにbg-**クラス付与で背景色適用
※bg-**となっており**にカラークラスで適用
テキストテキストテキスト
テキストテキストテキスト
@blue青文字pタグにtext-**クラス付与で背景色適用
※text-**となっており**にカラークラスで適用
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の空白ユーティリティ詳細は公式ドキュメント参照
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;
テキストテキストテキスト
@blueスマホ → 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配信以上を推奨しております