情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Bootstrap4のテキスト(texts)を使用する

2018/02/14

テキストとは?

Bootstrap4のテキストとは文字列のコンテンツのことです。

Bootstrap4では下のような外観のテキストを実現することができます。

テキストの種類

テキストの種類を指定するにはテキストを含む要素にテキストの種類に応じて下のようなクラスを指定します。

  • 主テキスト・・・text-primary
  • 副テキスト・・・text-secondary
  • 成功テキスト・・・text-success
  • 危険テキスト・・・text-danger
  • 警告テキスト・・・text-warning
  • 情報テキスト・・・text-info
  • 明るいテキスト・・・text-light
  • 暗いテキスト・・・text-dark
  • 目立たないテキスト・・・text-muted
  • 白いテキスト・・・text-white

テキストの種類を指定するとテキストの色が種類に応じたものに変化しますので注意してください。

また、text-mutedクラスとtext-whiteクラス以外はリンクのテキストにも対応しています(リンクの上にマウスポインタを乗せた場合やリンクにフォーカスを当てた場合にはテキストの色が種類に応じた適切なものに変化します)。

無条件アライメント

常に右寄せまたは左寄せまたは中央寄せされるテキストを作成するにはテキストを含む要素に右寄せか左寄せか中央寄せかに応じて下のようなクラスを指定します。

  • 右寄せ・・・text-right
  • 左寄せ・・・text-left
  • 中央寄せ・・・text-center

右寄せのためのクラスと左寄せのためのクラスと中央寄せのためのクラスを複数同時に指定した場合には中央寄せが最も優先され、次に右寄せが優先されますので注意してください。

条件付きアライメント

画面の幅(ブラウザのドキュメント表示部分の幅)に応じて右寄せまたは左寄せまたは中央寄せされたりされなかったりするテキストを作成するにはテキストを含む要素に右寄せまたは左寄せまたは中央寄せされたりされなかったりする基準の幅と右寄せか左寄せか中央寄せかに応じて下のようなクラスを指定します。

  • 576px以上で右寄せ・・・text-sm-right
  • 576px以上で左寄せ・・・text-sm-left
  • 576px以上で中央寄せ・・・text-sm-center
  • 768px以上で右寄せ・・・text-md-right
  • 768px以上で左寄せ・・・text-md-left
  • 768px以上で中央寄せ・・・text-md-center
  • 992px以上で右寄せ・・・text-lg-right
  • 992px以上で左寄せ・・・text-lg-left
  • 992px以上で中央寄せ・・・text-lg-center
  • 1200px以上で右寄せ・・・text-xl-right
  • 1200px以上で左寄せ・・・text-xl-left
  • 1200px以上で中央寄せ・・・text-xl-center

異なる基準の幅に対するクラスを複数同時に指定した場合には最も大きい基準の幅に対するクラスが最も優先されますので注意してください。

また、同じ基準の幅に対する右寄せのためのクラスと左寄せのためのクラスと中央寄せのためのクラスを複数同時に指定した場合には中央寄せが最も優先され、次に右寄せが優先されますので注意してください。

スタイル

テキストには様々なスタイルを適用することができます。

ヘッダに適用されるのと同じスタイルをテキストに適用するにはテキストを含む要素にヘッダの種類に応じて下のようなクラスを指定します。

  • <h1>ヘッダ・・・h1
  • <h2>ヘッダ・・・h2
  • <h3>ヘッダ・・・h3
  • <h4>ヘッダ・・・h4
  • <h5>ヘッダ・・・h5
  • <h6>ヘッダ・・・h6

その他のスタイルをテキストに適用するにはテキストを含む要素にスタイルの種類に応じて下のようなクラスを指定します。

  • 目立つテキスト(ヘッダ用)1・・・display-1
  • 目立つテキスト(ヘッダ用)2・・・display-2
  • 目立つテキスト(ヘッダ用)3・・・display-3
  • 目立つテキスト(ヘッダ用)4・・・display-4
  • 目立つテキスト・・・lead
  • 太字テキスト・・・font-weight-bold
  • 通常の太さのテキスト・・・font-weight-normal
  • 細字テキスト・・・font-weight-light
  • 斜字テキスト・・・font-italic
  • マーキングされたテキスト・・・mark
  • 小さいテキスト・・・small
  • 改行しないテキスト・・・text-nowrap
  • 省略テキスト・・・text-truncate

略語

略語を表す<abbr>要素にはinitialismクラスを指定します。

引用

引用を表す<blockquote>要素にはblockquoteクラスを指定します。また、引用の出典を表す<footer>要素にはblockquote-footerクラスを指定します。

例1

<p>要素のテキストの種類を様々に設定したHTMLドキュメントの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: aqua;
    }
  </style>
</head>
<body>
  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>

  <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">text-light</p>
  <p class="text-dark">text-dark</p>
  <p class="text-muted">text-muted</p>
  <p class="text-white">text-white</p>
</html>

このHTMLドキュメントはブラウザでは下のように表示されます。

例2

<p>要素のテキストのスタイルを様々に設定したHTMLドキュメントの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    p {
      width: 64px;
    }
  </style>
</head>
<body>
  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>

  <p class="h1">h1</p>
  <p class="h2">h2</p>
  <p class="h3">h3</p>
  <p class="h4">h4</p>
  <p class="h5">h5</p>
  <p class="h6">h6</p>

  <p class="display-1">display-1</p>
  <p class="display-2">display-2</p>
  <p class="display-3">display-3</p>
  <p class="display-4">display-4</p>
  <p class="lead">lead</p>
  <p class="font-weight-bold">font-weight-bold</p>
  <p class="font-weight-normal">font-weight-normal</p>
  <p class="font-weight-light">font-weight-light</p>
  <p class="font-italic">font-italic</p>
  <p class="mark">mark</p>
  <p class="small">small</p>
  <p class="text-nowrap">text-nowrap</p>
  <p class="text-truncate">text-truncate</p>
</html>

このHTMLドキュメントはブラウザでは下のように表示されます。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-bootstrap