メインコンテンツへスキップ

ドキュメント

見出し

見出しに異なるスタイルを定義します。

このコンポーネントとテキストコンポーネントを組み合わせて、見出しのスタイルを設定します。

サイズ修飾子

以下のクラスのいずれかを追加して、見出しのサイズとスタイルを変更します。通常、これらのクラスは見出し要素に使用されますが、`div`要素など、他の要素でも機能します。これらのクラスはベースコンポーネントの見出しクラスを拡張しており、最小の修飾子は`h1`要素の後のサイズを選択します。

クラス 説明
.uk-heading-small このクラスを追加して、小さな見出しを適用します。
.uk-heading-medium このクラスを追加して、中くらいの見出しを適用します。
.uk-heading-large このクラスを追加して、大きな見出しを適用します。
.uk-heading-xlarge このクラスを追加して、特大の見出しを適用します。
.uk-heading-2xlarge このクラスを追加して、2倍の特大の見出しを適用します。
.uk-heading-3xlarge このクラスを追加して、3倍の特大の見出しを適用します。 
<h1 class="uk-heading-medium"></h1>

  • 小

    中

    大

    特大

    2倍特大

    3倍特大

  • <h1 class="uk-heading-small">Small</h1>
<h1 class="uk-heading-medium">Medium</h1>
<h1 class="uk-heading-large">Large</h1>
<h1 class="uk-heading-xlarge">X-Large</h1>
<h1 class="uk-heading-2xlarge">2X-Large</h1>
<h1 class="uk-heading-3xlarge">3X-Large</h1>

区切り線修飾子

見出しに区切り線を適用するには、`uk-heading-divider`クラスを追加します。任意のサイズ修飾子と組み合わせることができます。

<h1 class="uk-heading-divider"></h1>

  • 見出し区切り線

  • <h1 class="uk-heading-divider">Heading Divider</h1>

箇条書き修飾子

見出しに箇条書きを適用するには、`.uk-heading-bullet`クラスを追加します。任意のサイズ修飾子と組み合わせることができ、テキストの配置とよく合います。

<h1 class="uk-heading-bullet"></h1>

  • 見出し箇条書き

  • <h1 class="uk-heading-bullet">Heading Bullet</h1>

線修飾子

見出しに垂直方向の中央揃えの線を適用するには、`.uk-heading-line`クラスを追加し、見出し要素内に`<span>`要素を配置します。任意のサイズ修飾子と組み合わせることができ、テキストの配置とよく合います。

<h1 class="uk-heading-line"><span></span></h1>

  • 見出し線

    見出し線

    見出し線

  • <h1 class="uk-heading-line"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-center"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>