見出しh2

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

見出しh3

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

見出しh4

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

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

リスト

  • リスト
  • リスト
  • リスト
<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="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列 ボタンキャプション
<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
<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>

テーブル

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>
「めざチア」に参加する