コンポーネント集
コンテンツコンポーネント
-
ページタイトル
ページタイトル
-
セクション見出し
レベル 1
セクション見出し 1
-
セクション見出し
レベル 2
セクション見出し 2
-
セクション見出し
レベル 3
セクション見出し 3
-
セクション見出し
レベル 4
セクション見出し 4
-
セクション見出し
レベル 5
セクション見出し 5
-
セクション見出し
レベル 6
セクション見出し 6
-
本文
本文テキスト
-
キャプション
キャプションテキスト
-
ハイライト
ハイライトテキスト
-
リンク
通常
-
リンク
別ウィンドウ表示
-
引用ブロック
引用テキスト
引用元
-
引用インラインテキスト
引用テキスト
-
コードブロック
<div class="*****">
<p class="*****">コードブロック内のテキスト</p>
</div>
p {
font-size: 1.5em;
}
-
コードインラインテキスト
<p style="font-size: 1.5em">インラインコード内のテキスト</p>
-
箇条書きリスト
- リスト項目
-
リスト項目
- リスト項目
- リスト項目
-
リスト項目
- リスト項目
- リスト項目
-
順序リスト
- リスト項目
-
リスト項目
- リスト項目
- リスト項目
-
リスト項目
- リスト項目
- リスト項目
-
アイテムリスト
- リスト項目
- リスト項目
- リスト項目
- リスト項目
-
テーブル
ボーダー
表組みキャプション
表ヘッダー見出し1
表ヘッダー見出し2
表ヘッダー見出し3
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表フッター見出し
表フッターデータ1
表フッターデータ2
-
テーブル
ボーダー＆塗り
表組みキャプション
表ヘッダー見出し1
表ヘッダー見出し2
表ヘッダー見出し3
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表フッター見出し
表フッターデータ1
表フッターデータ2
-
テーブル
ストライプ
表組みキャプション
表ヘッダー見出し1
表ヘッダー見出し2
表ヘッダー見出し3
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表見出し
表データ1
表データ2
表フッター見出し
表フッターデータ1
表フッターデータ2
-
レスポンシブ
表見出し1
表データ1-1
表データ1-2
表データ1-3
表データ1-4
表データ1-5
表データ1-6
表見出し2
表データ2-1
表データ2-2
表データ2-3
表データ2-4
表データ2-5
表データ2-6
表見出し3
表データ3-1
表データ3-2
表データ3-3
表データ3-4
表データ3-5
表データ3-6
表見出し4
表データ4-1
表データ4-2
表データ4-3
表データ4-4
表データ4-5
表データ4-6
-
サイズ小
表組みキャプション
表ヘッダー見出し1
表ヘッダー見出し2
表見出し
表データ
表見出し
表データ
表フッター見出し
表フッターデータ
-
サイズ大
表組みキャプション
表ヘッダー見出し1
表ヘッダー見出し2
表見出し
表データ
表見出し
表データ
表フッター見出し
表フッターデータ
-
等幅カラム
表見出し
表データ
表データコンテンツ量が多い
表データ
表見出し
表データ
表データコンテンツ量が多い
表データ
-
セル内の整列
表見出し（上揃え）
表データ（上揃え）
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
表見出し（中央揃え）
表データ（中央揃え）
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
表見出し（下揃え）
表データ（下揃え）
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
-
プライマリーボタン
塗りボタン
-
セカンダリーボタン
アウトラインボタン
-
サイズ小
-
サイズ大
-
ブロック表示
-
スクエア型
-
ピル型
-
汎用アラート
デフォルト
汎用アラートのメッセージテキスト
-
汎用アラート
アイコン
-
汎用アラート
閉じるボタン
汎用アラートのメッセージテキスト（閉じるボタン付き）
-
汎用アラート
アイコン＆閉じるボタン
-
状態アラート
エラー・禁止
エラー・禁止の状態を示すメッセージテキスト
-
状態アラート
エラー・禁止 / アイコン
-
状態アラート
注意・警告
注意・警告の状態を示すメッセージテキスト
-
状態アラート
注意・警告 / アイコン
-
状態アラート
成功・許可
成功・許可・完了の状態を示すメッセージテキスト
-
状態アラート
成功・許可 / アイコン
-
状態アラート
通知・進行中
通知・進行中の状態を示すメッセージテキスト
-
状態アラート
通知・進行中 / アイコン
-
状態アラート
中止・終了
中止・終了の状態を示すメッセージテキスト
-
状態アラート
中止・終了 / アイコン
-
日付・時刻インラインテキスト
-
日付・時刻インラインテキスト
アイコンタイプ date
-
日付・時刻インラインテキスト
アイコンタイプ time
-
カードアイテム
-
カードコンテナ＆カードアイテム
ナビゲーションコンポーネント
-
パンくずリスト
矢印区切り
-
パンくずリスト
スラッシュ区切り
-
ページネーションリンク
記号
-
ページネーションリンク
テキスト
-
前後ページリンク
フォームコンポーネント
-
テキスト入力
input type="text"
-
メールアドレス入力
input type="email"
-
電話番号入力
input type="tel"
-
URL入力
input type="url"
-
数値入力
input type="number"
-
日付入力
input type="date"
-
時刻入力
input type="time"
-
パスワード入力
input type="password"
-
アイコン email
-
アイコン tel
-
アイコン url
-
アイコン date
-
アイコン time
-
アイコン password
-
複数行テキスト入力
-
単一選択セレクトボックス
-
複数選択セレクトボックス
-
検索フォーム
リセットボタン無し
-
検索フォーム
リセットボタンあり
-
検索フォーム
アイコン表示・リセットボタン無し
-
検索フォーム
アイコン表示・リセットボタンあり
-
チェックボックス
-
ラジオボタン
-
単一選択型オプションボタン
-
複数選択型オプションボタン
-
トグルスイッチ
-
レンジ入力
（単一指定）
-
レンジ入力
（範囲指定）
-
ファイル選択ボタン
-
ファイルドロップエリア
-
サムネイルプレビュー
（ファイル選択ボタン）
-
ファイル要件の指定
（ファイルドロップエリア）
インタラクティブコンポーネント
-
折りたたみコンテンツ
アイコンなし
概要テキスト（クリック等で詳細コンテンツの表示切り替え）
-
折りたたみコンテンツ
左側にアイコン
-
折りたたみコンテンツ
右側にアイコン
-
折りたたみコンテンツ
アニメーション表示
概要テキスト（詳細コンテンツの展開にアニメーション）
-
ダイアログボックス
-
フルスクリーン表示