見出し
見出し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
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
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
| 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
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.
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.
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
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>テキストその他
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!
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!
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
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?
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
<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">フォーム
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.