サンプル

h１見出し見出し見出し見出し

各セクションに背景色や背景画像をひく[data-background="●●"]を指定しています。

見出しh2

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

見出しh3

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

見出しh4

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

見出しh5

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

h２見出し見出しh２見出し見出しh２見出し見出しh２見出し見出しh２見出し見出しh２

h２見出し二行見出しh２見出し見出しh２見出し見出しh２見出しh２見出しh２見出しh2見出しh２見出し見出しh２

<h2 class="title">見出しh2</h2>
<h3 class="title">見出しh3</h3>
<h4 class="title">見出しh4</h4>
<h5 class="title">見出しh5</h5>

リスト

  • リスト
  • リスト
  • リスト
<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>
  1. オーダーリスト
  2. オーダーリスト
  3. オーダーリスト
<ol>
<li>オーダーリスト</li>
<li>オーダーリスト</li>
<li>オーダーリスト</li>
</ol>

アイコン・装飾・文字

通常リンク

別窓アイコン

pdfアイコン

ワードアイコン

エクセルアイコン

<p><a href="#">通常リンク</a></p>
<p><a href="#">別窓アイコン<i class="iconBlank"></i></a></p>
<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>
※PDF、ワード、エクセルのアイコンは自動で判別されます。

太字

赤字

青字

青太字

大きいサイズ(PC、スマホ共通)

小さいサイズ(PC、スマホ共通)

フォントサイズ12px(PCのみ)

フォントサイズ14px(PCのみ)

フォントサイズ15px(PCのみ)

フォントサイズ16px(PCのみ)

フォントサイズ17px(PCのみ)

フォントサイズ18px(PCのみ)

フォントサイズ19px(PCのみ)

フォントサイズ20px(PCのみ)

フォントサイズ12px(スマホのみ)

フォントサイズ14px(スマホのみ)

フォントサイズ15px(スマホのみ)

フォントサイズ16px(スマホのみ)

フォントサイズ17px(スマホのみ)

フォントサイズ18px(スマホのみ)

フォントサイズ19px(スマホのみ)

フォントサイズ20px(スマホのみ)

<p><strong>太字</strong></p>
<p class="red">赤字</p>
<p class="blue">青字</p>
<p><strong class="blue">青太字</strong></p>
<p class="fontL">大きいサイズ(PC、スマホ共通)</p>
<p class="fontS">小さいサイズ(PC、スマホ共通)</p>
<p class="size12">フォントサイズ12px(PCのみ)</p>
<p class="size14">フォントサイズ14px(PCのみ)</p>
<p class="size15">フォントサイズ15px(PCのみ)</p>
<p class="size16">フォントサイズ16px(PCのみ)</p>
<p class="size18">フォントサイズ18px(PCのみ)</p>
<p class="size19">フォントサイズ19px(PCのみ)</p>
<p class="size20">フォントサイズ20px(PCのみ)</p>
<p class="size12_sp">フォントサイズ12px(スマホのみ)</p>
<p class="size14_sp">フォントサイズ14px(スマホのみ)</p>
<p class="size15_sp">フォントサイズ15px(スマホのみ)</p>
<p class="size16_sp">フォントサイズ16px(スマホのみ)</p>
<p class="size17_sp">フォントサイズ17px(スマホのみ)</p>
<p class="size18_sp">フォントサイズ18px(スマホのみ)</p>
<p class="size19_sp">フォントサイズ19px(スマホのみ)</p>
<p class="size20_sp">フォントサイズ20px(スマホのみ)</p>

ボタン

ボタン
ボタン
<div class="btnWrap"><a href="#" class="commonBtn btnM btnBlack">
<div>ボタン</div><i class="iconArrow"></i>
</a></div>
<div class="btnWrap"><a href="#" class="commonBtn btnM btnWhite">
<div>ボタン</div><i class="iconArrow"></i>
</a></div>

寄せ

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

いいいい

うううう

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

画像センター

<p class="taC"><img src="../images/common/dummy.png" alt=""></p>

画像2カラム

画像小さめ

  • キャプションキャプションキャプション

  • キャプションキャプションキャプション

