フォント・テキスト

フォントサイズ

本文のフォントサイズ指定

フォントサイズ（デフォルト）

デフォルトのフォントサイズを明示的に指定する場合は、ヘルパークラスu-text-baseを使用します。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
<p class="u-text-base">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>

フォントサイズ（小）

<p class="u-text-sm">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>

フォントサイズ（大）

<p class="u-text-lg">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>

その他フォントサイズ指定

下記表は、各識別子に対応する余白サイズの範囲を示しています。例えば「base」の場合、画面幅が640pxのときに余白サイズが14px、1280pxのときに余白サイズが16pxとなります。各識別子において、指定された画面幅の範囲内では、余白サイズは画面幅に比例して滑らかに変化します。

ヘルパークラス	余白サイズ範囲	レスポンシブ幅	備考
u-text-xs	11px~12px	640px~1280px
u-text-sm	12px~14px	640px~1280px
u-text-base	14px~16px	640px~1280px	デフォルト
u-text-lg	16px~18px	640px~1280px
u-text-xl	18px~20px	640px~1280px
u-text-2xl	20px~24px	640px~1280px	見出しレベル4
u-text-3xl	24px~30px	640px~1280px	見出しレベル3
u-text-4xl	30px~16px	640px~1280px	見出しレベル2
u-text-5xl	36px~48px	640px~1280px	見出しレベル1
u-text-6xl	48px~60px	640px~1280px
u-text-7xl	60px~72px	640px~1280px
u-text-8xl	72px~96px	640px~1280px
u-text-9xl	96px~128px	640px~1280px

u-text-2xl

u-text-2xl（画面幅1280px以上の場合にテイストサイズ2xlを適用）

<div class="u-text-2xl">u-text-2xl</div>
<div class="xl:u-text-2xl">u-text-2xl（画面幅1280px以上の場合にテイストサイズ2xlを適用）</div>

イレギュラーなフォントサイズの指定

イレギュラーな調整が必要な場合、以下ヘルパークラスで調整することできます。※ただし、まずは識別子を利用したヘルパークラスを優先的に使用することを検討してください。

u-text-*は、12pxから100pxまで2px刻みで設定可能です。例: u-text-12px, u-text-14px, ..., u-text-100px

u-text-14px

u-text-18px

u-text-24px

u-text-40px

<p class="u-text-14px">u-text-14px</p>
<p class="u-text-18px">u-text-18px</p>
<p class="u-text-24px">u-text-24px</p>
<p class="u-text-40px">u-text-40px</p>

テキスト関連

テキストカラー

メインカラー（u-text-primary）

サブカラー（u-text-secondary）

警告（u-text-danger）

<p class="u-text-primary">メインカラー（u-text-primary）</p>
<p class="u-text-secondary">サブカラー（u-text-secondary）</p>
<p class="u-text-danger">警告（u-text-danger）</p>

改行コントロール

テキストテキストテキストテキストテキストテキストテキストテキストテキスト。途中改行されないテキスト。テキストテキストテキストテキストテキストテキストテキスト。

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト。<span class="u-inline-block">途中改行されないテキスト。</span>テキストテキストテキストテキストテキストテキストテキスト。</p>

縦文字

吾輩は猫である

<p class="u-writing-vertical-rl">吾輩は猫である</p>

テキストオーバーフロー

データ属性data-text-overflow="行数"で対応。行数は1~5まで対応。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<p class="u-text-overflow-[2]">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>

テキスト配置

左右配置

左寄せ（デフォルト）

右寄せ

中央寄せ

<p class="u-text-left">左寄せ（デフォルト）</p>
<p class="u-text-right">右寄せ</p>
<p class="u-text-center">中央寄せ</p>

上下配置

縦方向上揃え（u-align-top）

縦方向中央（u-align-middle）

縦方向下揃え（u-align-bottom）

<p><img class="u-align-middle u-inline u-mr-16px" src="https://picsum.photos/120/80" alt="" width="120" height="80"><span class="u-align-top">縦方向上揃え（u-align-top）</span></p>
<p><img class="u-align-middle u-inline u-mr-16px" src="https://picsum.photos/120/80" alt="" width="120" height="80"><span class="u-align-middle">縦方向中央（u-align-middle）</span></p>
<p><img class="u-align-middle u-inline u-mr-16px" src="https://picsum.photos/120/80" alt="" width="120" height="80"><span class="u-align-bottom">縦方向下揃え（u-align-bottom）</span></p>

フォント関連

太文字、通常の太さ、下線、欧文フォント

太文字テキスト（u-font-bold）

中間の太さのテキスト（u-font-medium）

通常の太さのテキスト（u-font-normal）

細いウェイトのテキスト（u-font-light）

下線テキスト（u-underline）

斜体を正体に変更する（u-not-italic）

<p class="u-font-bold">太文字テキスト（u-font-bold）</p>
<p class="u-font-medium">中間の太さのテキスト（u-font-medium）</p>
<p class="u-font-normal">通常の太さのテキスト（u-font-normal）</p>
<p class="u-font-light">細いウェイトのテキスト（u-font-light）</p>
<p class="u-underline">下線テキスト（u-underline）</p>
<address class="u-not-italic">斜体を正体に変更する（u-not-italic）</address>

テキスト強調（太字）

<em class="u-font-bold u-not-italic">：文章のニュアンスや読み方を変える強調 <strong>：特に重要な情報を強調する場合

em: 私は本当にそう思います。 strong: 提出期限は明日までです。

<p>
em: 私は<em class="u-font-bold u-not-italic">本当に</em>そう思います。<br aria-hidden="true">
strong: <strong>提出期限は明日まで</strong>です。
</p>

テキスト強調（赤文字）

ヘルパークラスu-text-dangerを使用します。

strong: 提出期限は明日までです。

<p>strong: <strong class="u-text-danger">提出期限は明日まで</strong>です。</p>