▲

医院
直通

03-6427-0983
電話予約
×

電話番号をタップしてください

無料相談予約

無料相談予約

 無料相談予約

下層ページ用レイアウトテンプレート

template

h2見出し

h3 見出しh3見出しh3見出し

h4 見出しh4見出しh4見出し

h5 見出しh5見出しh5見出し

ページ内リンク

      <ul class="page-link">
        <li><a href="#"><i class="fa-solid fa-chevron-down"></i>テキスト系</a></li>
        <li><a href="#"><i class="fa-solid fa-chevron-down"></i>画像系</a></li>
        <li><a href="#"><i class="fa-solid fa-chevron-down"></i>テーブル系</a></li>
      </ul>

テキスト系

標準テキスト + 太字 + ハイライト + 赤字

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

太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト

テキストテキストハイライトハイライトハイライトハイライトハイライトテキストテキストテキストテキスト赤字テキスト赤字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p><span class="tx-wb">太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト</span></p>
      <p>テキストテキスト<span class="highlight">ハイライトハイライトハイライトハイライトハイライト</span>テキストテキストテキストテキスト<span class="tx-r">赤字テキスト赤字テキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

文字サイズ

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

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

      <p class="fs-s">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="fs-ss">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

枠あり・背景ありテキスト

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

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

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

      <div class="frame-w">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>

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

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

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

      <div class="frame-g">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>

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

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

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

      <div class="frame-r">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>

枠あり・背景ありリスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <div class="frame-w">
          <ul class="dotlist">
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          </ul>
      </div>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <div class="frame-w">
          <ul class="attlist">
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          </ul>
      </div>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <div class="frame-g">
          <ul class="arrowlist-g">
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          </ul>
      </div>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <div class="frame-r">
          <ul class="arrowlist-r">
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
              <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          </ul>
      </div>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像系

画像1枚センター

キャプション
        <div class="layout-c">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
        </div>

画像2枚 横並び(SPは縦並び)

キャプション
キャプション
        <div class="layout-flex">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
        </div>

画像3枚 横並び(SPは縦並び)

キャプション
キャプション
キャプション
        <div class="layout-flex-3">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
        </div>

画像2枚 横並び(SPも横並び)

キャプション
キャプション
        <div class="layout-flex-sp">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
        </div>

画像＆テキスト 横並び

画像左パターン

キャプション

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

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

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

        <div class="layout-flex">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <div>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>

画像右パターン

キャプション

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

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

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

        <div class="layout-flexRvs">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <div>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>

画像2枚 横並び（前後）

キャプション
キャプション
        <div class="layout-compare">
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
            <figure><img src="https://shibuyashika.net/wp/wp-content/themes/shibuyashika.net/img/sample/sample.jpg" alt=""><figcaption>キャプション</figcaption></figure>
        </div>

テーブル系

項目width15%(SPは縦)

項目名(width15%)
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
項目名(width15%)
テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
        <dl class="layout-table">
            <dt class="wdt15">項目名(width15%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt class="wdt15">項目名(width15%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</dd>
        </dl>

項目width20%(SPは縦)

項目名(width20%)
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
項目名(width20%)
テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
        <dl class="layout-table">
            <dt class="wdt20">項目名(width20%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt class="wdt20">項目名(width20%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</dd>
        </dl>

項目width30%(SPは縦)

項目名(width30%)
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
項目名(width30%)
テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
        <dl class="layout-table">
            <dt class="wdt30">項目名(width30%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt class="wdt30">項目名(width30%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</dd>
        </dl>

項目width40%(SPは縦)

項目名(width40%)
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
項目名(width40%)
テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
        <dl class="layout-table">
            <dt class="wdt40">項目名(width40%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt class="wdt40">項目名(width40%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</dd>
        </dl>

項目width50%(SPは縦)

項目名(width50%)
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
項目名(width50%)
テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
        <dl class="layout-table">
            <dt class="wdt50">項目名(width50%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt class="wdt50">項目名(width50%)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</dd>
        </dl>

料金テーブル

スクロールあり

※表をスワイプしてください

治療内容 料金（税込） モニター料金（税込）
エコノミー ¥77,000
（保障期間3年間）		 ¥69,300
（保障期間3年間）		 
        <div class="cost-swipe-scroll">
            <p class="fs-ss md-none">※表をスワイプしてください</p>
            <table class="cost-table">
                <thead>
                    <tr>
                        <th>治療内容</th>
                        <th>料金<span class="fs-ss">（税込）</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>エコノミー</td>
                        <td class="tx-right"><strong>¥77,000</strong><br><span class="fs-ss">（保障期間3年間）</span></td>
                    </tr>
                </tbody>
            </table>
        </div>

スクロールなし

治療内容 料金（税込）
エコノミー ¥77,000
（保障期間3年間）		 
        <div class="cost-swipe">
            <table class="cost-table">
                <thead>
                    <tr>
                        <th>治療内容</th>
                        <th>料金<span class="fs-ss">（税込）</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>エコノミー</td>
                        <td class="tx-right"><strong>¥77,000</strong><br><span class="fs-ss">（保障期間3年間）</span></td>
                    </tr>
                </tbody>
            </table>
        </div>

タイトル番号

  1. テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
  2. テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
  3. テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト
      <ol class="number">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキストトテキストテキストテキストテキスト</li>
      </ol>

リンク・ボタン系

詳細はこちら 
      <div class="btn">
          <a href="#" class="btn-contents">詳細はこちら</a>
      </div>