sample-page

サンプルページ

見出しh2

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

見出しh3

見出しh4

<h2 class="h2"><div class="h2_inner">見出しh2</div></h2>
<h3 class="h3">見出しh3</h3>
<h4 class="h4">見出しh4</h4>

アイコン・装飾・文字

リンクマーク

pdfアイコン

別窓アイコン

<p><a href="#" class="link">リンクマーク</a></p>
<p><a href="#">pdfアイコン<span class="icon_pdf"></span></a></p>
<p><a href="#">別窓アイコン<span class="icon_blank"></span></a></p>

ピンク文字

青文字

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

<p class="txt_pink">ピンク文字</p>
<p class="txt_blue">青文字</p>
<span class="txt_marker">テキスト</span>

ボタン

ボタンボタン

ボタン

<p><a href="#" class="common_btn">ボタン</a></p>
<p><a href="#" class="common_btn grad">ボタン</a></p>
<p class="alignC"><a href="#" class="common_btn">ボタン</a></p>
<p class="alignR"><a href="#" class="common_btn">ボタン</a></p>
<p class="alignC btns"><a href="#" class="common_btn">ボタン</a><a href="#" class="common_btn grad">ボタン</a></p>
<p><a href="#" class="common_btn btn_m">ボタン</a></p>
<p><a href="#" class="common_btn btn_l">ボタン</a></p>
<p><a href="#" class="common_btn anker">ボタン</a></p>
<p><a href="#" class="common_btn grad anker">ボタン</a></p>

2列 2列

2列ボタンキャプション

<div class="btn_line2">
<a href="#" class="common_btn">2列</a>
<a href="#" class="common_btn">2列</a>
</div>

<div class="btn_line2 cap_in">
<div>
<a href="#" class="common_btn">2列</a>
<span class="cap">ボタンキャプション</span>
</div>
<div>
<a href="#" class="common_btn">2列</a>
<span class="cap">ボタンキャプション</span>
</div>
</d

3列 3列 3列

<div class="btn_line3">
<a href="#" class="common_btn">3列</a>
<a href="#" class="common_btn">3列</a>
<a href="#" class="common_btn">3列</a>
</div>

4列 4列 4列 4列

<div class="btn_line4">
<a href="#" class="common_btn">4列</a>
<a href="#" class="common_btn">4列</a>
<a href="#" class="common_btn">4列</a>
<a href="#" class="common_btn">4列</a>
</div>

テーブル

th	td	td
th	td	td

<table class="commonTable">
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</table>

th	th	th
td	td	td

<table class="commonTable">
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>

th	subth	subth	subth
th	td	td	td

<table class="commonTable">
<tr>
<th>th</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>

⇔スクロールできます

タイトル	タイトル	タイトル	タイトル
テキスト	テキスト	テキスト	テキストテキストテキストテキストテキストテキストテキスト

<div class="scrolltext">&hArr;スクロールできます</div>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>

寄せ

ああああ（基本的には、何も指定しなければ左寄せになります）

いいいい

うううう

<p class="alignL">ああああ（基本的には、何も指定しなければ左寄せになります）</p>
<p class="alignR">いいいい</p>
<p class="alignC">うううう</p>

画像センター

<p class="alignC img"><img src="../images/dummy/sample_img_1.jpg" alt=""></p>

画像2カラム

<ul class="img_line2">
<li><img src="../images/dummy/sample_img_1.jpg" alt=""></li>
<li><img src="../images/dummy/sample_img_1.jpg" alt=""></li>
</ul>

画像3カラム

<ul class="img_line3">
<li><img src="../images/dummy/sample_img_1.jpg" alt=""></li>
<li><img src="../images/dummy/sample_img_1.jpg" alt=""></li>
<li><img src="../images/dummy/sample_img_1.jpg" alt=""></li>
</ul>

回り込み

画像右寄せ

スマホ時　画像上

画像のキャプション　画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="img_in_p">
<span class="img right">
<img src="../images/dummy/sample_img_1.jpg" alt="">
<span class="cap">画像のキャプション　画像のキャプション</span>
</span>
テキストテキストテキスト
</p>

スマホ時　画像下

<p class="img_in_p sp_img_btm">
<span class="img right">
<img src="../images/dummy/sample_img_1.jpg" alt="">
<span class="cap">画像のキャプション　画像のキャプション</span>
</span>
<span class="text">テキストテキストテキスト</span>
</p>

画像左寄せ

スマホ時　画像上

<p class="imgInP"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

スマホ時　画像下

<p class="imgInP sp_img_btm"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></span><span class="text">テキスト</span></p>

2カラム

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト画像のキャプション　画像のキャプション

<p class="img_in_p col2">
<span class="text left">テキストテキストテキスト</span>
<span class="img right">
<img src="../images/dummy/sample_img_1.jpg" alt="">
<span class="cap">画像のキャプション　画像のキャプション</span>
</span>
</p>

<p class="img_in_p col2">
<span class="text right">テキストテキストテキスト</span>
<span class="img left">
<img src="../images/dummy/sample_img_1.jpg" alt="">
<span class="cap">画像のキャプション　画像のキャプション</span>
</span>
</p>

カラーボックス

タイトル

<div class="color_box">
<div class="title">タイトル</div>
<p>テキストテキストテキスト</p>
</div>
<div class="color_box pink">
<div class="title">タイトル</div>
<p>テキストテキストテキストテキスト</p>
</div>

<div class="movie_box">
<div class="movie">
<iframe src="https://www.youtube-nocookie.com/embed/bjmBJ1Fl0cs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

sample-page

見出しh2

見出しh3

見出しh4

リスト

アイコン・装飾・文字

ボタン

テーブル

寄せ

画像センター

画像2カラム

画像3カラム

回り込み

画像右寄せ

スマホ時 画像上

スマホ時 画像下

画像左寄せ

スマホ時 画像上

スマホ時 画像下

2カラム

カラーボックス

スマホ時　画像上

スマホ時　画像下

スマホ時　画像上

スマホ時　画像下