#サンプルページ

ページのスタイル

見出しのスタイル

見出し2

<h2>見出し2</h2>

見出し3

<h3>見出し3</h3>

見出し4

<h4>見出し4</h4>

見出し5

<h5>見出し5</h5>

ul箇条書きスタイル

• 箇条書き1
• 箇条書き2
• 箇条書き3

<ul>
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
</ul>

ol箇条書きスタイル

1. 箇条書き1
2. 箇条書き2
3. 箇条書き3

<ol>
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
</ol>

dl箇条書きスタイル

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

<dl>
  <dt>定義</dt>
  <dd>定義データ</dd>
  <dt>定義</dt>
  <dd>定義データ</dd>
  <dt>定義</dt>
  <dd>定義データ</dd>
</dl>

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

定義

定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。定義データがはいります。

<dl class="dl02">
  <dt>定義</dt>
  <dd>定義データ</dd>
  <dt>定義</dt>
  <dd>定義データ</dd>
  <dt>定義</dt>
  <dd>定義データ</dd>
</dl>

引用スタイル

引用見出し

引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

<blockquote>引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

引用見出し

引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

<blockquote class="bq02">引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

テーブルスタイル

<table>
  <tbody>
    <tr>
      <th>テーブル見出し</th>
      <th>テーブル見出し</th>
      <th>テーブル見出し</th>
    </tr>
    <tr>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
    <tr>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <th>テーブル見出し</th>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
    <tr>
      <th>テーブル見出し</th>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
  </tbody>
</table>

<table class="res-h">
  <tbody>
    <tr>
      <th>テーブル見出し</th>
      <th>テーブル見出し</th>
      <th>テーブル見出し</th>
    </tr>
    <tr>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
    <tr>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
  </tbody>
</table>

<table class="res-v">
  <tbody>
    <tr>
      <th>テーブル見出し</th>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
    <tr>
      <th>テーブル見出し</th>
      <td>テーブルのデータ</td>
      <td>テーブルのデータ</td>
    </tr>
  </tbody>
</table>

ワークフローのスタイル(class:flow)

<div class="flow clearFix">
  <p><img src="http://horai-kensetsu.co.jp/wp/wp-content/themes/horai/img/sample_thumnail02.png" alt=""></p>
  <div>
    <h3>ワークフローの見出し３</h3>
    ステップ１の流れが入ります。ステップ１の流れが入ります。ステップ１の流れが入ります。ステップ１の流れが入ります。ステップ１の流れが入ります。
  </div>
</div>

<div class="flow_mark">
  <img src="http://horai-kensetsu.co.jp/wp/wp-content/themes/horai/img/flow_mark.png">
</div>

<div class="flow_bold">
  <h3>ワークフローの見出し３</h3>
</div>

イメージボックススタイル

<p class="sample">イメージボックススタイル</p>
<div class="image-box clearFix">
  <p><img src="http://horai-kensetsu.co.jp/wp/wp-content/themes/horai/img/sample_medium01.png" alt="サンプル画像" scale="0"></p>
  <div>
    <h3>見出し3</h3>
    文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります
  </div>
</div>

QandAスタイル

質問が入ります。質問が入ります。質問が入ります。質問が入ります。質問が入ります。

解答が入ります。解答が入ります。解答が入ります。解答が入ります。解答が入ります。

<dl class="qanda">
  <dt>質問が入ります。質問が入ります。質問が入ります。質問が入ります。質問が入ります。</dt>
  <dd>解答が入ります。解答が入ります。解答が入ります。解答が入ります。解答が入ります。</dd>
</dl>

ウェブフォント

ホーム

チェック

ダウンロード

注意

カート

アイコンリスト

<p><i class="fa fa-home"></i> ホーム</p>
<p><i class="fa fa-check"></i> チェック</p>
<p><i class="fa fa-download"></i> ダウンロード</p>
<p><i class="fa fa-warning"></i> 注意</p>
<p><i class="fa fa-shopping-cart"></i> カート</p>

レスポンシブで横長画像の差し替え

プラグインなし

プラグインあり

<img class="res_img" src="http://horai-kensetsu.co.jp/wp/wp-content/themes/horai/img/responsiveimg.png">
※スマートフォンサイズ(468px以下)ではresponsiveimg_sp.pngという画像に切り替わる

フォームスタイル

<form method="post" action="" enctype="multipart/form-data">
  <table>
    <tbody>
      <tr>
        <th>お名前（必須）</th>
        <td><input type="text" name="お名前" size="60" value="" /></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="email" name="メールアドレス" size="30" value="" /></td>
      </tr>
      <tr>
        <th>メールアドレス(確認)</th>
        <td><input type="email" name="メールアドレス(確認)" size="30" value="" /></td>
      </tr>
      <tr>
        <th>郵便番号</th>
        <td><input type="text" name="郵便番号" id="zip" size="7" value="" /></td>
      </tr>
      <tr>
        <th>都道府県</th>
        <td><input type="text" name="都道府県" id="pref" size="10" value="" /></td>
      </tr>
      <tr>
        <th>市町村</th>
        <td><input type="text" name="市町村" id="city" size="10" value="" /></td>
			</tr>
			<tr>
        <th>その他住所</th>
        <td><input type="text" name="その他住所" id="addr" size="60" value="" /></td>
      </tr>
      <tr>
        <th>TEL（必須）</th>
        <td><span class="mwform-tel-field">
<input type="text" name="TEL[data][0]" size="6" maxlength="5" />
-
<input type="text" name="TEL[data][1]" size="5" maxlength="4" />
-
<input type="text" name="TEL[data][2]" size="5" maxlength="4" />
</span></td>
      </tr>
      <tr>
        <th>内容（必須）</th>
        <td><textarea name="内容" cols="50" rows="5"></textarea></td>
      </tr>
    </tbody>
  </table>
  <p>
    <input type="submit" name="submitConfirm" value="確認" />
    <input type="reset" name="reset" value="リセット">
  </p>
</form>

特別なページのスタイル

お問い合わせリンクスタイル

<div class="contact">
  <div id="contact_sb">
    <p class="lead">お問い合わせ・資料請求はこちらからどうぞ</p>
    <p class="tel"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> 083-927-6404<br><span>営業時間  月～金 8:00～17:00</span></a></p>
    <p class="mail"><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ・資料請求</a></p>
    <p class="ex">メールは24時間受け付けております。</p>
  </div>
</div>