Sample

B-1 B-2 B-3 B-4 B-5 B-6 B-7 B-8 B-9 B-10 B-11 B-12 B-13 B-14 B-15 B-16 B-17 B-18 B-19 B-20 B-21 B-22 B-23 B-24 B-25 B-26 B-27 B-28 B-29 B-30 B-31 B-32 B-33 B-34 B-35 B-36 B-37 B-38 B-39-40 B-41 B-42 B-43 B-44 B-45 B-46 B-47 B-48 B-49 B-50
Back

Sample

リンクのボタン
Back

Sample

buttonベースのボタン:

input type="button"ベースのボタン:

input type="submit"ベースのボタン:

input type="reset"ベースのボタン:

input type="image"ベースのボタン:

Back

Sample

削除
Back

Sample

左向き矢印 - data-icon="arrow-l"

ボタン

右向き矢印 - data-icon="arrow-r"

ボタン

上向き矢印 - data-icon="arrow-u"

ボタン

下向き矢印 - data-icon="arrow-d"

ボタン

削除 - data-icon="delete"

ボタン

プラス - data-icon="plus"

ボタン

チェック - data-icon="check"

ボタン

歯車 - data-icon="gear"

ボタン

更新 - data-icon="refresh"

ボタン

進む - data-icon="forward"

ボタン

戻る - data-icon="back"

ボタン

グリッド - data-icon="grid"

ボタン

- data-icon="star"

ボタン

警告 - data-icon="alert"

ボタン

情報 - data-icon="info"

ボタン

ホーム - data-icon="home"

ボタン

検索 - data-icon="search"

ボタン
Back

Sample

- data-iconpos="left"(デフォルト)

ボタン

- data-iconpos="right"

ボタン

- data-iconpos="top"

ボタン

- data-iconpos="bottom"

ボタン
Back

Sample

削除
Back

Sample

スウォッチaが適用されたボタン

ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン

スウォッチbが適用されたボタン

ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン

スウォッチcが適用されたボタン

ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン
Back

Sample

ボタン
Back

Sample

ボタン
Back

Sample

キャンセル 保存
Back

Sample

はい いいえ たぶん
Back

Sample

横方向に並んだボタン

はい いいえ たぶん

横方向に並んだボタン(アイコン付き)

上へ 下へ 削除

横方向に並んだボタン(アイコンのみ)

上へ 下へ 削除
Back

Sample

スウォッチa

ボタン

スウォッチb

ボタン

スウォッチc

ボタン

スウォッチd

ボタン

スウォッチe

ボタン
Back

Sample

a b c d e
Back

Sample

スウォッチaのコンテナ

a b c d e

スウォッチbのコンテナ

a b c d e

スウォッチcのコンテナ

a b c d e

スウォッチdのコンテナ

a b c d e

スウォッチeのコンテナ

a b c d e
Back

Sample

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

How about some blockquote action with a cite

This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.

We add a few styles to tables and fieldsets to make them more legible, which are easily overridden with customs styles.

  1. Ordered list item 1
  2. Ordered list item 1
  3. Ordered list item 1
Definition term
I'm the definition text
Definition term
I'm the definition text
Travel Itinerary
Flight: From: To:
Total: 3 flights
JetBlue 983 Boston (BOS) New York (JFK)
JetBlue 354 San Francisco (SFO) Los Angeles (LAX)
JetBlue 465 New York (JFK) Portland (PDX)
Back

Sample

これはブロックAです。文字列は折り返されます。
これはブロックBです。文字列は折り返されます。
Back

Sample

Back

Sample

ブロックA
ブロックB
Back

Sample

ブロックA
ブロックB
ブロックC
Back

Sample

Back

Sample

ブロックA
ブロックB
ブロックC
ブロックD
Back

Sample

ブロックA
ブロックB
ブロックC
ブロックD
ブロックE
Back

Sample

ブロックA
ブロックB
ブロックC
ブロックA
ブロックB
ブロックC
ブロックA
ブロックB
ブロックC
Back

Sample

これはヘッダーです

これは折りたたみ可能なコンテンツです。デフォルトでは折りたたまれていますが、ヘッダーをクリックすると展開されます

Back

Sample

これはヘッダーです

