テキスト

テキストのスタイルを付けるためのユーティリティクラスのコレクションです。

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

スタイル修飾子

UIkitは、テキストのスタイルを付けるための様々なテキストユーティリティを提供します。

クラス	説明
`.uk-text-lead`	例えば、記事の副題などでテキストを強調表示するためにこのクラスを追加します。
`.uk-text-meta`	記事などのメタテキストを含む段落にこのクラスを追加します。

フォントサイズ

次のクラスは、テキストのフォントサイズを変更します。

クラス	説明
`.uk-text-small`	フォントサイズを小さくするためにこのクラスを追加します。
`.uk-text-default`	デフォルトのフォントサイズを設定するためにこのクラスを追加します。
`.uk-text-large`	フォントサイズを大きくするためにこのクラスを追加します。

フォントウェイト

次のクラスのいずれかを追加して、テキストのフォントウェイトを変更します。

クラス	説明
`.uk-text-light`	`300`のフォントウェイトを適用するためにこのクラスを追加します。
`.uk-text-normal`	`400`のフォントウェイトを適用するためにこのクラスを追加します。
`.uk-text-bold`	`700`のフォントウェイトを適用するためにこのクラスを追加します。
`.uk-text-lighter`	より軽いフォントウェイトを適用するためにこのクラスを追加します。
`.uk-text-bolder`	より太いフォントウェイトを適用するためにこのクラスを追加します。

フォントスタイル

.uk-text-italicクラスを追加してイタリック体を作成します。

テキスト変換

次のクラスは、テキストを大文字、先頭大文字、または小文字に変換します。

クラス	説明
`.uk-text-capitalize`	テキストを先頭大文字に変換するためにこのクラスを追加します。
`.uk-text-uppercase`	テキストを大文字に変換するためにこのクラスを追加します。
`.uk-text-lowercase`	テキストを小文字に変換するためにこのクラスを追加します。

テキスト装飾

.uk-text-decoration-noneクラスを追加して、リンクからテキスト装飾を削除します。

テキストカラー

これらのクラスのいずれかを使用して、テキスト要素に異なる色を適用します。

クラス	説明
`.uk-text-muted`	テキストをミュートするためにこのクラスを追加します。
`.uk-text-emphasis`	テキストを強調するためにこのクラスを追加します。
`.uk-text-primary`	主要な色でテキストを強調するためにこのクラスを追加します。
`.uk-text-secondary`	副次的な色でテキストを強調するためにこのクラスを追加します。
`.uk-text-success`	成功を示すためにこのクラスを追加します。
`.uk-text-warning`	警告を示すためにこのクラスを追加します。
`.uk-text-danger`	危険を示すためにこのクラスを追加します。

テキスト背景

テキストにグラデーションまたは背景画像を適用するには、テキスト要素内の<span>要素に.uk-text-backgroundクラスを追加します。background-imageを定義しないスタイルは、主要な色を適用します。

<h1><span class="uk-text-background"></span></h1>

テキスト配置

これらの便利なクラスのいずれかを追加して、テキストの位置揃えを行います。

クラス	説明
`.uk-text-left`	テキストを左揃えにします。
`.uk-text-right`	テキストを右揃えにします。
`.uk-text-center`	テキストを水平方向に中央揃えにします。
`.uk-text-justify`	テキストを両端揃えにします。

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center

<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-left uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-left</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-right uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center</code>
            </div>
        </div>
    </div>
</div>

レスポンシブ

UIkitは、多くのレスポンシブな配置クラスを提供しています。基本的に、通常の配置クラスと同様に機能しますが、有効になるブレークポイントを表すサフィックスが付いています。

クラス	説明
`.uk-text-left@s` `.uk-text-center@s` `.uk-text-right@s`	640px以上のデバイス幅に影響します。
`.uk-text-left@m` `.uk-text-center@m` `.uk-text-right@m`	960px以上のデバイス幅に影響します。
`.uk-text-left@l` `.uk-text-center@l` `.uk-text-right@l`	1200px以上のデバイス幅に影響します。
`.uk-text-left@xl` `.uk-text-center@xl` `.uk-text-right@xl`	1600px以上のデバイス幅に影響します。

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@s

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right@l

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@m

<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center@s uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@s</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-right@l uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right@l</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center@m uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@m</code>
            </div>
        </div>
    </div>
</div>

垂直方向の配置

これらのクラスのいずれかを追加して、オブジェクトに対してテキストを垂直方向に配置します。

クラス	説明
`.uk-text-top`	テキストを上に揃えます。
`.uk-text-middle`	テキストを垂直方向に中央揃えにします。
`.uk-text-bottom`	テキストを下に揃えます。
`.uk-text-baseline`	テキストをベースラインに揃えます。

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.

<div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-top">Lorem ipsum.</span>
    </div>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-middle">Lorem ipsum.</span>
    </div>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-bottom">Lorem ipsum.</span>
    </div>
</div>

テキストの折り返し

これらの便利なクラスのいずれかを追加して、テキストを折り返します。

クラス	説明
`.uk-text-truncate`	テキストが複数行に折り返されるのを防ぎ、切り捨てて代わりに省略記号を表示します。
`.uk-text-break`	文字列の長さがコンテナの幅を超える場合に文字列を折り返します。
`.uk-text-nowrap`	テキストが複数行に折り返されるのを防ぎます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-panel uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
    </div>
</div>

ドキュメント

テキスト