【Bootstrap】様々なユーティリティクラスの使い方を紹介

Bootstrap

ユーティリティクラスとは、繰り返し使われる頻度の高いスタイルを設定したものです。

コンポーネントを配置した後、位置やスペース、色などの調整をするのに使われます。


今回は、様々なユーティリティクラスの使い方について紹介していきます(^^)

Color ユーティリティ

文字色を設定

text-{ 色の種類 } クラスを追加することで文字色を指定することができます。

<p class="text-primary">text-primary</p>
<p class="text-secondary">text-secondary</p>
<p class="text-success">text-success</p>
<p class="text-danger">text-danger</p>
<p class="text-warning">text-warning</p>
<p class="text-info">text-info</p>
<p class="text-light bg-dark">text-light</p>
<p class="text-dark">text-dark</p>
<p class="text-body">text-body</p>
<p class="text-muted">text-muted</p>
<p class="text-white bg-dark">text-white</p>
<p class="text-black-50">text-black-50</p>
<p class="text-white-50 bg-dark">text-white-50</p>

背景色を設定

bg-{ 色の種類 } クラスを追加することで背景色を設定することができます。

<p class="bg-primary">bg-primary</p>
<p class="bg-secondary">bg-secondary</p>
<p class="bg-success">bg-success</p>
<p class="bg-danger">bg-danger</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-info">bg-info</p>
<p class="bg-light">bg-light</p>
<p class="bg-dark">bg-dark</p>
<p class="bg-white">bg-white</p>
<p class="bg-transparent">bg-transparent</p>

Border ユーティリティ

ボーダーの追加

要素の上下左右すべてにボーダーを表示するには border クラスを追加します。

辺を指定する場合は、border-{ 辺の位置 } クラスを追加します。

<span class="border>border</span>
<span class="border-top>border-top</span>
<span class="border-right>border-right</span>
<span class="border-bottom>border-bottom</span>
<span class="border-left>border-left</span>

ボーダーの削除

すべてのボーダーを削除するには border-0、辺を指定して削除する場合は border-{ 辺の位置 } クラスを追加します。

<span class="border border-0">border</span>
<span class="border border-top-0">border-top</span>
<span class="border border-right-0">border-right</span>
<span class="border border-bottom-0">border-bottom</span>
<span class="border border-left-0">border-left</span>

ボーダー色の設定

border クラスが設定された要素に border-{ 色の種類 } クラスを追加することでボーダー色を設定することができます。

<span class="border border-primary">border-primary</span>
<span class="border border-secondary">border-secondary</span>
<span class="border border-success">border-success</span>
<span class="border border-danger">border-danger</span>
<span class="border border-warning">border-warning</span>
<span class="border border-info">border-info</span>
<span class="border border-light">border-light</span>
<span class="border border-dark">border-dark</span>
<span class="border border-white">border-white</span>

角丸の設定

rounded クラス rounded-{ 角丸の種類 } クラスを追加することで、角丸を設定することができます。

<span class="rounded">rounded</span>
<span class="rounded-top">rounded-top</span>
<span class="rounded-right">rounded-right</span>
<span class="rounded-bottom">rounded-bottom</span>
<span class="rounded-left">rounded-left</span>
<span class="rounded-circle">rounded-circle</span>
<span class="rounded-0">rounded-0</span>

Display ユーティリティ

表示形式の設定

d-{ 表示形式 } クラスを追加することで、display プロパティで指定できる値(inline、block、none など)の表示形式にすることができます。

<div class="bg-dark">div要素</div>
<div class="bg-dark d-inline">div要素(d-inline)</div>
<hr>
<span class="bg-dark">span要素</span>
<span class="bg-dark d-block">span要素(d-block)</span>

Sizing ユーティリティ

幅の設定

要素の幅を設定するには w-{ 値(%) } クラスを追加します。

”値”には、25、50、75、100、auto が入ります。

<div class="w-25">w-25</div>
<div class="w-50">w-50</div>
<div class="w-75">w-75</div>
<div class="w-100">w-100</div>
<div class="w-auto">w-auto</div>

高さの設定

要素の幅を設定するには h-{ 値(%) } クラスを追加します。

”値”には、25、50、75、100、auto が入ります。

<div class="h-25 d-inline-block">h-25</div>
<div class="h-50 d-inline-block">h-50</div>
<div class="h-75 d-inline-block">h-75</div>
<div class="h-100 d-inline-block">h-100</div>
<div class="h-auto d-inline-block">h-auto</div>

