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

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」クラスを追加しています。

CONTENTS

enable JavaScriptChatBot