sample
サンプル
Sample
H2テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="h2"> <p class="en">Sample</p> <h2 class="title">H2テキスト</h2> </div>
H3テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<h3 class="h3">H3テキスト</h3>
リスト
- リスト
- リスト
- リスト
<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>
アイコン・装飾・文字
<p><a class="icon" href="#.pdf">pdfアイコン</a></p> <p><a class="icon" href="#.doc(docx)">ワードアイコン</a></p> <p><a class="icon" href="#.xls(xlsx)">エクセルアイコン</a></p> <p><a href="#">別窓アイコン<span class="ico_blank"></span></a></p> ※PDF、ワード、エクセルのアイコンは自動で判別されます。
太字
赤字
青字
青太字
<p><strong>太字</strong></p> <p class="textred">赤字</p> <p class="textblue">青字</p> <p><strong class="textblue">青太字</strong></p>
ボタン
<p><a href="#" class="common_btn"><span>ボタンボタン</span></a></p> <p class="taC"><a href="#" class="common_btn"><span>ボタンボタン</span></a></p> <p class="taR"><a href="#" class="common_btn"><span>ボタンボタン</span></a></p>
寄せ
ああああ(基本的には、何も指定しなければ左寄せになります)
いいいい
うううう
<p class="taL">ああああ(基本的には、何も指定しなければ左寄せになります)</p> <p class="taR">いいいい</p> <p class="taC">うううう</p>
画像センター
<p class="taC"><img src="../images/second/dummy.png" alt=""></p>
画像2カラム(画像小さめ)
<ul class="imgLine2 small"> <li><img src="../images/second/dummy.png" alt=""></li> <li><img src="../images/second/dummy.png" alt=""></li> </ul>
画像3カラム
<ul class="imgLine3"> <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>
画像4カラム
<ul class="imgLine4"> <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> <li><img src="../images/second/dummy.png" alt=""></li> </ul>
回り込み
画像右寄せ(スマホ時 画像上)
画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<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カラムレイアウト
<div class="twoCol"> <div class="txt">キストテキストテキストテキストテキスト</div> <div class="img"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></div> </div>
<div class="twoCol"> <div class="img"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></div> <div class="txt">キストテキストテキストテキストテキスト</div> </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>
⟺ スクロールできます
タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
---|---|---|---|
タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
タイトル | テキストテキスト | テキストテキスト | テキストテキストテキストテキストテキストテキストテキスト |
<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>