サンプルページ

キャッチなどが入ります、キャッチなどが入ります。

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文
リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

<p class="catch">キャッチなどが入ります、キャッチなどが入ります。</p>
<p class="read">リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文<br>リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p>

H2 タイトル

H3 タイトル

H4 タイトル

<h2>H2 タイトル</h2>
<h3>H3 タイトル</h3>
<h4>H4 タイトル</h4>

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

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

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

PDFアイコン付きリンク
EXCELアイコン付きリンク
WORDアイコン付きリンク
PPTアイコン付きリンク
外部アイコン付きリンク

<a href="#" class="pdf">PDFアイコン付きリンク</a><br>
<a href="#" class="excel">EXCELアイコン付きリンク</a><br>
<a href="#" class="word">WORDアイコン付きリンク</a><br>
<a href="#" class="ppt">PPTアイコン付きリンク</a><br>
<a href="#" class="blank">外部アイコン付きリンク</a>

ボタン

ボタン

ボタンボタン

<p class="alignC"><a href="#" class="btn">ボタン</a></p>
<p class="ovh"><a href="#" class="btn floatL">ボタン</a><a href="#" class="btn floatR">ボタン</a></p>

リスト

  • サンプル
    サンプル
  • サンプル
  • サンプル
  • サンプル
    サンプル
  • サンプル
  • サンプル
<ul class="basic_list">
<li>サンプル<br>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
<ul>
<li>サンプル<br>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>

テーブル

←→スクロールできます

th th th
td td td
td td td
td td td
<div class="scrollTable">
<span class="scroll_txt">←→スクロールできます</span>
<table class="commonTable">
<tbody>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
</table>
</div>

ボックス系

H4 タイトル

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<div class="common_box">
<div class="img_in_box">
<img src="../images/second/dummy.png" alt="" class="floatL">
<h4 class="commonH4">H4 タイトル</h4>
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</div>
</div>

2カラムボックス

2カラム

  • サンプル
  • サンプル

2カラム

  • サンプル
  • サンプル
<div class="col_2_box">
<div class="left_box">
<h3 class="commonH3">2カラム</h3>
<ul class="basic_list">
<li>サンプル</li>
<li>サンプル</li>
</ul>
</div>
<div class="right_box">
<h3 class="commonH3">2カラム</h3>
<ul class="basic_list">
<li>サンプル</li>
<li>サンプル</li>
</ul>
</div>
</div>

画像回り込みとキャプション

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

<p class="imgInP">
<span class="cap_img imgLeft"><img src="../images/dummy.png" width="350" alt=""><span class="cap">キャプション</span></span>
テキスト</p>

キャプション テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP">
<span class="cap_img imgRight"><img src="../images/dummy.png" width="350" alt=""><span class="cap">キャプション</span></span>
テキスト</p>

画像横並び

<ul class="img_list">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>