「Bootstrap」ナナヨ マニュアル(テキスト)

テキストカラー

表示（プレビュー）

class=”text-primary”

class=”text-primary-emphasis”

class=”text-secondary”

class=”text-secondary-emphasis”

class=”text-success”

class=”text-success-emphasis”

class=”text-danger”

class=”text-danger-emphasis”

class=”text-warning”

class=”text-warning-emphasis”

class=”text-info”

class=”text-info-emphasis”

class=”text-light”

class=”text-light-emphasis”

class=”text-dark “

class=”text-dark-emphasis”

class=”text-body”

class=”text-body-emphasis”

class=”text-body-secondary”

class=”text-body-tertiary”

class=”text-black”

class=”text-white”

class=”text-black-50″

class=”text-white-50″

ソースコード

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

カラーコード一覧は下記のページにあります。

カラーコード(Bootstrap)ｖ5.0.2/ｖ5.3.x

Bootstrap5で指定されているcolor cssで呼び出すカラーコード表。

nanayo74.com

2023.12.04

文字色(Bootstrap)ｖ5.0.2/ｖ5.3.x

Bootstrapの基本設定されているテキストの色の指定クラス名一覧です。

nanayo74.com

2023.10.04

フォントサイズ（fs-1,・・・fs-6）

表示（プレビュー）

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

ソースコード/スタイル

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

.fs-1 {
    font-size: calc(1.375rem + 1.5vw)!important
}

.fs-2 {
    font-size: calc(1.325rem + .9vw)!important
}

.fs-3 {
    font-size: calc(1.3rem + .6vw)!important
}

.fs-4 {
    font-size: calc(1.275rem + .3vw)!important
}

.fs-5 {
    font-size: 1.25rem!important
}

.fs-6 {
    font-size: 1rem!important
}

【見出し】についてはこちらへ、フォントサイズは同じです。

「Bootstrap」ナナヨ マニュアル(見出し)

[見出しデザイン]このページは英語が苦手なナナヨが、フロントエンドライブラリ Bootstrapを快適に使う為、作ったメモページです。

nanayo74.com

2023.12.15

テキストの装飾

表示（プレビュー）

■＜class=”lead”＞

class=”lead”でリード段落（先導）表示する

■＜mark＞

マークタグ＜mark＞を使用してテキストを強調表示できます。

■＜del＞

このテキスト行は、＜del＞タグで、削除されたテキストとして扱われることを意図しています。

■＜s＞

このテキスト行は、＜s＞タグで、もはや正確ではないものとして扱われることを意図しています。

■＜ins＞

このテキスト行は、＜ins＞タグで、文書への追加として扱われることを意図しています。

■＜u＞

このテキスト行は＜u＞タグで、下線付きで表示されます。

■＜small＞

このテキスト行は＜small＞タグで、細字として扱われることを意図しています。

■＜strong＞

この行は＜strong＞タグで、太字で表示されます。

■＜em＞

この行は＜em＞タグで、斜体のテキストとして表示されます。

ソースコード/スタイル

<h6>■＜class="lead"＞</h6>
<p class="lead">class="lead"でリード段落（先導）表示する</p>
<h6>■＜mark＞</h6>
<p>マークタグ＜mark＞を使用してテキストを<mark>強調表示</mark>できます。</p>
<h6>■＜del＞</h6>
<p><del>このテキスト行は、＜del＞タグで、削除されたテキストとして扱われることを意図しています。</del></p>
<h6>■＜s＞</h6>
<p><s>このテキスト行は、＜s＞タグで、もはや正確ではないものとして扱われることを意図しています。</s></p>
<h6>■＜ins＞</h6>
<p><ins>このテキスト行は、＜ins＞タグで、文書への追加として扱われることを意図しています。</ins></p>
<h6>■＜u＞</h6>
<p><u>このテキスト行は＜u＞タグで、下線付きで表示されます。</u></p>
<h6>■＜small＞</h6>
<p><small>このテキスト行は＜small＞タグで、細字として扱われることを意図しています。</small></p>
<h6>■＜strong＞</h6>
<p><strong>この行は＜strong＞タグで、太字で表示されます。</strong></p>
<h6>■＜em＞</h6>
<p><em>この行は＜em＞タグで、斜体のテキストとして表示されます。</em></p>

.small, small {
    font-size: .875em;
}
b, strong {
    font-weight: bolder;
}

引用文/出典表記

表示（プレビュー）

■引用

外部から文章を引用するときに使います。

■出典表記

外部から出典表記するときに使います。

ソースコード/スタイル