これは折りたたみ可能なコンテンツです。デフォルトでは折りたたまれていますが、ヘッダーをクリックすると展開されます

Back

Sample

これはヘッダーです

これは折りたたみ可能なブロックです。スウォッチcが適用されています

Back

Sample

ヘッダー(スウォッチa)

これは折りたたみ可能なブロックです。スウォッチaが適用されています

ヘッダー(スウォッチb)

これは折りたたみ可能なブロックです。スウォッチdが適用されています

Back

Sample

これはヘッダーです

これは折りたたみ可能なコンテンツです。デフォルトで展開されていますが、ヘッダーをクリックすると非表示になります。

入れ子になった折りたたみ可能なコンテンツです。内部でさらに入れ子になっています

第2レベルのコンテンツです

内部の入れ子です

第3レベルのコンテンツです

フォーム要素の例

折りたたまれたリスト

埋め込みリスト:

Back

Sample

セクション1

これは折りたたみ可能なコンテンツであり、アコーディオンのようにふるまいます。data-collapsed="false"が指定されているため、初期状態では展開されています

セクション2

これは折りたたみ可能なコンテンツであり、アコーディオンのようにふるまいます。初期状態では折りたたまれており、表示させるためにはヘッダー部分をクリックする必要があります

セクション3

これは折りたたみ可能なコンテンツであり、アコーディオンのようにふるまいます。初期状態では折りたたまれており、表示させるためにはヘッダー部分をクリックする必要があります

セクション4

これは折りたたみ可能なコンテンツであり、アコーディオンのようにふるまいます。初期状態では折りたたまれており、表示させるためにはヘッダー部分をクリックする必要があります

セクション5

これは折りたたみ可能なコンテンツであり、アコーディオンのようにふるまいます。初期状態では折りたたまれており、表示させるためにはヘッダー部分をクリックする必要があります

Back

Sample

セクション1

折りたたみ可能なコンテンツ

セクション2

折りたたみ可能なコンテンツ

セクション3

折りたたみ可能なコンテンツ

Back

Sample

セクション1(スウォッチB)

折りたたみ可能なコンテンツ(スウォッチB)

セクション2(スウォッチA)

折りたたみ可能なコンテンツ(スウォッチA)

セクション3(スウォッチE)

折りたたみ可能なコンテンツ(スウォッチD)

Back

Sample

H1の見出し

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

折りたたみ可能なコンテンツ

コンテナの要素でdata-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

折りたたみ可能なコンテンツ

コンテナの要素でdata-content-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

Back

Sample

H1の見出し

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

折りたたみ可能なコンテンツ

コンテナの要素でdata-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

折りたたみ可能なコンテンツ

コンテナの要素でdata-content-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

Back

Sample

H1の見出し

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

折りたたみ可能なコンテンツ

コンテナの要素でdata-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

折りたたみ可能なコンテンツ

コンテナの要素でdata-content-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

Back

Sample

H1の見出し

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

折りたたみ可能なコンテンツ

コンテナの要素でdata-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

折りたたみ可能なコンテンツ

コンテナの要素でdata-content-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

Back

Sample

H1の見出し

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

折りたたみ可能なコンテンツ

コンテナの要素でdata-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

折りたたみ可能なコンテンツ

コンテナの要素でdata-content-theme属性を設定しているため、コンテナの色をコンテンツのブロックにマッチさせることができます。

Back

Sample

Back

Sample

Back

Sample

  1. ゴッドファーザー
  2. インセプション
  3. 続・夕陽のガンマン
Back

Sample

シンプルなリスト

カウントのバブル表示付きのリスト

番号付きのリスト

  1. ゴッドファーザー
  2. インセプション
  3. 続・夕陽のガンマン

書式設定されたコンテンツ

アイコン付きのリスト

サムネイル付きのリスト

区切りと検索フィルター付きのリスト

Back

Sample

Back

Sample

Back

Sample

Back

Sample

Back

Sample

Back

Sample

Back

Sample

Back

Sample

シンプルなリスト

カウントのバブル表示付きのリスト

番号付きのリスト

  1. ゴッドファーザー
  2. インセプション
  3. 続・夕陽のガンマン

書式設定されたコンテンツ

アイコン付きのリスト

サムネイルと分割されたボタン付きのリスト

区切りと検索フィルター付きのリスト