音楽聴き放題 30日間無料体験

Bootstrap 4 のテキスト関係の装飾クラスやタグ指定などのまとめ。

Bootstrap 4 のテキスト関係の装飾をまとめました。
使用頻度が多いであろうカラー指定のカスタムなどもまとめています。

見出し

見出しは h1 ~ h6 クラスで設定します。

コード
<p class="h1">class="h1":サンプル</p>

Bootstrap4はデフォルトでhタグにスタイルが設定されているので、hタグだけでも同様の表示になります。

コード
<h1>&lt;h1&gt;タグ:サンプル</h1>

副見出し

smallタグにtext-mutedクラスをあてることで副見出しのような表示ができます。

コード
<h2>見出し<small class="text-muted">副見出し</small></h2>

見出しよりも大きく表示 display

display-○クラスで見出しよりも大きい文字サイズで表示ができます。

コード
<p class="display-1">display-1</p>

文字装飾(インライン)

コード
<strong>strongタグ(クラスなし)強調</strong><br>
<b>bタグ(クラスなし)太字</b><br>
<span class="font-weight-bold">font-weight-boldクラス 太字</span><br>
<span class="font-weight-normal">font-weight-normalクラス 標準</span><br>
<span class="font-weight-light">font-weight-lightクラス 細字</span><br>
<em>emタグ(クラスなし)強調(斜体 ※ブラウザによる)</em><br>
<span class="font-italic">font-italicクラス 斜体</span><br>
<del>delタグ(クラスなし)</del><br>
<mark>markタグ ハイライト</mark><br>
<span class="mark">markクラス(markタグと同様)</span><br>
<ins>insタグ(クラスなし)後から追加されたテキスト</ins><br>
<span>何も指定なし</span><br>
<small>smallタグ(font-sizeが80%になります)</small>
<p class="small">smallクラス(smallタグと同様)</p>
<p class="lead">leadクラス</p>

リード文

リード文(冒頭の挨拶や強調したい文章など)はleadクラスを使用します。
スタイルはこのようになっています。

コード
.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

文字を消す

text-hideクラスを指定することで、文字を消すことができます。

コード
<span class="text-hide">ここが透明になっています。</span>←完全な透明文字 text-hideクラス<br>

text-hideのスタイルはこのようになっています。

コード
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

font: 0/0 a; はフォントの幅と高さを0にする略式プロパティ、a は存在しないフォントファミリーを指定しています。
文字色、背景色ともに透明にすることで、見た目上は完全に消えています。
ソースコードには残るため、一時的にテキストを非表示にしたい場合などに使えるクラスになっています。

行揃え

<p>や<span>だけでなく、<div>にあてれば子要素全体に影響を与えられます。

コード
<p class="text-left">text-leftクラス</p>
<p class="text-center">text-centerクラス</p>
<p class="text-right">text-rightクラス</p>
<p class="text-justify">text-justifyクラス(両端揃え※ブラウザ依存)</p>
<p class="text-nowrap">text-nowrapクラス(折り返さずに配置。端まで行くと横スクロールバーのお世話になります。長文メッセージテスト。)</p>

ブレイクポイントによる添字指定も可能です。
添字は sm md lg xl の4種類。(最も小さい xs の添字指定はありません。)
text-(添字)-方向

text-right 0px以上(全サイズ)が右寄せ
text-sm-right sm以上が右寄せ

<div class="text-right text-md-center">メッセージ</div>
この指定だと、xs, smは右寄せ、md以上(md, lg, xl)は中央寄せ。

<div class="text-right text-sm-center text-xl-left">メッセージ</div>
この指定だと、xsは右寄せ、sm,md,lgは中央寄せ、xlは左寄せ。

文字色

