h1見出し

ソースをコピーする

<div class="main-visual">
  <div class="inner-wrap">
    <div class="h1-ttl">
      <h1 class="ttl">h1見出し</h1>
      <p class="division">部署</p>
    </div>
    <div class="item-txt">SAMPLE</div>
  </div>
<!-- /.main-visual --></div>
<div class="breadcrumbs">
  <div class="inner-wrap">
    <ul>
      <li><a href="/">HOME</a></li>
      <li>下層タイトル</li>
    </ul>
  </div>
<!-- /.breadcrumbs --></div>

ソースをコピーする

<div class="h2-ttl">
  <h2 class="ttl">h2見出し</h2>
</div>

ソースをコピーする

<div class="h3-ttl">
  <h3 class="ttl">h3見出し</h3>
</div>

ソースをコピーする

<h4 class="h4-ttl">h4見出し</h4>

ソースをコピーする

<h5 class="h5-ttl">h5見出し</h5>

ソースをコピーする

<p class="catch-copy">キャッチコピーが入ります。<br>強調テキスト。キャッチコピーが入ります。</p>

ソースをコピーする

<p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

ソースをコピーする

<p class="note-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

ソースをコピーする

<div class="bg-box">
  <p class="box-ttl">タイトル</p>
  <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /.bg-box --></div>

ソースをコピーする

<div class="bg-box bg-red">
  <p class="box-ttl">タイトル</p>
  <p class="normal-txt txt-red">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /.bg-box --></div>

ソースをコピーする

<div class="bg-box bg-white">
  <p class="box-ttl">タイトル</p>
  <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /.bg-box --></div>

ソースをコピーする

<div class="bd-box">
  <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /.bg-box --></div>

ソースをコピーする

<div class="shadow-box">
  <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /.shadow-box --></div>

ソースをコピーする

<ul class="normal-list">
  <li>箇条書き（順不同）のリストが入ります。テキストが入ります。</li>
  <li>箇条書き（順不同）のリストが入ります。テキストが入ります。箇条書き（順不同）のリストが入ります。テキストが入ります。<br>箇条書き（順不同）のリストが入ります。テキストが入ります。テキストが入ります。</li>
  <li>箇条書き（順不同）のリストが入ります。テキストが入ります。</li>
<!-- /.normal-list --></ul>

ソースをコピーする

<ol class="num-list">
  <li><span class="unit">1.</span><div class="list-inner">箇条書き（順不同）のリストが入ります。テキストが入ります。</div></li>
  <li><span class="unit">2.</span><div class="list-inner">箇条書き（順不同）のリストが入ります。テキストが入ります。箇条書き（順不同）のリストが入ります。テキストが入ります。<br>箇条書き（順不同）のリストが入ります。テキストが入ります。テキストが入ります。</div></li>
  <li><span class="unit">3.</span><div class="list-inner">箇条書き（順不同）のリストが入ります。テキストが入ります。</div></li>
<!-- /.num-list --></ol>

ソースをコピーする

<div class="input-wrap">
  <input type="checkbox" id="checkbox01" class="checkbox" checked>
  <label for="checkbox01" class="check-label">チェックボックス</label>
<!-- /.input-wrap --></div>
<div class="input-wrap">
  <input type="checkbox" id="checkbox02" class="checkbox">
  <label for="checkbox02" class="check-label">チェックボックス</label>
<!-- /.input-wrap --></div>
<div class="input-wrap">
  <input type="checkbox" id="checkbox03" class="checkbox">
  <label for="checkbox03" class="check-label">チェックボックス</label>
<!-- /.input-wrap --></div>

ソースをコピーする

<div class="input-wrap">
  <input type="radio" id="radio01" class="radio" name="radio-btn" checked>
  <label for="radio01" class="radio-label">ラジオボタン</label>
