サンプルページ

見出しh1
2020.05.01iifriends編集部員の子育て日記

見出しh2

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

見出しh3

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

<h2 class="h2">見出しh2</h2>
<h3 class="h3">見出しh3</h3>

リスト

  • リスト
  • リスト
  • リスト
<ul class="common_list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

アイコン・装飾・文字

リンクマーク

pdfアイコン

別窓アイコン

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

太字

赤字

青字

青太字

<p><strong>太字</strong></p>
<p class="textred">赤字</p>
<p class="textblue">青字</p>
<p><strong class="textblue">青太字</strong></p>

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

下向き

<p><a href="#" class="common_btn btn_s">ボタン</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 btn_s down">下向き</a></p>
2列 ボタンキャプション
2列 ボタンキャプション
<div class="btn_line2">
<a href="#" class="common_btn">2列</a>
<a href="#" class="common_btn">2列</a>
</div>
<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>
<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>

テーブル

<table class="commonTable">
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
</table>
<table class="commonTable">
<tr>
<th>中</th>
<th>中</th>
<th>中</th>
</tr>
<tr>
<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="scrollTable">
<table class="commonTable">
<tr>
<th width="170">タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</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>
Q1質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。
A1回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。
Q2質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。
A2回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。
Q3質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。
A3回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。
<div class="qa_area">
   <dl>
   <dt><span class="que">Q1</span>質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。質問テキストが入ります。</dt>
   <dd><span class="ans">A1</span>回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。回答テキストが入ります。</dd>
   </dl>
</div>

回り込み

画像右寄せ

スマホ時 画像上

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

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

スマホ時 画像下

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

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

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

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