見出しh2
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しh3
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しh3b
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
見出しh4
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<h2 class="h2">見出しh2</h2> <h3 class="h3">見出しh3</h3> <h3 class="h3b">見出しh3b</h3> <h4 class="h4">見出しh4</h4>
フォント
本文サイズ：16px normal
太字サイズ：16px bold
赤字カラー：#e5457a
メインカラー：#166956
テキストテキストテキストリンク(#00a040)テキストテキスト
<p>本文サイズ：16px normal</p> <p class="bold">太字サイズ：16px bold</p> <p class="red">赤字カラー：#e5457a</p> <p class="green bold">メインカラー：#166956a</p> <p>テキストテキスト<a href="#">テキストリンク(#00a040)</a>テキストテキスト</p>
リスト
- リスト
- リスト
- リスト
<ul class="commonList"> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>
- 2カラム リスト
- 2カラム リスト
- 2カラム リスト
- 2カラム リスト
<ul class="commonList col2List"> <li>2カラム リスト</li> <li>2カラム リスト</li> <li>2カラム リスト</li> <li>2カラム リスト</li> </ul>
- オーダーリスト
- オーダーリスト
- オーダーリスト
<ol> <li>オーダーリスト</li> <li>オーダーリスト</li> <li>オーダーリスト</li> </ol>
定義リスト（項目名が短め）
- 項目名
- 説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
定義リスト（項目名が長め）
- 項目名項目名項目名
項目名項目名項目名 - 説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト 説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
<dl class="dlList"> <dt><b>項目名</b></dt> <dd>説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト<br> 説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト</dd> </dl> <dl class="dlList2"> <dt><b>項目名項目名項目名<br>項目名項目名項目名</b></dt> <dd>説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト 説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト</dd> </dl>
アイコン・装飾
<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><a href="#" class="common_btn btn_s">ボタン</a></p> <p><a href="#" class="btn_center common_btn btn_s">ボタン</a></p> <p><a href="#" class="btn_right common_btn btn_s">ボタン</a></p> <p><a href="#" class="btn_center common_btn btn_m">ボタン</a></p> <p><a href="#" class="btn_center common_btn btn_m btnIco_under">ボタン（アイコン下向き）</a></p> <p><a href="#" class="btn_center common_btn btn_l">ボタン</a></p> <p class="btn_line2"><a href="#" class="btn_center common_btn">ボタン</a><a href="#" class="btn_center common_btn">ボタン</a></p> <p class="btn_line3"><a href="#" class="btn_center common_btn">ボタン</a><a href="#" class="btn_center common_btn">ボタン</a><a href="#" class="btn_center common_btn">ボタン</a></p>
寄せ
ああああ（基本的には、何も指定しなければ左寄せになります）
いいいい
うううう
<p class="alignL">ああああ（基本的には、何も指定しなければ左寄せになります）</p> <p class="alignR">いいいい</p> <p class="alignC">うううう</p>
画像センター
<p class="alignC"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></p>
画像2カラム
画像小さめ
<ul class="img_line2 small"> <li><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></li> <li><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></li> </ul>
画像3カラム
<ul class="img_line3"> <li><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></li> <li><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></li> <li><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""></li> </ul>
回り込み
画像右寄せ
スマホ時 画像上
画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<p class="imgInP"><span class="img right"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>
スマホ時 画像下
画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<p class="imgInP sp_img_btm"><span class="img right"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></span><span class="text">テキスト</span></p>
画像左寄せ
スマホ時 画像上
画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<p class="imgInP"><span class="img left"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>
スマホ時 画像下
画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<p class="imgInP sp_img_btm"><span class="img left"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></span><span class="text">テキスト</span></p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト画像のキャプション 画像のキャプション
<p class="imgInP col2"><span class="text left">テキスト</span><span class="img right"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション</span></span></p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト画像のキャプション 画像のキャプション
<p class="imgInP col2"><span class="text right">テキスト</span><span class="img left"><img src="[url]/wp-content/uploads/2020/05/dummy.png" alt=""><span class="cap">画像のキャプション</span></span></p>
テーブル
| 中 | 中 | 中 |
|---|---|---|
| 中 | 中 | 中 |
<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>
| タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
|---|---|---|---|
| タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
| タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
<span class="forSP scrolltext">⟺ スクロールできます</span> <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>
| タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|
| テキストテキスト | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
<span class="forSP scrolltext">⟺ スクロールできます</span> <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>
| 会報 (2020, March） | |||
| 会報 (2019, March） | 会報 (2019, June） | 会報 (2019, September） | 会報 (2019, December） |
| 会報 (2018, March） | 会報 (2018, June） | 会報 (2018, September） | 会報 (2018, December） |
<div class="scrollTable"> <table class="commonTable"> <tr> <td><a href="">会報 (2020, March）</a></td> <td><a href=""></a></td> <td><a href=""></a></td> <td><a href=""></a></td> </tr> <tr> <td><a href=""> 会報 (2019, March）</a></td> <td><a href="">会報 (2019, June）</a></td> <td><a href="">会報 (2019, September）</a></td> <td><a href="">会報 (2019, December）</a></td> </tr> <tr> <td><a href=""> 会報 (2018, March）</a></td> <td><a href="">会報 (2018, June）</a></td> <td><a href="">会報 (2018, September）</a></td> <td><a href="">会報 (2018, December）</a></td> </tr> </table> </div>
タブ表示
- タブ見出し
- タブ2つ目の見出し
<div class="tab-box"> <ul class="tab-list"> <li><span>タブ見出し</span></li> <li class="on"><span>タブ2つ目の見出し</span></li> </ul> <div class="tab-group"> <div class="tab-panel show"> <dl> <dt><time datetime="">タブテキスト</time></dt> <dd><a href="">タブテキストタブテキストタブテキスト</a></dd> </dl> <dl> <dt><time datetime="">タブテキスト</time></dt> <dd><a href="">タブテキストタブテキストタブテキスト</a></dd> </dl> <dl> <dt><time datetime="">タブテキスト</time></dt> <dd><a href="">タブテキストタブテキストタブテキスト</a></dd> </dl> <dl> <dt><time datetime="">タブテキスト</time></dt> <dd><a href="">タブテキストタブテキストタブテキスト</a></dd> </dl> </div> <div class="tab-panel"> <dl> <dt><time datetime="">タブ2つ目のテキスト</time></dt> <dd><a href="">タブ2つ目のテキストタブ2つ目のテキスト</a></dd> </dl> <dl> <dt><time datetime="">タブ2つ目のテキスト</time></dt> <dd><a href="">タブ2つ目のテキストタブ2つ目のテキスト</a></dd> </dl> </div> </div> </div>
Q&A
- Q1質問が入ります。質問が入ります。質問が入ります。
- A1答えが入ります。 答えが入ります。 答えが入ります。
- Q2質問が入ります。質問が入ります。質問が入ります。
- A2答えが入ります。 答えが入ります。 答えが入ります。
- Q3質問が入ります。質問が入ります。質問が入ります。
- A3答えが入ります。 答えが入ります。 答えが入ります。
<div class="accordion"> <dl class="accordion-list"> <dt><span class="q_a">Q1</span>質問が入ります。質問が入ります。質問が入ります。 <span class="plus"></span></dt> <dd><span class="q_a">A1</span>答えが入ります。 答えが入ります。 答えが入ります。</dd> </dl> <dl class="accordion-list"> <dt><span class="q_a">Q2</span>質問が入ります。質問が入ります。質問が入ります。 <span class="plus"></span></dt> <dd><span class="q_a">A2</span>答えが入ります。 答えが入ります。 答えが入ります。</dd> </dl> <dl class="accordion-list"> <dt><span class="q_a">Q3</span>質問が入ります。質問が入ります。質問が入ります。 <span class="plus"></span></dt> <dd><span class="q_a">A3</span>答えが入ります。 答えが入ります。 答えが入ります。</dd> </dl> </div>
ボックス
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="whiteBox"> <p class="h3">タイトル</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="h3b">タイトル</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>
補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト
<div class="colorbox gray_box"> <span class="title">タイトル</span> <p>補足情報テキスト</p> </div>