<!-- /.input-wrap --></div>
<div class="input-wrap">
  <input type="radio" id="radio02" class="radio" name="radio-btn">
  <label for="radio02" class="radio-label">ラジオボタン</label>
<!-- /.input-wrap --></div>
<div class="input-wrap">
  <input type="radio" id="radio03" class="radio" name="radio-btn">
  <label for="radio03" class="radio-label">ラジオボタン</label>
<!-- /.input-wrap --></div>

ソースをコピーする

<div class="select-wrap">
  <select name="test-select" class="cmn-select">
    <option value="optionの例1">optionの例1</option>
    <option value="optionの例2">optionの例2</option>
    <option value="optionの例3">optionの例3</option>
    <option value="optionの例4">optionの例4</option>
  </select>
<!-- /.select-wrap --></div>

ソースをコピーする

<div class="file-wrap">
  <input type="file" id="file01" name="test-file" class="file-upload js-filefile-upload" accept=".jpg, .jpeg, .png">
  <label for="file01" class="file-label">ファイルを選択</label>
  <p class="file-txt">選択されていません</p>
<!-- /.file-wrap --></div>

ソースをコピーする

<div class="date-wrap">
  <input type="date" class="cmn-date">
<!-- /.date-wrap --></div>

ソースをコピーする

<div class="form-dl-wrap">
  <dl class="form-dl">
    <dt><label for="sample-txt">テキスト</label></dt>
    <dd><input type="text" class="cmn-input" id="sample-txt"></dd>
  </dl>
  <dl class="form-dl">
    <dt><label for="sample-tel">電話番号</label></dt>
    <dd><input type="tel" class="cmn-input" id="sample-tel"></dd>
  </dl>
  <dl class="form-dl">
    <dt><label for="sample-mail">メールアドレス</label></dt>
    <dd><input type="email" class="cmn-input" id="sample-mail"></dd>
  </dl>
<!-- /.form-dl-wrap --></div>

ソースをコピーする

<ul class="notes-list">
  <li><span class="unit">※</span><div class="list-inner">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div></li>
<!-- /.notes-list --></ul>

ソースをコピーする

<div class="cmn-dl-wrap">
  <dl class="cmn-dl">
    <dt>定義リスト（タイトル）</dt>
    <dd>定義リスト（本文）が入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
  </dl>
  <dl class="cmn-dl">
    <dt>定義リスト（タイトル）</dt>
    <dd>定義リスト（本文）が入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
  </dl>
  <dl class="cmn-dl">
    <dt>定義リスト（タイトル）</dt>
    <dd>定義リスト（本文）が入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
  </dl>
<!-- /.cmn-dl-wrap --></div>

ソースをコピーする

<div class="table-wrap">
  <table class="normal-table">
    <colgroup><col class="w25p"><col class="w75p"></colgroup>
    <tbody>
      <tr>
        <th>項目タイトル</th>
        <td>内容が入ります。内容が入ります。内容が入ります。内容が入ります。</td>
      </tr>
      <tr>
        <th>項目タイトル</th>
        <td>内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。</td>
      </tr>
    </tbody>
  </table>
<!-- /.table-wrap --></div>

ソースをコピーする

<div class="cmn-acc-box-wrap">
  <div class="cmn-acc-box js-acc-wrap">
    <button type="button" class="acc-ttl js-acc-ttl">アコーディオン<span class="mark"></span></button>
    <div class="acc-contents js-acc-contents">
      <div class="contents-inner">
        <ul class="normal-list">
          <li>箇条書き（順不同）のリストが入ります。テキストが入ります。テキストが入ります。</li>
          <li>箇条書き（順不同）のリストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
            <ul class="normal-list">
              <li>箇条書き（順不同）のリストが入ります。入れ子にする場合はインデントをつけます。テキストが入ります。テキストが入ります。</li>
            </ul>
          </li>
          <li>箇条書き（順不同）のリストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
        <!-- /.normal-list --></ul>
      <!-- /.contents-inner --></div>
    <!-- /.acc-contents --></div>
  <!-- /.cmn-acc-box --></div>