最大幅・高さ100%の設定

要素に最大幅100%を指定するには mw-100 クラスを追加します。

ブラウザのサイズを拡大・縮小しても要素がコンテナ内に収まるようになります。


また、最大の高さを100%にせっていするには mh-100 クラスを追加します。

<img src="https://picsum.photos/1200/800" class="mw-100">

Spacing ユーティリティ

基本的な使い方

Spacing ユーティリティは、マージンやパディングを設定するものであり、そのクラスの書き方は、{ プロパティ }{ 辺の位置 }-{ ブレイクポイント }-{ サイズ } という組み合わせになります。

プロパティ

プロパティには、m(マージン)または p(パディング)が入ります。

辺の位置

辺の位置には、t(上辺)、b(下辺)、l(左辺)、r(右辺)または、左右の x 、上下の y が入ります。

これを省略すると、四辺すべてにマージンやパディングを適用します。

ブレイクポイント

ブレイクポイントには、sm、md、lg、xl が入ります。

サイズ

サイズには、0~5までの数字もしくは auto が入ります。

「0」は 0、
「1」は 0.25rem、
「2」は 0.5rem、
「3」は 1rem、
「4」は 1.5rem、
「5」は 3rem分のマージンまたはパディングを設定します。

「auto」は、マージンを auto に設定します。

Flex ユーティリティ

flexbox を有効化

要素に d-flex クラスまたは d-inline-flex クラスを追加することで、その要素は flex コンテナとなり、その子要素は自動的に flex アイテムとなるため、flexbox レイアウトを利用することができるようになります。


また、d-{ ブレイクポイント }-flex クラスや、d-{ ブレイクポイント }-inline-flex クラスとすることで、ブレイクポイントに対応させることができます。

flex コンテナの主軸方向の設定

flex-{ 方向 } クラスを追加することで、flex コンテナの主軸を設定することができます。


”方向”には以下のオプションが入ります。

row(左から右)
row-reverse(右から左)
column(上から下)
column-reverse(下から上)



また、flex-{ ブレイクポイント }-{ 方向 } クラスとすることでブレイクポイントに対応できます。

<h5>flex-row(左から右)</h5>
<div class="d-flex flex-row">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-row-reverse(右から左)</h5>
<div class="d-flex flex-row-reverse">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-column(上から下)</h5>
<div class="d-flex flex-column">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-column-reverse(下から上)</h5>
<div class="d-flex flex-column-reverse">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>

主軸方向の整列

justify-content-{ 整列 } クラスを追加することで、flex コンテナの主軸方向に flex アイテムを整列させることができます。


”整列”には、以下のオプションが入ります。

start(始点揃え)
end(終点揃え)
center(中央揃え)
between(両端揃え)
around(等間隔揃え)


また、justify-content-{ ブレイクポイント }-{ 整列 } クラスとすることでブレイクポイントに対応できます。

<h5>justify-content-start</h5>
<div class="d-flex justify-content-start">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>justify-content-end</h5>
<div class="d-flex justify-content-end">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>justify-content-center</h5>
<div class="d-flex justify-content-center">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>justify-content-between</h5>
<div class="d-flex justify-content-between">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>justify-content-around</h5>
<div class="d-flex justify-content-around">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>

交差軸方向の整列

align-items-{ 整列 } クラスを追加することで、 flex コンテナの交差軸方向に flex アイテムを整列させることができます。


”整列”には、以下のオプションが入ります。

start(始点揃え)
end(終点揃え)
center(中央揃え)
baseline(ベースラインが揃うように配置)
stretch(交差軸の幅に合わせて伸縮し配置)


また、align-items-{ ブレイクポイント }-{ 整列 } クラスとすることでブレイクポイントに対応できます。

<h5>align-items-start</h5>
<div class="d-flex align-items--start">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>align-items-end</h5>
<div class="d-flex align-items-end">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>align-items-center</h5>
<div class="d-flex align-items-center">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>align-items-baseline</h5>
<div class="d-flex align-items-baseline">
  <div class="p-3">flexアイテム1</div>
  <div class="p-5">flexアイテム2</div>
  <div class="p-1">flexアイテム3</div>
</div>
<h5>align-items-stretch</h5>
<div class="d-flex align-items-stretch">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>

flex アイテムを交差軸上で個別に整列

flex アイテムに align-self-{ 整列 } クラスを追加することで、flex アイテムを交差軸上で個別に整列させることができます。

”整列”に入るオプションは、先ほどの align-items-{ 整列 } クラスと同じです。

