1. ホーム
  2. Style Guide

Style Guide

見出し

見出し3

見出し4

見出し5
見出し6

ボタン

<a class="btn">button</a>
<button class="btn">button</button>
<a class="btn">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dicta dolores nam perferendis, iste mollitia maiores rem pariatur quis accusantium dolorem. Ducimus exercitationem sed molestias, officiis deserunt, facere officia voluptatum?</a>
<a class="btn is_btn_disabled">disabled</a>
<a class="btn btn_block">button</a>
<a class="btn btn_primary">primary</a>
<a class="btn btn_success">success</a>
<a class="btn btn_info">info</a>
<a class="btn btn_warning">warning</a>
<a class="btn btn_error">error</a>

Images

回り込み

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsa dolorem illum illo! Repellat suscipit atque, obcaecati nesciunt esse id adipisci ipsa laudantium doloribus. Consequatur inventore exercitationem nihil quam accusantium!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsa dolorem illum illo! Repellat suscipit atque, obcaecati nesciunt esse id adipisci ipsa laudantium doloribus. Consequatur inventore exercitationem nihil quam accusantium!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis aspernatur eaque nemo iste maxime nihil, voluptatibus eius placeat soluta accusantium, nam aut sapiente consequuntur quos exercitationem, maiores at ad.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis aspernatur eaque nemo iste maxime nihil, voluptatibus eius placeat soluta accusantium, nam aut sapiente consequuntur quos exercitationem, maiores at ad.

回り込み(廃止予定)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsa dolorem illum illo! Repellat suscipit atque, obcaecati nesciunt esse id adipisci ipsa laudantium doloribus. Consequatur inventore exercitationem nihil quam accusantium!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsa dolorem illum illo! Repellat suscipit atque, obcaecati nesciunt esse id adipisci ipsa laudantium doloribus. Consequatur inventore exercitationem nihil quam accusantium!

Lists

  • リスト
  • リスト
    • リスト
    • リスト
      • リスト
      • リスト
      1. リスト
      2. リスト
    1. リスト
    2. リスト

TableView

Heading

dl

dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.
dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.
dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.
dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.
dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.
dt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet optio fugiat corporis officia, a dolorum eum laudantium voluptas repellendus, dolorem culpa, sequi magni qui nam quod ullam, quae rem consequatur.

Table

caption
th th
th td
th td
th th
th td
th td

Calendar

01
02
03
04
05
06
07
08
01
02
03
04
05
06
07
08
01

aaa

02

aaa

03

aaa

04

aaa

05

aaa

06

aaa

07

aaa

08

aaa

Media

aaaa

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestias consectetur laudantium voluptatibus quas. Doloremque, accusantium veritatis soluta, odio ipsam harum repudiandae omnis dicta dolores rem quidem eligendi id maiores.

aaaa

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestias consectetur laudantium voluptatibus quas. Doloremque, accusantium veritatis soluta, odio ipsam harum repudiandae omnis dicta dolores rem quidem eligendi id maiores.

aaaa

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestias consectetur laudantium voluptatibus quas. Doloremque, accusantium veritatis soluta, odio ipsam harum repudiandae omnis dicta dolores rem quidem eligendi id maiores.

<div class="media">
<div class="media_image"><img src="http://placehold.jp/200x150.png" alt=""></div>
<div class="media_content">
<div class="media_heading">aaaa</div>
<div class="media_body">
<p> Lorem ...</p>
</div>
</div>
</div>

Reverse

aaaa

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestias consectetur laudantium voluptatibus quas. Doloremque, accusantium veritatis soluta, odio ipsam harum repudiandae omnis dicta dolores rem quidem eligendi id maiores.

<div class="media media_reverse"> ... </div>

テキストその他

段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

strong em b small
a

引用テキスト引用テキスト引用テキスト引用テキスト引用テキスト引用テキスト

Labels

Labels

Label
Label
Label
Label
Label
Label

Accordions

trigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus commodi ea hic omnis sunt autem? Esse cumque natus, alias laboriosam est quod dolores illo numquam hic commodi! Ut, ea explicabo!

trigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus commodi ea hic omnis sunt autem? Esse cumque natus, alias laboriosam est quod dolores illo numquam hic commodi! Ut, ea explicabo!

trigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus commodi ea hic omnis sunt autem? Esse cumque natus, alias laboriosam est quod dolores illo numquam hic commodi! Ut, ea explicabo!

Panels

panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus recusandae amet sit non, sunt animi ipsum, nobis ipsam earum distinctio tenetur, necessitatibus, corporis aperiam! Non nulla nobis nostrum, ullam aperiam?

panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus recusandae amet sit non, sunt animi ipsum, nobis ipsam earum distinctio tenetur, necessitatibus, corporis aperiam! Non nulla nobis nostrum, ullam aperiam?

Tabs

tab1

tab2

tab3

tab4

<div class="tab">
<ul class="tab_list">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
</ul>
<div class="tab_content">
<div id="tab1" class="tab_panel">
<p>tab1</p>
</div>
<div id="tab2" class="tab_panel">
<p>tab2</p>
</div>
<div id="tab3" class="tab_panel">
<p>tab3</p>
</div>
<div id="tab4" class="tab_panel">
<p>tab4</p>
</div>
</div>
</div>

tab5

tab6

tab7

tab8

tab9

tab10

tab11

tab12

<div class="tab tab_vertical">
<ul class="tab_list">

フォーム

form

alert

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugiat perferendis facere maxime, sint architecto dolorem cupiditate aspernatur sapiente doloribus, officiis officia, vitae error voluptate, ullam placeat eos soluta neque.

Balloon

ほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげ

progress

50%
70%
100%