ベース

このコンポーネントは、すべてのHTML要素のデフォルトスタイルを提供します。

Normalize.css

Baseコンポーネントは、有名なNormalize.cssのスタイルを利用して、すべてのブラウザで一貫して要素をレンダリングし、色、マージン、フォントサイズなどを含むデフォルトスタイルを適用します。

注記フォーム、ボタン、テーブル要素は、デフォルトでは正規化またはスタイル設定されません。これは、それらの特定のコンポーネントクラスで行われます。UIkitは、堅牢でサードパーティのCSSとの競合を避けるために、プレーンなHTML要素にはできる限り少ないスタイルを適用しようとします。

リンク

<a>要素を使用してテキストをハイパーテキストに変換します。デフォルトのリンクスタイルを適用するには、<span>や同様の要素に.uk-linkクラスを追加することもできます。追加のスタイルオプションについては、リンクコンポーネントをご覧ください。

テキストレベルのセマンティクス

次のリストは、最も一般的に使用されるテキストレベルのセマンティクスとその使用方法の概要を示しています。

要素	説明
`<abbr>`	abbr要素とtitle属性を使用して略語を定義します。
`<b>`	b要素を使用して太字テキストを作成します。
`<cite>`	cite要素を使用して作品名を表します。
`<code>`	`code要素`を使用してインラインコードスニペットを定義します。
`<del>`	~~del要素~~を使用して、ドキュメントの変更を削除されたテキストとしてマークします。
`<dfn>`	dfn要素とtitle属性を使用して定義用語を作成します。
`<em>`	em要素を使用してテキストを強調します。
`<i>`	i要素を使用してテキストの一部を区切ります。
`<ins>`	ins要素を使用して、ドキュメントの変更を挿入されたテキストとしてマークします。
`<kbd>`	`キーボード入力要素`を使用して、ブラウザのデフォルトの等幅フォントに入力を表示します。
`<mark>`	mark要素を使用して、セマンティックな意味のないテキストを強調表示します。
`<q>`	q要素内のq要素を使用して、インライン引用符を定義します。
`<s>`	~~s要素~~を使用して取り消し線を付けたテキストを定義します。
`<samp>`	`samp要素`を使用してサンプル出力を定義します。
`<small>`	small要素を使用して、小さな文字でテキストを弱めます。
`<span>`	span要素を使用してインラインコンテナを定義します。
`<strong>`	strong要素を使用して、追加の重要性を示唆します。
`<sub>`	_sub要素を使用して下付き文字を定義します。
`<sup>`	^sup要素を使用して上付き文字を定義します。
`<u>`	u要素を使用して下線付きテキストを定義します。
`<var>`	`var要素`を使用して変数を定義します。

埋め込みコンテンツ

画像や<audio>、<canvas>、<img>、<svg>、<video>などの他の要素は、UIkitではデフォルトでレスポンシブです。レイアウトが狭くなると、サイズが調整され、比率が維持されます。この動作を回避するには、ユーティリティコンポーネントから.uk-preserve-widthクラスを要素または任意のコンテナに追加します。

ブラウザウィンドウのサイズを変更して、画像のレスポンシブな動作を確認してください。

<div class="uk-width-large">
    <img src="images/photo.jpg" width="1800" height="1200" alt="Image">
</div>

段落

<p>要素を使用して段落を作成します。

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

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

見出し

<h1>から<h6>要素を使用して見出しを定義します。

.uk-h1、.uk-h2、.uk-h3、.uk-h4、.uk-h5、または.uk-h6クラスを追加して、見出しのサイズを変更します（たとえば、h1をh3のように表示する）。追加のスタイルオプションについては、見出しコンポーネントをご覧ください。

h1 見出し 1

h2 見出し 2

h3 見出し 3

h4 見出し 4

h5 見出し 5

h6 見出し 6

<h1>h1 Heading 1</h1>
<h2>h2 Heading 2</h2>
<h3>h3 Heading 3</h3>
<h4>h4 Heading 4</h4>
<h5>h5 Heading 5</h5>
<h6>h6 Heading 6</h6>

<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Item 1</li>
            <li>Item 2
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

定義リスト

<dl>要素を使用して定義リストを作成します。用語を定義するには<dt>を使用し、説明には<dd>を使用します。追加のスタイルオプションについては、定義リストコンポーネントをご覧ください。

定義リスト

定義リストは、用語とその対応する説明を定義します。

これは用語です

これは説明です。

これは用語です

これは説明です。

<dl>
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>

水平線

<hr>要素を使用して水平線を作成します。追加のスタイルオプションについては、区切り線コンポーネントをご覧ください。

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

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


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

<hr>

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

ブロッククォート

ドキュメント内の別のソースから複数の行のコンテンツを引用するには、<blockquote>要素を使用します。

blockquote要素は、別のソースから引用されたコンテンツを表し、フッターまたはcite要素内に含まれる引用をオプションで含めることができます。

ソースタイトルの有名人

<blockquote cite="#">
    <p class="uk-margin-small-bottom">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
    <footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer>
</blockquote>

事前フォーマットされたテキスト

複数の行のコードには、<pre>要素を使用します。スペース、タブ、改行を保持する新しいテキストブロックを作成します。コードブロックを定義するには、内部に<code>要素を入れ子にします。

注記囲まれたコードがマークアップとして解釈されないように、角括弧をエスケープしてください。

// Code example
<div id="myid" class="myclass" hidden>
    Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div>

<pre><code>// Code example
&lt;div id="myid" class="myclass" hidden&gt;
    Lorem ipsum &lt;strong&gt;dolor&lt;/strong&gt; sit amet, consectetur adipiscing elit.
&lt;/div&gt;</code></pre>

ドキュメント

ベース

h1 見出し 1

h2 見出し 2

h3 見出し 3

h4 見出し 4

h5 見出し 5

h6 見出し 6