サンプル

H2H2サブテキスト

<h2 class="common_h2">H2<span>H2サブテキスト</span></h2>

H3テキスト

<h3 class="common_h3">H3テキスト</h3>

H4テキスト

<h4 class="common_h4">H4テキスト</h4>
<div class="btns">
    <a href="#">ボタン</a>
</div>
<div class="btns">
    <a href="#">ボタン</a>
    <a href="#">ボタン</a>
</div>

2カラム

ダミー

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="column-box txt_left">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <div class="read">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</div>
ダミー

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="column-box txt_right">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <div class="read">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</div>
ダミー
ダミー
<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
</div>
ダミー
テキスト有の場合
ダミー
テキスト有の場合
<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
</div>
ダミー
ダミー
ダミー
<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
</div>
ダミー
テキスト有の場合
ダミー
テキスト有の場合
ダミー
テキスト有の場合
<div class="column3">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
</div>

リスト

  • リスト
  • リスト
  • リスト
  • リスト
<ul class="common_list">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>
  1. リスト
  2. リスト
  3. リスト
  4. リスト
<ol class="common_num-list">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>

行テーブル

項目
テキストテキストテキストテキスト
項目
テキストテキストテキストテキスト
項目
テキストテキストテキストテキスト
<div class="row_table">
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
</div>

テーブル

決算期
第28期
(2015年12月期)
第28期
(2015年12月期)
第28期
(2015年12月期)
第28期
(2015年12月期)
第28期
(2015年12月期)
売上高
78,626
78,626
78,626
78,626
78,626
経常利益
5,235
5,235
5,235
5,235
5,235
売上高
78,626
78,626
78,626
78,626
78,626
経常利益
5,235
5,235
5,235
5,235
5,235
<div class="common_table">
    <div class="table_wrap">
        <dl class="thead">
            <dt>決算期</dt>
            <dt>第28期<br>(2015年12月期)</dt>
            <dt>第28期<br>(2015年12月期)</dt>
            <dt>第28期<br>(2015年12月期)</dt>
            <dt>第28期<br>(2015年12月期)</dt>
            <dt>第28期<br>(2015年12月期)</dt>
        </dl>
        <dl class="tbody">
            <dt>売上高</dt>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
        </dl>
        <dl class="tbody">
            <dt>経常利益</dt>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
        </dl>
        <dl class="tbody">
            <dt>売上高</dt>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
        </dl>
        <dl class="tbody">
            <dt>経常利益</dt>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
        </dl>
    </div>
</div>

トグル

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<ul class="toggle_list">
    <li>
        <div class="toggle_parent">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="toggle_child">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </li>
    <li>
        <div class="toggle_parent">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="toggle_child">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </li>
</ul>

背景有テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="read-box">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
TOP