Bootstrap4 小さな道具

Bootstrap4 小工具

この記事では、Bootstrap4の便利なユーティリティクラスについて解説します。これらのクラスを利用することで、Webページのスタイルや要素の外観、振る舞いを簡単にカスタマイズできます。

色

Bootstrap4は、テキスト、背景、枠線の色を設定するための定義済みカラークラスを提供しています。

テーマカラー

主要なカラー: primary、secondary、success、danger、warning、info、light、dark
補助的なカラー: 主要なカラーに対応し、より明るい色合いを提供します

テキストカラー

text-{color}クラスを使用してテキストの色を設定できます。

<p class="text-primary">主要なカラーのテキストです。</p>

背景色

bg-{color}クラスを使用して背景色を設定できます。

<div class="bg-secondary">補助的なカラーの背景です。</div>

表示属性

表示/非表示

d-{breakpoint}-{value}クラスを使用して、画面サイズに応じて要素を表示または非表示にできます。

breakpoint: xs、sm、md、lg、xl
value: none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex

<div class="d-none d-md-block">中画面サイズ以上で表示されます</div>

表示属性ユーティリティ

d-{value}クラスを使用して、要素の表示属性を設定できます。

value: block、inline-block、inline、none、table、table-row、table-cell、flex、inline-flex

<span class="d-block">ブロックレベル要素として表示されます</span>

フロート

フロートユーティリティ

float-{value}クラスを使用して、要素のフロート方法を設定できます。

value: left、right、none

<img src="..." class="float-left" alt="...">

フロートのクリア

clearfixクラスを使用して、フロートをクリアできます。

<div class="clearfix"></div>

位置

相対位置: position-relativeクラスを使用します。
絶対位置: position-absoluteクラスを使用します。
固定位置: position-fixedクラスを使用します。
粘着位置: position-stickyクラスを使用します。

枠線

枠線の追加/削除

border、border-top、border-right、border-bottom、border-left、border-0クラスを使用して、要素の枠線を追加または削除できます。

枠線の色

border-{color}クラスを使用して、枠線の色を設定できます。

角丸

rounded、rounded-top、rounded-right、rounded-bottom、rounded-left、rounded-circle、rounded-pillクラスを使用して、角丸を設定できます。

影

影の追加/削除

shadow-none、shadow-sm、shadow、shadow-lgクラスを使用して、要素の影を追加または削除できます。

余白

パディング

p-{sides}-{size}、pt-{size}、pr-{size}、pb-{size}、pl-{size}クラスを使用して、要素のパディングを設定できます。

マージン

m-{sides}-{size}、mt-{size}、mr-{size}、mb-{size}、ml-{size}クラスを使用して、要素のマージンを設定できます。

sides: t、b、l、r、x、y、blank（全辺）
size: 0、1、2、3、4、5、auto

垂直方向の配置

垂直方向の配置ユーティリティ

align-baseline、align-top、align-middle、align-bottom、align-text-top、align-text-bottomクラスを使用して、要素の垂直方向の配置方法を設定できます。

サイズ

幅

w-25、w-50、w-75、w-100クラスを使用して、要素の幅を設定できます。

高さ

h-25、h-50、h-75、h-100クラスを使用して、要素の高さを設定できます。

ビューポート幅

vw-100クラスを使用して、要素の幅をビューポート幅の100％に設定できます。

ビューポート高さ

vh-100クラスを使用して、要素の高さをビューポート高さの100％に設定できます。

テキストのタイポグラフィ

テキストの配置

text-left、text-center、text-right、text-justifyクラスを使用して、テキストの配置方法を設定できます。

テキストの変換

text-lowercase、text-uppercase、text-capitalizeクラスを使用して、テキストの変換方法を設定できます。

テキストの太さ

font-weight-bold、font-weight-light、font-weight-normalクラスを使用して、テキストの太さを設定できます。

テキストのスタイル

font-italic、font-style-normalクラスを使用して、テキストのスタイルを設定できます。

行の高さ

lh-1クラスを使用して、行の高さを設定できます。

1行のテキストの切り捨て

text-truncateクラスを使用して、1行のテキストがオーバーフローした場合の表示方法を設定できます。

折り返し

text-wrap、text-nowrapクラスを使用して、テキストを折り返すかどうかを制御できます。

埋め込み

レスポンシブ埋め込み

embed-responsive、embed-responsive-16by9、embed-responsive-4by3クラスを使用して、レスポンシブな埋め込み要素を作成できます。

まとめ

Bootstrap4は、Webページのレイアウトやスタイルをすばやく構築するための豊富なユーティリティクラスを提供しています。これらのユーティリティクラスを習得することで、開発効率を大幅に向上させることができます。