Documentation page

v0.0.14-alpha Docs
Typography
Docs
Component
Button
Docs
Component
Icon
Docs
Component
Forms
Docs
Component
Grid
Docs
Component
Alert
Docs
Component
Breadcrumbs
Docs
Component
List
Docs
Component
Table
Docs
Component
Track
Docs
Component
Pagination
Docs
Component
Search
Docs
Component

タイポグラフィ

大きな見出し

ディスプレイタイトル1 新しい時代
ディスプレイタイトル2 新しい時代
ディスプレイタイトル3 新しい時代
ディスプレイタイトル4 新しい時代
ディスプレイタイトル5 新しい時代

見出し

h1. タイトル 新しい時代

h2. タイトル 新しい時代

h3. タイトル 新しい時代

h4. タイトル 新しい時代

h5. タイトル 新しい時代
h6. タイトル 新しい時代

サブタイトル付き見出し

h1. タイトル 補足するサブタイトル

h2. タイトル 補足するサブタイトル

h3. タイトル 補足するサブタイトル

h4. タイトル 補足するサブタイトル

h5. タイトル 補足するサブタイトル
h6. タイトル 補足するサブタイトル

本文

標準テキスト

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

リードテキスト

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

大サイズのテキスト Large

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

小サイズのテキスト Small

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

極小サイズのテキスト Extra Small

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

インラインテキスト要素

マーク要素: mark要素でテキストをハイライト表示する。

del要素: 削除したことを示す要素。

s要素: もはや関連性がないことを表すために取り消し線を引きたいときに使う。

ins要素: 追加したテキストであることを示す要素。

u要素: テキストに下線を引く要素。

small要素: テキストを、親要素の86%のフォント・サイズで表示する。

strong要素: 強調したいテキストを、太字で表示する。

em要素: テキストをイタリック体で表示する。

配置クラス

左詰め

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

右詰め

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

中央詰め

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

両端揃え

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

改行しない

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしています。未来の可能性を信じ、より良い明日を創っていくことを目指しています。創業から20年目には、これまでの延長線上にはない未来に向けて体現し続けるべきビジョンとして、「グローバルイノベーションカンパニー」となることを掲げました。

変換クラス

小文字 Rendered as lower-case text

大文字 Rendered as upper-case text

単語を大文字で始める Rendered as capitalized text

略語や頭字語

略語や頭字語であることを示す attr要素のスタイル。

小麦粉は5 lb. の袋入りで売られている。

WWW

initialism

略語や頭字語を少しだけ(90%)小さくするためのクラス".initialism"

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

アドレス

楽天クリムゾンハウス.

〒158-0094
東京都世田谷区玉川一丁目14番1号
Tel: 050-5581-6910(代)

引用・転載文

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしてきました。

私たちは1997年の創業時より、イノベーションの力を信じ、大切にしてきました。

三木谷浩史

リスト

順不同リスト

  • コンプライアンス体制
    • コンプライアンス研修の実施
    • ハラスメント研修の実施
  • 楽天ホットライン
  • 個人情報の保護と利活用について

順序リスト

  1. コンプライアンス体制
  2. コンプライアンス研修の実施
  3. 楽天ホットライン
  4. 個人情報の保護と利活用について

装飾のないリスト

  • コンプライアンス体制
    • コンプライアンス研修の実施
    • ハラスメント研修の実施
  • 楽天ホットライン
  • 個人情報の保護と利活用について

※印つきリスト

  1. コンプライアンス研修の実施
  2. ハラスメント研修の実施
  3. 楽天ホットライン
  4. 個人情報の保護と利活用について

※印つき順序リスト

  1. リスト
  2. コンプライアンス研修の実施
  3. ハラスメント研修の実施
  4. 楽天ホットライン
  5. 個人情報の保護と利活用について

*印つきリスト(主に英文用)

  1. Compliance system
  2. Implement compliance training
  3. Rakuten hotline
  4. About protection and utilization of personal information

