テキスト

本文

本文用テキストのコンポーネントにはsu-text-bodyのクラス名を付与します。

p要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字サイズや行高が調整され、前後に続く要素間に1文字分の余白が入ります。

コンテンツの本文として表示するテキストです。文字数や行数が増えても可読性が保たれるよう、適切にスタイリングされています。

<p class="su-text-body">本文テキスト</p>

キャプション

キャプション用テキストのコンポーネントにはsu-text-captionのクラス名を付与します。

文脈に応じてsmall要素、p要素、figcaption要素などを用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。文字が小さいサイズに調整され、前後に続く要素間に1文字分の余白が入ります。 ※デフォルトではテキストブロックとして扱われます、インラインとして表示させる場合にはスタイルを上書きする必要があります。

注釈や補足説明などの用途で用いられるテキストです。文字サイズが本文より目立たないよう小さくスタイリングされます。

<small class="su-text-caption">キャプションテキスト</small>

ハイライト

ハイライト表示されたテキストのコンポーネントにはsu-text-highlightのクラス名を付与します。

文脈に応じてspan要素、mark要素、p要素などを用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。該当テキストの背景に強調色が適用されます。

注釈や補足説明などの用途で用いられるテキストです。文字サイズが本文より目立たないよう小さくスタイリングされます。

<mark class="su-text-highlight">ハイライトテキスト</mark>

デフォルトでは強調色として黄色（#FFFF00)が適用されます。強調色はCSS変数を使って変更することが可能です。

.su-text-highlight {
  --su-color-text-highlight: red;
}

リンク

リンク用テキストのコンポーネントにはsu-text-linkのクラス名を付与します。

a要素を用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。下線の装飾が加わり、リンクが設定済みであることが明示されます。また、target="_blank"属性値が設定されている場合には、別ウィンドウでリンク先が表示されることを明示するためのアイコンマークが表示されます。

リンクが設定されているテキストです。リンクであることが認識できるようなデザインでスタイリングされます。

<a class="su-text-link" href="#" >リンクテキスト</a>
<a class="su-text-link" href="#" target="_blank">リンクテキスト</a>

別ウィンドウ表示設定時に付与されるアイコンの色はCSS変数を使って変更することが可能です。

.su-text-link {
  --su-color-icon-text-link: red;
}

装飾テキスト（縁取り・ソリッドシャドウ）

装飾テキスト（縁取り・ソリッドシャドウ）用テキストのコンポーネントにはsu-text-outline、もしくはsu-text-solid-shadowのクラス名をスタイルに応じて付与します。

h1〜h6要素やspan要素、p要素などを用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。テキストに対して縁取りやソリッドシャドウが適用され、文字の太さが最大になります。

縁取りやソリッドシャドウなどの装飾が適用されたテキストです。装飾用途としてのスタイルが加わり文字の太さが最大になることで視覚的な印象を与えます。

<span class="su-text-outline">縁取りテキスト</span>
<span class="su-text-solid-shadow">ソリッドシャドウテキスト</span>

装飾文字の文字色、アウトラインの太さと色、ソリッドシャドウのオフセットと色はCSS変数を使って変更することが可能です。

.su-text-outline {
  --su-color-text-outline: red;
  --su-color-decoration-outline: blue;
  --su-size-text-outline: 8px;
}
.su-text-solid-shadow {
  --su-color-text-solid-shadow: green;
  --su-color-decoration-solid-shadow: yellow;
  --su-offset-text-solid-shadow-x: 6px;
  --su-offset-text-solid-shadow-y: 2px;
}

アクセシビリティの支援

リンクテキストはアクセシビリティの対応として、aria-label属性を使ってリンク先の説明を追加することで、スクリーンリーダー使用時にも適切にリンクの案内をすることができます。

<a 
  class="su-text-link" 
  href="#" 
  aria-label="リンク先の説明が入ります"
>リンクテキスト</a>
<a 
  class="su-text-link" 
  href="#" 
  target="_blank" 
  aria-label="新しいタブでリンク先を開きます: リンク先の説明が入ります"
>リンクテキスト</a>