<ul class="imgLine2 small">
<li><img src="../images/common/dummy.png" alt=""><p class="cap">キャプションキャプションキャプション</p></li>
<li><img src="../images/common/dummy.png" alt=""><p class="cap">キャプションキャプションキャプション</p></li>
</ul>

画像3カラム

  • キャプションキャプションキャプション

  • キャプションキャプションキャプション

  • キャプションキャプションキャプション

<ul class="imgLine3">
<li><img src="../images/common/dummy.png" alt=""><p class="cap">キャプションキャプションキャプション</p></li>
<li><img src="../images/common/dummy.png" alt=""><p class="cap">キャプションキャプションキャプション</p></li>
<li><img src="../images/common/dummy.png" alt=""><p class="cap">キャプションキャプションキャプション</p></li>
</ul>

回り込み

画像右寄せ

スマホ時　画像上

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

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

スマホ時　画像下

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

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

画像左寄せ

スマホ時　画像上

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

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

スマホ時　画像下

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

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

2カラムレイアウト

画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像のキャプション　画像のキャプション
<div class="twoCol">
<div class="txt">キストテキストテキストテキストテキスト</div>
<div class="img"><img src="../images/common/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
</div>
画像のキャプション　画像のキャプション
画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="twoCol">
<div class="img"><img src="../images/common/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
<div class="txt">キストテキストテキストテキストテキスト</div>
</div>

towCol layout sample（これはh3）

.txt内は通常のタグが自由に使えます。（これはp）

  • これはcommonList
  • これはcommonList
画像のキャプション　画像のキャプション

テーブル

テーブルテーブル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テーブルテーブルテーブルテーテーブルテーブルテーブルテー テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テーブルテーブル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 
<table class="commonTable">
<tr>
<th class="sub">中</th>
<td>中</td>
<td>中</td>
</tr>
<tr>
<th class="sub">中</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 テキストテキストテキストテキストテキストテキストテキ テキストテキストテキストテキストテキストテキストテキ テキストテキストテキストテキストテキストテキストテキ
th テキストテキストテキストテキストテキストテキストテキ テキストテキストテキストテキストテキストテキストテキ テキストテキストテキストテキストテキストテキストテキ 
<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>
中 中 中
中 中 中 
<table class="commonTable">
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
</table>
スクロールできます
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト 
<span class="forSP scrolltext">&#10234; スクロールできます</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">&#10234; スクロールできます</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>

h３見出し特殊版h３見出し特殊版h３見出し特殊版

h３見出し特殊版h３見出し特殊版h３見出し特殊版

h３見出し特殊版h３見出し特殊版h３見出し特殊版

h３見出し特殊版h３見出し特殊版h３見出し特殊版

特殊テーブルテーブル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
特殊テーブル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テーブルテーブル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス 
<table class="tableLine">
<tbody>
<tr>
<th>特殊テーブルテーブル</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</td>
</tr>
<tr>
<th>特殊テーブル</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</td>
</tr>
<tr>
<th>テーブルテーブル</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</td>
</tr>
</tbody>
</table>

囲み（背景色付き）

囲み（背景色付き）のブルー　色調整お願いします

補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　

<div class="colorBox typeSky">
<h4 class="titleDot">囲み（背景色付き）のブルー　色調整お願いします</h4>
<p>補足情報テキスト</p>
</div>

.colorBoxに.type●●で色がかわります デフォルトは黒です

補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　

<div class="colorBox bgGray">
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>

囲み（罫線付き）

デフォルトのボーダーカラーは黒。bdGrayを付けるとこの色になる。補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　

あみあみ背景

デフォルトのボーダーカラーは黒。bdBaseを付けるとこの色になる。 data-background="bgRuledline"であみあみ背景になります。余白の広さは「選択科目」ページの「東放学園高等専修学校の資格・検定」のレイアウトに準じています。

あみあみ背景

borderBox にクラスsmallをつけると余白を狭めた見た目になります（スマホは余白変わりません）

<div class="borderBox bdGray">
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>
<div class="borderBox bdBase">
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>
<div class="borderBox bdBase" small>
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>

Youtube埋め込み

<div class="ytWrap">
<iframe width="100%" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

マップ埋め込み

<div class="iframeWrap">
<iframe width="100%" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>