お電話 03-5770-5702
無料相談予約

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

×

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

template

h2 見出し

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

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

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

ページ内リンク

    <ul class="internalLink">
        <li><a href="#txt">テキスト系</a></li>
        <li><a href="#img">画像系</a></li>
        <li><a href="#table">テーブル系</a></li>
    </ul>

テキスト系

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

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

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

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

    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p><strong>太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト太字テキスト</strong></p>
    <p>テキストテキスト<span class="highlight">ハイライトハイライトハイライトハイライトハイライト</span>テキストテキストテキストテキスト<span class="txt-red">赤字テキスト赤字テキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

文字サイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像系

画像1枚センター

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

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

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

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

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

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

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

画像＆テキスト 横並び

画像左パターン

キャプションキャプション

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

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

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

      <div class="layout-flex">
          <figure><img src="https://roppongi-dental.com/wp/wp-content/themes/roppongi-dental.com/img/second/sample.jpg" alt=""></figure>
          <div>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
      </div>

画像右パターン

キャプションキャプション

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

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

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

      <div class="layout-flexRvs">
          <figure><img src="https://roppongi-dental.com/wp/wp-content/themes/roppongi-dental.com/img/second/sample.jpg" alt=""></figure>
          <div>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
      </div>

画像2枚 横並び（前後）

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

テーブル系

項目width15%(SPは縦)

項目名(width15%)
内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
項目名(width15%)
内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    <dl class="layout-table">
        <dt>項目名(width15%)</dt>
        <dd>内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容</dd>
        <dt>項目名(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="wdt40">項目名(width50%)</dt>
        <dd>内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容</dd>
    </dl>

リスト系

枠なし・背景なしリスト要素

  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <ul class="list">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>

枠あり・背景ありリスト要素

  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <ul class="list-box">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <ul class="list-box notes">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <ul class="list-box brown">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      <ul class="list-box green">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキスト
  • テキストテキストテキスト
      <ul class="list-box green wdtAdjust">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキスト
  • テキストテキストテキスト
      <ul class="list-box wdt50">
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
          <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ul>
タイトルタイトル
1 – 1 – 1
2 – 2 – 2
3 – 3 – 3
      <dl class="number-list">
          <dt>タイトルタイトル</dt>
          <dd>1 - 1 - 1</dd>
          <dd>2 - 2 - 2</dd>
          <dd>3 - 3 - 3</dd>
      </dl>

リンク・ボタン系

詳細を見る 
    <div>
        <a href="#" class="btn">詳細を見る</a>
    </div>

無料相談予約

Reservation

  • 24時間受付Web申し込み

    24時間受付Web申し込み

    初回に限り無料の個別相談(予約制)を 実施しております

  • 初回予約専用フリーダイヤル

    初回予約専用フリーダイヤル

    0120-118-041平日 11:00～20:00 / 土日 10:00～18:00

    ※ お電話での治療に関するご相談は、ドクターによる対応ができないためお受けできません

© Roppngi Shirayuri Dental Clinic All rights reserved.