<!-- /.cmn-acc-box-wrap --></div>

ソースをコピーする

<div class="panel-wrap col3">
  <div class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></div>
  <div class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></div>
  <div class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></div>
<!-- /.panel-wrap --></div>

ソースをコピーする

<div class="panel-wrap col3">
  <a href="@@@" class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></a>
  <a href="@@@" class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></a>
  <a href="@@@" class="panel">
    <div class="img"><img src="/assets/images/_dummy/img_dummy_panel.jpg" alt="ダミー画像です"></div>
    <div class="txt-wrap">
      <p class="panel-ttl">タイトルリスト</p>
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <!-- /.panel --></a>
<!-- /.panel-wrap --></div>

ソースをコピーする

<ul>
  <li><a href="@@@" class="link-txt">テキストリンク（通常）</a></li>
  <li><a href="#anchor-target-01" class="link-txt anchor-link js-anchor-link">テキストリンク（アンカー）</a></li>
  <li><a href="@@@" target="_blank" class="link-txt">テキストリンク（別窓）</a></li>
  <li><a href="@@@.pdf" target="_blank" class="link-txt">テキストリンク（PDF）</a></li>
</ul>
<p class="mt20">本文テキストが入ります。本文テキストが入ります。<a href="@@@" class="link-txt">テキストリンク（通常）</a>本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。<a href="@@@.pdf" target="_blank" class="link-txt">テキストリンク（PDF）</a>本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。<a href="@@@" target="_blank" class="link-txt">テキストリンク（別窓）</a>本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。</p>

ソースをコピーする

<p class="normal-txt"><a href="@@@" class="link-txt icn-link">テキストリンク（通常）</a></p>
<p class="normal-txt"><a href="@@@" class="link-txt icn-link" target="_blank">テキストリンク（通常）</a></p>
<p class="normal-txt"><a href="@@@.pdf" class="link-txt icn-link" target="_blank">テキストリンク（通常）</a></p>
<p class="normal-txt layout-r"><a href="@@@" class="link-txt icn-link">テキストリンク（通常）</a></p>

ソースをコピーする

<ul class="link-list col1">
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@" target="_blank">テキストリンク（通常）</a></li>
  <li><a href="@@@" target="_blank">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
</ul>

ソースをコピーする

<ul class="link-list col2">
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
</ul>

ソースをコピーする

<ul class="link-list col3">
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
  <li><a href="@@@">テキストリンク（通常）</a></li>
</ul>

ソースをコピーする

<div class="btn-wrap btn2">
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn" target="_blank"><span>ボタン通常</span></a>
  <a href="@@@" class="btn" target="_blank"><span>ボタン通常</span></a>
  <a href="@@@" class="btn no-icn-btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn no-icn-btn"><span>ボタン通常</span></a>
<!-- /.btn-wrap --></div>
            

ソースをコピーする

<div class="btn-wrap btn3">
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
  <a href="@@@" class="btn"><span>ボタン通常</span></a>
<!-- /.btn-wrap --></div>
            

ソースをコピーする

<div class="cmn-tab-wrap js-tab-wrap">
  <div class="cmn-tab-ttl-wrap">
    <ul>
      <li><a href="#tab01-01" class="cmn-tab-ttl js-tab-ttl cur"><span>タブボタンカレント</span></a></li>
      <li><a href="#tab01-02" class="cmn-tab-ttl js-tab-ttl"><span>タブボタン</span></a></li>
    </ul>
  <!-- /.cmn-tab-ttl-wrap --></div>
  <div class="cmn-tab-contents-wrap inner-wrap">
    <div id="tab01-01" class="cmn-tab-contents js-tab-contents cur">
      <div class="inner-s-wrap">
        <p>タブ1</p>
      </div>
    <!-- /.cmn-tab-contents --></div>
    <div id="tab01-02" class="cmn-tab-contents js-tab-contents">
      <div class="inner-s-wrap">
        <p>タブ2</p>
      </div>
    <!-- /.cmn-tab-contents --></div>
  <!-- /.cmn-tab-contents-wrap --></div>