<h5>align-self-start</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div class="align-self-start">flexアイテム2(align-self-start)</div>
  <div>flexアイテム3</div>
</div>
<h5>align-self-end</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div class="align-self-end">flexアイテム2(align-self-end</div>
  <div>flexアイテム3</div>
</div>
<h5>align-self-center</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div class="align-self-center">flexアイテム2(align-self-center</div>
  <div>flexアイテム3</div>
</div>
<h5>align-self-baseline</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div class="align-self-baseline">flexアイテム2(align-self-baseline</div>
  <div>flexアイテム3</div>
</div>
<h5>align-self-stretch</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div class="align-self-stretch">flexアイテム2(align-self-stretch</div>
  <div>flexアイテム3</div>
</div>

複数行にわたる flex アイテムを交差軸方向で整列

align-content-{ 整列 } クラスを追加することで、複数行にわたる flex アイテムを交差軸方向で整列させることができます。

ただし、単一行の flex アイテムは制御できないので注意してください。


”整列”には以下のオプションが入ります。

start(始点揃え)
end(終点揃え)
center(中央揃え)
between(両端揃え)
around(等間隔揃え)

stretch(交差軸いっぱいに伸縮して配置)

また、align-content-{ ブレイクポイント }-{ 整列 } クラスとすることでブレイクポイントに対応できます。

<h5>align-content-start</h5>
<div class="d-flex align-content-start flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>align-content-end</h5>
<div class="d-flex align-content-end flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>align-content-center</h5>
<div class="d-flex align-content-center flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>align-content-between</h5>
<div class="d-flex align-content-between flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>align-content-around</h5>
<div class="d-flex align-content-around flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>align-content-stretch</h5>
<div class="d-flex align-content-stretch flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>

全幅にわたり等幅で整列

flex アイテムに flex-fill クラスを追加することで、flex コンテナ全幅にわたって flex アイテムを等幅で整列させることができます。

また、flex-{ ブレイクポイント }-fill クラスとすることでブレイクポイントに対応できます。

<h5>デフォルト</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-fill クラス追加</h5>
<div class="d-flex">
  <div class="flex-fill">flexアイテム1</div>
  <div class="flex-fill">flexアイテム2</div>
  <div class="flex-fill">flexアイテム3</div>
</div>

flex アイテム幅の伸縮の指定

flex アイテムに flex-{ 伸縮 }-{ するorしない } クラスを追加することで、flex アイテムの幅の伸縮を指定することができます。

”伸縮”には、grow(伸長)、shrink(縮小)が入り、
”するorしない”には、0(しない)、1(する)が入ります。


たとえば、
flex-grow-0 だと、「flex アイテムの幅を伸長しない」
flex-shrink-1だと、「flex アイテムの幅を縮小する」という意味になります。


また、flex-{ ブレイクポイント }-{ 伸縮 }-{ するorしない } クラスとすることでブレイクポイントに対応できます。

<h5>デフォルト</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-grow-1</h5>
<div class="d-flex">
  <div class="flex-grow-1">flexアイテム1(flex-grow-1)</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flex-shrink-1</h5>
<div class="d-flex">
  <div class="flex-shrink-1">flexアイテム1(flex-shrink-1)</div>
  <div class="w-100">flexアイテム2</div>
  <div class="w-100">flexアイテム3</div>
</div>

flex アイテムの折り返しの設定

flex アイテムがどのように折り返すかを指定するには、
flex-nowrap クラス(折り返さない)、
flex-wrap クラス
(折り返し)、
flex-wrap-reverse クラス
(逆方向へ折り返し)を追加します。


また、flex-{ ブレイクポイント }-~ クラスとすることでブレイクポイントに対応できます。

<h5>flex-nowrap</h5>
<div class="d-flex flex-nowrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>flex-wrap</h5>
<div class="d-flex flex-wrap">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>
<h5>flex-wrap-reverse</h5>
<div class="d-flex flex-wrap-reverse">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
  <div>flexアイテム4</div>
  <div>flexアイテム5</div>
  <div>flexアイテム6</div>
  <div>flexアイテム7</div>
  <div>flexアイテム8</div>
  <div>flexアイテム9</div>
  <div>flexアイテム10</div>
</div>



画面幅を狭めると ↓

特定の flex アイテムの表示順を入れ替え

order-{ 順番 } クラス(”順番”には、0~12が入ります)を追加することで、flex アイテムの表示順を入れ替えることができます。(数字が小さい順)

また、order-{ ブレイクポイント }-{ 順番 } クラスとすることでブレイクポイントに対応できます。


ただし、ブレイクポイントが設定されていない要素が優先的に先に表示されるため、ブレイクポイントを設定する場合は sm、md、lg、xl を揃える必要があります。

<div class="d-flex">
  <div class="order-2">order-2(HTML上は1番目)</div>
  <div class="order-4">order-4(HTML上は2番目)</div>
  <div class="order-1">order-1(HTML上は3番目)</div>
  <div class="order-5">order-5(HTML上は4番目)</div>
  <div class="order-3">order-3(HTML上は5番目)</div>
</div>

flex アイテムの分離

flex アイテムを右側に分離させたい場合は、mr-auto クラスをその直前の要素に追加します。

左側に分離させたい場合は、ml-auto クラスをその直後の要素に追加します。

<h5>デフォルト</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flexアイテム2,3を右側に分離(mr-auto)</h5>
<div class="d-flex">
  <div class="mr-auto">flexアイテム1(mr-auto)</div>
  <div>flexアイテム2</div>
  <div>flexアイテム3</div>
</div>
<h5>flexアイテム1,2を左側に分離(ml-auto)</h5>
<div class="d-flex">
  <div>flexアイテム1</div>
  <div>flexアイテム2</div>
  <div class="ml-auto">flexアイテム3(ml-auto)</div>
</div>

Float ユーティリティ

フロートの設定

フロートを設定したい要素に float-{ 配置 } クラスを追加します。

”配置”には、leftrightnone が入ります。

<span class="float-left">float-left</span><br>
<span class="float-right">float-right</span><br>
<span class="float-none">float-none</span>

Clearfix ユーティリティ

フロートを指定した要素の親要素に clearfix クラスを追加することでフロートを解除することができます。


たとえば、要素がフロートした(浮いた)状態であると親要素の高さが算出されず、親要素に背景色を設定していても高さがないため適用することができません。

そのようなときはフロートを解除することで解決できます。

<h5>clearfixなし</h5>
<div class="container bg-secondary">
  <span class="float-left">float-left</span>
  <span class="float-right">float-right</span>
</div>
<h5>clearfixあり</h5>
<div class="container bg-secondary clearfix">
  <span class="float-left">float-left</span>
  <span class="float-right">float-right</span>
</div>

Position ユーティリティ

要素の位置指定

position-{ 位置の指定 } クラスで要素の位置を指定することができます。


”位置の指定”には、以下のオプションが入ります。

static(通常の位置)
relative
(相対位置)
absolute
(絶対位置)
fixed
(固定位置)
sticky
(Sticky位置)

最上部に固定

fixed-top クラスを追加することで、要素を画面の最上部に固定することができます。

<div class="container">
  <h1>lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <div class="fixed-top py-3 bg-dark text-center">
    <a href="#target" class="text-light">「target」へ</a>
  </div>
  <h2 id="target" class="text-danger">target</h2>
  <div class="bg-secondary" style="height:1000px;"></div>
</div>



しかし、このままだと最上部に固定した要素の下に他の要素が重なってしまいます。



fixed-top クラスを設定した要素の高さの分(この場合は56px)だけ、全体を囲む要素に padding-top を適用して下にずらすことで回避します。

.container{
  padding-top: 56px;
}



また、このままだと”「targetへ」”というリンクを押したときに、”target”の文字がバーに隠れてしまっています。



これを回避するため、以下のようにCSSを追加します。

#target{
  margin-top: -56px;
  padding-top: 56px;
}

最下部に固定

fixed-bottom クラスを追加することで、要素を画面の最下部に固定することができます。

最上部に達すると固定

sticky-top クラスを追加することで、スクロールして要素が最上部に達すると固定されるようになります。

  <h1 class="text-center my-5">lorem ipsum</h1>
  <h2 class="text-center my-5">dolor sit amet</h2>
  <div class="sticky-top py-3 mb-4 bg-dark text-center text-light">sticky-top</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Text ユーティリティ

文字の均等割り付け

text-justify クラスを追加することで、文字を均等割り付けすることができます。

<h5 class="mt-5 mb-3">text-justifyなし</h5>
<p>
  これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。
</p>
<h5 class="mt-5 mb-3">text-justifyあり</h5>
<p class="text-justify">
  これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。これはダミーテキストです。This is a dummy text.ひらがな、漢字、カタカナ、alphabetaなど、様々な文字を混ぜています。text-justify クラスを追加すると、文字を均等割り付けすることができます。
</p>

文字の整列

文字を左寄せにするには text-left クラス
右寄せにするには text-right クラス
中央寄せにするには text-center クラスを追加します。

<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>

文字を折り返さない

text-nowrap クラスを追加することで、テキストが折り返されないようになります。

<table>
  <tr>
    <td class="text-nowrap">折り返さない文章(text-nowrap)</td><td>折り返される文章</td>
  </tr>
</table>

長いテキストを省略

text-truncate クラスを追加することで、長いテキストを省略することができます。

このクラスを使う要素は、ブロックレベルかインラインブロックレベルである必要があります。

<p class="text-truncate">これは長いテキストです。あまりにも長いので、ブラウザには省略して表示されます。</p>

文字を大文字・小文字に変換

文字をすべて大文字にするには text-lowercase クラス
全て小文字にするには text-uppercase クラス
最初の文字を大文字にするには text-capitalize クラスを追加します。

<p class="text-lowercase">Text-Lowercase</p>
<p class="text-uppercase">text-uppercase</p>
<p class="text-capitalize">text-capitalize</p>

文字の太さ・イタリック体の設定

文字の太さを設定するには、font-weight-{ 文字の太さ } クラス(”文字の太さ”には、lightnormalbold が入ります)を追加します。

文字を斜体にするには font-italic クラスを追加します。

<p class="font-weight-light">font-weight-light</p>
<p class="font-weight-normal">font-weight-normal</p>
<p class="font-weight-bold">font-weight-bold</p>
<p class="font-italic">font-italic</p>

等幅フォントの指定

text-monospace クラスを追加することで、テキストを等幅フォントにすることができます。

<h5>text-monospaceなし</h5>
<p>Lorem ipsum dolor sit amet<br>日本語の文章</p>
<h5>text-monospaceあり</h5>
<p class="text-monospace">Lorem ipsum dolor sit amet<br>日本語の文章</p>

Vertical align ユーティリティ

このユーティリティは、インラインレベル要素およびテーブルセル要素の垂直方向の整列に使うことができます。


align-top クラス(上端揃え)
align-middle クラス(中央端揃え)
align-bottom クラス(下端揃え)
align-baseline クラス(ベースライン揃え)
align-text-top クラス(テキストの上端揃え)
align-text-bottom クラス(テキストの下端揃え)

その他のユーティリティ

スクリーンリーダー用ユーティリティ

sr-only クラスを追加することで、スクリーンリーダー以外すべてのデバイスでその要素を非表示にします。

また、sr-only-focusable クラスを追加することで、フォーカス時に要素を再表示させることができます。

Visibility ユーティリティ

display プロパティを変更せずに可視性(見た目上)だけを切り替えます。

visible クラスで要素を表示し、
inbvisible クラスで要素を非表示にします。

<p>項目1</p>
<p class="invisible">項目2</p>
<p>項目3</p>
<p class="d-none">項目4</p>
<p>項目5</p>

d-none クラス(display:none)が設定された要素は要素自体の表示が消されていますが、invisible クラスが設定された要素は要素自体は残ったまま見た目上だけ非表示になっていることがわかります。

Embed ユーティリティ

レスポンシブ対応のビデオやスライドショーなどを、アスペクト比を保ったまま設置することができます。

埋め込むコンテンツを囲む親要素に embed-responsive クラスembed-responsive-{ アスペクト比 ] クラスを追加します。


”アスペクト比”には、〇by△(〇:△)のような指定をし、以下の組み合わせが入ります。

21by9
16by9
4by3
1by1



そして、子要素の埋め込まれるコンテンツには、必須ではありませんが embed-responsive-item クラスを追加することが推奨されています。

また、allowfullscreen 属性を追加すると、フルスクリーン表示対応させることができます。

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="https://www.youtube.com/embed/VFdLm6gEEE4" class="embed-responsive-item" allowfullscreen></iframe>
</div>

Shadows ユーティリティ

ボックスに影の追加や削除を行うには、以下のクラスを追加します。

shadow-none クラス(影なし)
shadow-sm クラス
(小さめの影)
shadow クラス
(標準的な影)
shadow-lg クラス
(大き目の影)

<p class="shadow-none">shadow-none</p>
<p class="shadow-sm">shadow-sm</p>
<p class="shadow">shadow</p>
<p class="shadow-lg">shadow-lg</p>








今回は以上になります。

ご覧いただきありがとうございました(^^)

コメント

コンタクトフォーム

    タイトルとURLをコピーしました