テキストスタイル

インライン テキスト書式設定を使用して、テキストの任意の部分をテキストの残りの部分とは異なるスタイルに設定します。

インライン テキストのスタイル設定オプションを使用すると、テキストの特定の部分を他の部分とは異なるようにカスタマイズできます。段落または見出し内のテキストを選択すると、その特定のテキスト セグメントに太字、斜体、リンク、スタイル設定などの拡張機能を適用できます。

テキストフォーマットを適用する手順

インライン テキストのスタイルを設定するには、テキスト要素内のテキストの一部をハイライトするだけです。選択したテキストの上にテキスト書式設定ツールバーが表示され、さまざまなオプションが提供されます。

  • 強い
  • 強調する
  • 上付き文字
  • 添字
  • ハイパーリンクを挿入
  • span内に埋め込む
  • フォーマットをリセット

テキスト書式設定ツールバー内の目的の書式設定オプションをクリックして、強調表示されたテキストに適用します。

注記: リッチ テキスト機能には、独自のインライン テキスト書式設定ツールバーが含まれています。

インラインテキストのカスタマイズ

インライン テキストの書式設定を適用すると、プライマリ テキスト要素内にネストされた要素が作成されます。スタイル パネルを使用して、これらのネストされた要素のスタイルをさらに設定できます。

同じ選択範囲に複数のテキスト フォーマットを柔軟に適用できます。たとえば、単語を同時に太字と斜体にすることができます。これらのスタイル属性を調整して組み込むと、テキストはメインのテキスト要素内にインラインで残ります。

太字と斜体のテキストのスタイル設定

テキストの指定 大胆な デフォルトの太字フォントスタイルを適用します。このネストされた要素はクラスを定義することでカスタマイズできますが、 すべて太字 ウェブサイト全体の太字テキストのデフォルトの外観を設定するタグです。

「すべて太字」タグのスタイルを設定するには:

  1. を選択 太字 要素
  2. アクセス スタイルパネル
  3. を入力 セレクターフィールド
  4. 選択してください すべて太字 鬼ごっこ
  5. スタイリングを微調整する

テキストの割り当て イタリック 斜体スタイルを与えます。同様に、このネストされた要素をクラスを使用してスタイル設定したり、 すべて斜体 サイト上のすべての斜体テキストのデフォルトの外観を定義するタグです。

すべて斜体タグのスタイルを設定するには:

  1. を選択 斜体テキスト 要素
  2. アクセス スタイルパネル
  3. を入力 セレクターフィールド
  4. 選択してください すべて斜体 鬼ごっこ
  5. スタイルを調整する
知っておくといい: フォントに太字または斜体バージョンがない場合、ブラウザは正確にレンダリングされない可能性のある代替フォントを生成します。

上付き文字または下付き文字の実装

重要なヒント: スクリーン リーダーは上付き文字や下付き文字を明示的に読み上げません。使いやすさを向上させ、スクリーン リーダーの区別を容易にするには、ARIA 属性を通じてスクリーン リーダーに表示される説明テキストを含めます。 ARIA 属性をさらに詳しく調べます。

テキストの指定 上付き文字 テキストを通常の行より半文字上に上げ、小さいフォントサイズで表示します。このネストされた要素をクラスでカスタマイズしたり、 すべての上付き文字 タグを使用すると、サイト上のすべての上付き文字テキストのデフォルトの外観を変更できます。

すべての上付き文字タグにスタイルを設定するには:

  1. を選択 上付き文字 テキスト要素
  2. アクセス スタイルパネル
  3. を入力 セレクターフィールド
  4. 選択してください すべての上付き文字 鬼ごっこ
  5. スタイルを調整する

テキストの指定 添字 テキストを通常の行の半文字分下げて、小さいフォントで表示します。このネストされた要素にクラスでスタイルを設定するか、 すべての下付き文字 タグを使用して、サイト上のすべての下付きテキストのデフォルトの外観をカスタマイズします。

All Subscripts タグにスタイルを設定するには:

  1. を選択 添字 テキスト要素
  2. アクセス スタイルパネル
  3. を入力 セレクターフィールド
  4. 選択してください すべての下付き文字 鬼ごっこ
  5. スタイルを調整する

インラインハイパーリンクの挿入

リンクを挿入 選択範囲をハイパーリンクに変換します。その後、要素設定パネルからこの選択範囲のリンク設定を構成できます。デフォルトでは、リンクはすべてのリンク タグからスタイルを継承します。スタイル タグの詳細については、こちらをご覧ください。

テキストをSpanで囲んでさらにスタイルを設定する

インラインスタイルを使用すると、追加のスタイル設定なしで太字、斜体、上付き文字、下付き文字をすばやく適用できます。ただし、下線や背景による強調表示などの追加のテキスト強調には、 spanで囲む スタイル パネルのプロパティを使用してカスタマイズ可能な要素で選択したテキストをラップする機能。クラスを作成して複数の span 要素に適用することもできます。

実例 – 下線付きテキスト

通常、段落内の選択した単語またはフレーズに下線を引くには、テキスト装飾プロパティを変更します。

  1. 編集する段落をダブルクリックします
  2. 下線を引くテキストを選択します
  3. 選択してください スパンでラップ オプション
  4. 確認する テキスト範囲 選択
  5. スタイルパネルで下線テキスト装飾を追加する

書式設定のクリア

カスタム フォーマットを削除するには:

  1. テキスト要素をダブルクリック
  2. 書式設定されたテキストを選択
  3. クリック 書式をクリアする

個々のテキスト部分から書式をクリアしたり、段落全体を選択して 1 回のクリックですべての書式を削除したりすることができます。このアクションにより、インライン スタイル、スパン、およびリンクが削除されます。

非改行スペース

段落を記述する際に、最後の行に単語が1つだけ残っている状況に遭遇することがあります。改行なしスペースを使用すると、スペースを保持したまま単語をつなげることができ、単語の折り返しを防ぐことができます。改行なしスペースを挿入するには、 シフト + 空間 一緒にしておきたい単語の間に挿入します。

重要: 手動の改行や改行禁止スペースを使用する場合は注意してください。大きな画面ではテキスト レイアウトの問題が解決されるかもしれませんが、小さな画面では問題が発生する可能性があります。

ユアン・マック