<!-- /.cmn-tab-wrap --></div>

ソースをコピーする

<div class="cmn-tab-wrap js-tab-wrap">
  <div class="cmn-tab-ttl-wrap">
    <ul>
      <li><a href="#tab02-01" class="cmn-tab-ttl js-tab-ttl cur"><span>タブボタンカレント</span></a></li>
      <li><a href="#tab02-02" class="cmn-tab-ttl js-tab-ttl"><span>タブボタン</span></a></li>
      <li><a href="#tab02-03" class="cmn-tab-ttl js-tab-ttl"><span>タブボタン</span></a></li>
    </ul>
  <!-- /.cmn-tab-ttl-wrap --></div>
  <div class="cmn-tab-contents-wrap">
    <div id="tab02-01" class="cmn-tab-contents js-tab-contents cur">
      <div class="inner-s-wrap">
        <p>タブ1</p>
      </div>
    <!-- /.cmn-tab-contents --></div>
    <div id="tab02-02" class="cmn-tab-contents js-tab-contents">
      <div class="inner-s-wrap">
        <p>タブ2</p>
      </div>
    <!-- /.cmn-tab-contents --></div>
    <div id="tab02-03" class="cmn-tab-contents js-tab-contents">
      <div class="inner-s-wrap">
        <p>タブ3</p>
      </div>
    <!-- /.cmn-tab-contents --></div>
  <!-- /.cmn-tab-contents-wrap --></div>
<!-- /.cmn-tab-wrap --></div>

ソースをコピーする

<div class="cmn-img-box">
  <img src="/assets/images/_dummy/img_dummy_cmn.jpg" alt="ダミー画像です" class="scroll-img">
<!-- /.cmn-img-box --></div>

ソースをコピーする

<div class="cmn-search"> 
  <input type="search" name="search" placeholder="キーワードを入力" class="search-input">
  <input type="submit" name="submit" value="" class="search-submit">
<!-- cmn-search --></div>

ソースをコピーする

<div class="switch-wrap">
  <input type="checkbox" id="toggleSwitch" class="switch-input">
  <label for="toggleSwitch" class="switch-ball"></label>
<!-- /.switch-wrap --></div>

ソースをコピーする

<nav class="pager">
  <ul>
    <li class="prev"><a href="@@@">前へ</a></li>
    <li><span class="cur">01</span></li>
    <li><a href="@@@">02</a></li>
    <li><a href="@@@">03</a></li>
    <li class="omit"><img src="/assets/images/icn_pager_dots.svg" alt=""></li>
    <li><a href="@@@">100</a></li>
    <li class="next"><a href="@@@">次へ</a></li>
  </ul>
<!-- /.pager --></nav>

ソースをコピーする

<div class="label-wrap">
  <div class="label">ラベルテキスト</div>
  <div class="label">ラベルテキストテキスト</div>
</div>

ソースをコピーする

<div class="btn-wrap btn3">
  <a href="#modal-cmn-00" class="btn js-modal-trigger"><span>ポップアップ</span></a>
<!-- /.btn-wrap --></div>
<div class="black-mat js-black-mat"></div>
<div id="modal-cmn-00" class="pop-contents-wrap js-modal-wrap">
  <button type="button" class="close js-close"></button>
  <div class="pop-contents">

  </div>
<!-- pop-contents-wrap --></div>

ソースをコピーする

<div class="grid-wrap col2">
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
<!-- .grid-wrap --></div>

ソースをコピーする

<div class="grid-wrap col3">
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="col">
      <p class="normal-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
<!-- .grid-wrap --></div>