*印つき順序リスト(主に英文用)

  1. Compliance system
  2. Implement compliance training
  3. Rakuten hotline
  4. About protection and utilization of personal information

説明リスト

用語A
用語Aの説明。
用語B
用語Bの説明1。
用語Bの説明2。
用語C
用語Cの説明。

水平の説明リスト

用語A
用語Aの説明。
楽天主義
グローバル イノベーション カンパニー
イノベーションを通じて、 人々と社会をエンパワーメントする。

インラインリスト

  • リスト
  • リスト
  • リスト

ボタン

基本のボタン

a要素

icon付きボタン

a要素

アクティブ時・disabled時のボタン

a要素 ノーマル a要素 アクティブ a要素 disabled

デザインの異なるボタン

Outlined

a要素 a要素 a要素 アクティブ a要素 disabled

Pills

a要素 a要素 a要素 アクティブ a要素 disabled

Outlined Pills

a要素 a要素 a要素 アクティブ a要素 disabled

ブロックレベルボタン

a要素でブロック 中 a要素でブロック 大

ボタン・グループ

ボタン groups doesn't exsist in this section

基本

ボタンツールバー

サイズ・バリエーション

ボタンを均等サイズに並べる

基本的にボタンとして振舞うものはbutton要素として記述すべきですが、a要素をボタン要素のように扱うにはいかのことに気をつけてください

  • role="button"をつける
  • tabindex="0"をつける
  • keyupイベントハンドラを実装する

さまざまなスタイルのボタン

Chevron

トップに戻るボタン

プラスマイナスボタン

Loading

サイズ・バリエーション

アイコン

グループアイコン

その他のアイコン

中サイズのアイコン

小さいサイズのアイコン

ボタンについたアイコン

アイコンサイズはフォントサイズに依存している。

フォーム

input要素

※必須項目
※必須項目

状態変化

基本スタイル
補足テキスト
ラベル付き
※必須項目
Disabled 無効
※必須項目
サクセス
成功
エラー
エラー:全角で入力してください。

textarea要素

基本スタイル
※補足コメント
※補足コメント
成功時
成功
エラー時
エラー
Disabled時
※必須項目

セレクトボックス

ラジオボタン

性別

チェックボックス

好きなスポーツ

Disabled 無効

Switch

サイズ・バリエーション

input大
input標準
input小

Horizontal 水平フォーム

お客様情報
性別
好きなスポーツ

インラインフォーム

フォームグループ

*全角カタカナで入力ください
※入力の間違いにご注意ください

アラート

標準のアラート

リンク付きアラート

パンくずリスト

リスト

標準のリスト

100%幅

1/3幅

アイコン付きリスト

100%幅

1/3幅

100%幅 境界線あり

1/2幅 境界線あり

テーブル

基本のテーブル

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

ストライプ柄のテーブル

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

ボーター付きテーブル

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

マウスオーバーで背景色を変更

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

行間の狭いテーブル

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

カラーを指定

クラス 意味
danger 危険、エラー
warning 注意、警告
info 否定的でも肯定的でもない中立的情報。
success 肯定的。
active アクティブ。

レスポンシブなテーブル

商品名 商品タイプ ポイント 単価
101S ブラウス ベビーブルー 135 13500
201M スカート ボルドー 49 4900
301L Tシャツ クロムイエロー 210 21000
111L ワンピース スカイブルー 89 8900

2セルのレスポンシブテーブル

惑星の半径
木星 太陽系の中で大きさ、質量ともに最大の惑星である。71,492㎞
土星 巨大ガス惑星に属する土星の平均半径は地球の約9倍に当る。60,268㎞
天王星 1781年3月13日、イギリスの天文学者ウィリアム・ハーシェルにより発見された。25,559㎞
海王星 太陽系惑星の中では最も太陽から遠い位置を公転している。24,764㎞

トラック

5 Steps

4 Steps

3 Steps

パジネーション

標準のページネーション

テキスト付きページネーション

検索窓

基本の検索ボックス