テキストデザイン【クラスを追加】

339 views

追加場所

画面の右ペインにある「スタイルのオーバーライド」に書き込むと、タグのような見た目で追加されます。
必要であれば2つ以上のクラスを追加することができます。


確認場所

中央ペインのキャンバスで画面の様子を確認します。
テンプレートの画面でタグの中にクラスが追加されている様子を確認します。


テキストデザインの種類

bootstrapのClassを追加することでスタイルに書くことなく、デザインを変更できます。
配置、折り返し、太字などを制御するための一般的なテキストユーティリティです。

テキストの位置調整

テキストの位置調整クラスを使用して、テキストを簡単に配置できます。
開始、終了、中央揃えには、グリッドシステムと同じビューポート幅のブレイクポイントを使用するレスポンシブクラスが利用できます。

クラス名と配置対比の内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-start すべてのビューポートサイズでテキストを左揃え
text-center すべてのビューポートサイズでテキストを中央揃え
text-end すべてのビューポートサイズでテキストを右揃え
text-sm-start sm(スマホサイズ)またはそれ以上のサイズのビューポートでテキストを左揃え
text-md-start md(タブレットサイズ)またはそれ以上のサイズのビューポートでテキストを左揃え
text-lg-start lg(パソコンサイズ)またはそれ以上のサイズのビューポートでテキストを左揃え
text-xl-start xl(1200px以上サイズ)またはそれ以上のサイズのビューポートでテキストを左揃え

サイズの定義

画面のサイズによって配置を流動的に変更できる仕組みがあります。
以下の表を参考にされて下さい。
例)スマホでは中央に揃え、パソコン以上のサイズでは右寄せや左寄せにする

ブレイクポイント クラス表示 画面サイズ
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px

両端揃えテキスト用のユーティリティクラスは視認性に欠けるため提供されていません。

テキストの折り返しとオーバーフロー

ボタンの中の文章などを折り返して表示したい時などに利用します。
また、逆に折り返さず表示することも可能です。



クラス名 役割
text-wrap テキストを折り返しできます
text-nowrap テキスト折り返しを抑止します

単語の区切り

設定することで長い文字列がレイアウトを崩すのを防ぎます。


クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-break 長い文字列がレイアウトを崩すのを防ぎます

アラビア語では単語の改行ができないことに注意してください

テキストの変換

テキストの大文字・小文字化、キャピタライズクラスを利用できます


クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-lowercase 「Lowercased text.」→「lowercased text.」
すべて小文字に変換します
text-uppercase 「Uppercased text.」→「UPPERCASED TEXT.」
すべて大文字に変換します
text-capitalize 「CapiTaliZed text.」→「CapiTaliZed Text.」
頭文字を大文字にします。
text-capitalize」は各単語の最初の文字を変更するだけで、他の文字の大文字小文字は影響されないことに注意してください。

フォントサイズ

フォントサイズを素早く変更することができます。
見出し要素(例:h1~h6)に値するフォントサイズのみ適用します。
これらのユーティリティのサイズは、HTMLの見出し要素と一致しているので、数が増えるにつれて、そのサイズは小さくなります。

クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
fs-1 見出し要素の最上位h1のサイズを再現します
fs-2 見出し要素h2のサイズを再現します
fs-3 見出し要素h3のサイズを再現します
fs-4 見出し要素h4のサイズを再現します
fs-5 見出し要素h5のサイズを再現します
fs-6 見出し要素の最下位h6のサイズを再現します

フォントの太さと斜体

テキストの太さやスタイルを変更できます。
スタイルのユーティリティは「.fst-*」と省略され、
太さのユーティリティは「.fw-*」と省略されます。


クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
fw-bold Bold text.
太字のスタイル
fw-bolder Bolder weight text (relative to the parent element).
太めのウェイト・テキスト(親要素からの相対値)。
fw-semibold Semibold weight text.
セミボールドウェイトのテキスト
fw-medium Medium weight text.
ミディアムウェイトのテキスト
fw-normal Normal weight text.
通常の太さのテキスト
fw-light Light weight text.
細いテキスト
fw-lighter Lighter weight text (relative to the parent element).
より軽量なテキスト(親要素に対する相対値)
fst-italic Italic text.
イタリック体
fst-normal Text with normal font style
通常のフォントスタイルのテキスト

行の高さ

行の高さを変更できます。


クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
lh-1 一番狭い行の高さです
lh-sm 次に狭い行の高さです
lh-base 一般的な行の高さです
lh-lg 一番広い行の高さです

等幅フォント

等幅フォントに変更できます。

クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
font-monospace This is in monospace

色のリセット

テキストやリンクの色をクラスでリセットし、親から色を継承するようにします。

クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-reset Muted text with a reset link.
この場合は、リンクを含むテキストの親要素にグレー色が充てられているため、リセットすることでグレー色が引き継がれます。

テキストの装飾

テキスト装飾クラスでコンポーネント内のテキストを装飾できます。

クラスの内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-decoration-underline This text has a line underneath it.
このテキストの下には線が引かれます
text-decoration-line-through This text has a line going through it.
このテキストには線が通ります
text-decoration-none This link has its text decoration removed
このリンクテキストは文字装飾が削除されます

Colors (カラー)

クラスを使ってセマンティックカラーを表現できます。リンクのホバースタイルもサポートしています。

テキストのカラー

カラーユーティリティを使ってテキストに色をつけます。
リンクの場合は、カーソルが当たった状態(:hover)と要素をクリックやタップした状態(:focus)を持つクラスを使うことができます。
.link-* helper classes」
テキスト自体の色だけではなく、背景を暗くすることもできます。

クラス名と色対比の内訳は以下の通りです。
クラス名をコピーして「スタイルのオーバーライド」に貼り付けてください。

クラス名 役割
text-primary .text-primary
ブルーカラーになります
text-secondary .text-secondary
グレーカラーになります
text-success .text-success
グリーンカラーになります
text-danger .text-danger
レッドカラーになります
text-warning + bg-dark .text-warning
イエローカラーになります。白い背景では視認しずらいため背景を暗くする「bg-dark」クラスを追加しています。
text-info + bg-dark .text-danger
シアンカラーになります。白い背景では視認しずらいため背景を暗くする「bg-dark」クラスを追加しています。
text-light + bg-dark .text-light
白に近いグレーカラーになります。白い背景では視認しずらいため背景を暗くする「bg-dark」クラスを追加しています。
text-dark .text-dark
暗い色になります。
text-body .text-body
text-muted .text-muted
ブラックよりも薄い暗い色になります。
text-white bg-dark .text-white
ホワイトになります。白い背景では視認しずらいため背景を暗くする「bg-dark」クラスを追加しています。
text-black-50 .text-black-50
ブラックの50%半透明カラーです。
text-white-50 + bg-dark .text-white-50
ホワイトの50%半透明カラーです。白い背景では視認しずらいため背景を暗くする「bg-dark」クラスを追加しています。
Share this Article

テキストデザイン【クラスを追加】

Or copy link

CONTENTS