<h6>■引用</h6>
<blockquote class="blockquote">
  <p>外部から文章を引用するときに使います。</p>
</blockquote>
<h6>■出典表記</h6>
<blockquote class="blockquote">
  <p>外部から出典表記するときに使います。</p>
<footer class="blockquote-footer">作者 <cite>「タイトル」</cite></footer>
</blockquote>

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}
blockquote {
    margin: 0 0 1rem;
}
.blockquote-footer {
    display: block;
    font-size: 80%;
    color: #6c757d;
}
cite {
    font-style: italic;
}

整列

表示（プレビュー）

■class=”text-start”

←左寄せテキスト

■class=”text-center”

←中央寄せテキスト→

■class=”text-end”

右寄せテキスト→

ソースコード/スタイル

<h6>■class="text-start"</h6>
<p class="text-start">←左寄せテキスト</p>
<h6 class="text-center">■class="text-center"</h6>
<p class="text-center">←中央寄せテキスト→</p>
<h6 class="text-end">■class="text-end"</h6>
<p class="text-end">右寄せテキスト→</p>

.text-start {
    text-align: left!important;
}
.text-center {
    text-align: center!important;
}
.text-end {
    text-align: right!important;
}

両端揃え

テキストの折り返し

表示（プレビュー）

■class=”text-wrap”

■class=”text-nowrap”

ソースコード/スタイル

<h6>■class="text-wrap"</h6>
<div class="bg-info-subtle text-wrap" style="width: 10rem;">
  文章の折り返し位置を指定します。
</div>
<h6>■class="text-nowrap"</h6>
<div class="bg-info-subtle text-nowrap" style="width: 10rem;">
  文章の折り返しを抑止します。
</div>

.text-wrap {
    white-space: normal!important;
}
.text-nowrap {
    white-space: nowrap!important;
}

アルファベットの大文字↔小文字の変換

表示（プレビュー）

■class=”text-lowercase”

AAA
大文字を小文字にする

■class=”text-uppercase”

aaa
小文字を大文字にする

■class=”text-capitalize”

hello.
すべての語の最初の文字を大文字にして、その他の文字を小文字にします

ソースコード/スタイル

<h6>■class="text-lowercase"</h6>
<p class="text-lowercase">AAA<br>大文字を小文字にする</p>
<h6>■class="text-uppercase"</h6>
<p class="text-uppercase">aaa<br>小文字を大文字にする</p>
<h6>■class="text-capitalize"</h6>
<p class="text-capitalize">hello.<br>すべての語の最初の文字を大文字にして、その他の文字を小文字にします</p>

.text-lowercase {
    text-transform: lowercase!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.text-capitalize {
    text-transform: capitalize!important;
}

行の高さ

表示（プレビュー）

■class=”lh-1″

これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。

■class=”lh-sm”

これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。

■class=”lh-base”

これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。

■class=”lh-lg”

これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。

ソースコード/スタイル

<h6>■class="lh-1"</h6>
<p class="lh-1">これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。
</p>
<h6>■class="lh-sm"</h6>
<p class="lh-sm">これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。
</p>
<h6>■class="lh-base"</h6>
<p class="lh-base">これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。
</p>
<h6>■class="lh-lg"</h6>
<p class="lh-lg">これは、要素の行の高さがユーティリティによってどのように影響されるかを示すために書かれた長い段落です。クラスは要素自体に適用されるか、場合によっては親要素に適用されます。これらのクラスは、ユーティリティ API を使用して必要に応じてカスタマイズできます。
</p>

.lh-1 {
    line-height: 1!important
}
.lh-sm {
    line-height: 1.25!important
}
.lh-base {
    line-height: 1.5!important
}
.lh-lg {
    line-height: 2!important
}

テキストの装飾

表示（プレビュー）

■class=”text-decoration-underline”

このテキストの下には線が入っています。

■class=”text-decoration-line-through”

このテキストには線が通っています。

■class=”text-decoration-none”

ソースコード/スタイル

<h6>■class="text-decoration-underline"</h6>
<p class="text-decoration-underline">  このテキストの下には線が入っています。</p>
<h6>■class="text-decoration-line-through"</h6>
<p class="text-decoration-line-through">このテキストには線が通っています。</p>
<h6>■class="text-decoration-none"</h6>
<a href="#" class="text-decoration-none">このリンクのテキスト装飾は削除されています</a>

.text-decoration-underline {
  text-decoration: underline!important
}
.text-decoration-line-through {
  text-decoration: line-through!important
}
.text-decoration-none {
  text-decoration: none!important
}