Text

Example#

Feature#

Typography トークンに基づいたスタイルを提供します。

Usage#

• テキストのスタイルに困った場合、シンプルに<Text>でテキストを囲ってください
  • propsを指定しなくとも、本文で使用するスタイル（type='body'、size='md'）がデフォルトで適用されています
• デフォルトでは、<p>要素としてレンダリングされます

<Text>内の一部を装飾したい#

例えば一部の単語を強調したいケースなどがあります。<Text>をネストし、as propでspanを指定、装飾したいpropを追加します。

<Text type="note" size="lg">
  <Text as="span" type="note" size="lg" color="alert" bold>
    Alert:
  </Text>
  Please fill in all fields
</Text>

実際の動作例はtext in textを参照してください。

<p>要素が適さない場合#

• おおむね<p>要素を使用すれば問題有りません
• ただし、いくつかのケースで問題があります
  • <p>要素に<p>要素を内包できません
    • ネストした場合、ブラウザの修復により構造が崩れる可能性があります
  • <button>のような、<p>などのフローコンテンツを子に持てない要素が存在します¹
  • これらの解決策として、as propでレンダリングされる要素を変更します。spanが良いでしょう

ブロックレベル要素が適さない場合#

• <p>はブロックレベル要素²のため水平方向の領域を占有します
• デザイン上、不都合がある可能性があります
• いくつかの解決策が考えられます
  • aspropでインラインレベルの要素に変更
  • CSSでdisplay: inlineなどを指定
  • <Text>の親要素のdisplayにflexやgridを指定

「テキスト」に使えるマークアップ#

代表的なもの列挙します。 <div>や<span>を使う前に、以下のマークアップを検討してください。

• 見出し
  • <h1>〜<h6>
• 注釈など
  • <small>（単純に「小さい文字」ではないため注意）
• 強調
  • <strong>
  • <b>
• 引用
  • <blockquote>
  • <q>
• ルビ
  • <ruby>
  • <rt>
  • <rp>
• 日時
  • <time>
• 省略
  • <abbr>

Related resources#

• コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語 | MDN