コード
<span class="text-primary">text-primaryクラス</span><br>
<span class="text-secondary">text-secondaryクラス</span><br>
<span class="text-success">text-successクラス</span><br>
<span class="text-info">text-infoクラス</span><br>
<span class="text-warning">text-warningクラス</span><br>
<span class="text-danger">text-dangerクラス</span><br>
<span class="text-dark">text-darkクラス</span><br>
<span class="text-muted">text-mutedクラス</span><br>
<span class="text-light bg-dark">text-lightクラス</span><br>
<span class="text-white bg-dark">text-whiteクラス</span><br>
<span class="text-black-50 bg-white">text-black-50クラス 黒+透明色50%</span><br>
<span class="text-white-50 bg-dark">text-white-50クラス 白+透明色50%</span><br>
<span class="text-body">text-bodyクラス</span><br>

text-bodyとは
bodyタグにあたっている色コードと同色の色になります。
_variables.scss で定義されている $body-color 変数の色が設定されています。
初期値は #212529 になっています。(黒に近い灰色)

任意の文字色を指定したい場合

text-primaryクラスなどの色指定はこのようなスタイルになっています。

コード
.text-primary {
  color: #007bff !important;
}

単純に色コードをあてているにすぎないので、CSSにカラーコードを指定したスタイルを別途用意してあげるだけで実現できます。

style.css
.text-red {
  color: #ff0000 !important;
}
.html
<p class="text-red">赤色のテキスト</p>

背景色

コード
<span class="bg-primary">bg-primaryクラス</span><br>
<span class="bg-secondary">bg-secondaryクラス</span><br>
<span class="bg-success">bg-successクラス</span><br>
<span class="bg-info">bg-infoクラス</span><br>
<span class="bg-warning">bg-warningクラス</span><br>
<span class="bg-danger">bg-dangerクラス</span><br>
<span class="bg-dark">bg-darkクラス</span><br>
<span class="bg-muted">bg-mutedクラスはありません</span><br>
<span class="bg-light">bg-lightクラス</span><br>
<span class="bg-white">bg-whiteクラス</span><br>

任意の背景色を指定したい場合

bg-primaryクラスなどの色指定はこのようになっています。

コード
.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus {
  background-color: #0062cc !important;
}

単純に色コードをあてているのは文字色と同様ですが、それに加えて<a>タグに背景色を指定している場合、リンクにマウスを重ねるなどしてフォーカスしたとき背景色を若干暗くした色に変更するようになっています。

そのルールに則って緑色の背景を作る場合、このようになります。

style.css
.bg-green {
  background-color: #00ff00 !important;
}

a.bg-green:hover, a.bg-green:focus {
  background-color: #31B404 !important;
}
.html
<a class="bg-green text-white" href="#"> 自作した緑色背景 </a>

引用文

引用文はblockquoteタグを使用しますが、装飾はフォントサイズぐらいで、背景が灰色だとかそういった装飾はあたっていません。
blockquoteタグで指定した上で、さらにblockquoteクラスを指定する必要があります。
出典元の明記はblockquote-footerクラスが用意されているので、そちらをfooterタグなどにあてます。こちらは文字色が灰色と、beforeに横棒があたっています。
出典元を表すciteタグは、装飾は何もあたっていませんでした。

コード
<blockquote class="blockquote">
引用文はblockquoteタグを指定した上で、blockquoteクラスも指定します。<br>
<footer class="blockquote-footer">出典元の表示としてblockquote-footerクラスが用意されています。
<cite title="出典元の名前">出典元</cite></footer>
</blockquote>

blockquoteのスタイルはこのようになっています。

コード
blockquote {
  margin: 0 0 1rem;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014 \00A0";
}

等幅フォント

text-monospaceクラスを指定することで等幅フォントで表示します。

コード
<p>等幅フォント<br><span class="text-monospace">abcdEFG0123456あいうえお</span></p>
<p>通常フォント<br>abcdEFG0123456あいうえお</p>

text-monospaceのスタイルはこのようになっています。

コード
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

新しいスタイルが見つかり次第、今後も随時追加予定です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です