汎用パーツ - TOPKNOT HTML/CSS Framework Goodbye IE ver.

セクション（s1）

セクションには下記ソースを基本構造として使用し、適時アレンジしてください。

表示サンプル

表示サンプルは「下層ページ」を参照してください。

ソース


<section class="SectionMain">
<h2 class="MdsH2">中見出し</h2>
<p class="Lead">リード文が入る</p>
<section class="SectionSub">
<h3 class="MdsH3">小見出し</h3>
<figure class="Photo">画像が入る</figure>
<p class="Lead">本文が入る</p>
<h4 class="MdsH4">小見出し</h4>
<p class="Lead">本文が入る</p>
</section>
</section>

カラム：成り行き（col）

横幅に応じてカラム数を変化させたい場合に使用してください。
固定表示と組み合わせて使用することもできます。

SP：1カラム／PC：最大3カラム（横幅固定時の目安）

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols ColAuto3">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：1カラム／PC：最大4カラム（横幅固定時の目安）

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols ColAuto4">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：2カラム／PC：最大4カラム

固定表示との組み合わせ。SPでは2カラム、PCでは成り行きで最大4カラム。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols ColAuto4 Col2_SP">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

カラム：固定（col）

メディアクエリに応じてカラム数を固定したい場合は、以下のclassを付与してください。

2カラム：Col2_SP、Col2_PC
3カラム：Col3_SP、Col3_PC
4カラム：Col4_SP、Col4_PC
5カラム：Col5_SP、Col5_PC
6カラム：Col6_SP、Col6_PC
PC 2対1：Col2v1（SPは1カラム）
PC 1対2：Col1v2（SPは1カラム）

2カラム

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

ソース


<div class="Cols Col2">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

3カラム

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

ソース


<div class="Cols Col3">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：1カラム／PC：2カラム

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols Col2_PC">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：2カラム／PC：3カラム

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols Col2_SP Col3_PC">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：2カラム／PC：4カラム

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols Col2_SP Col4_PC">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：1カラム／PC：2対1

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols Col2v1">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

SP：1カラム／PC：1対2

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

親譲りの無鉄砲で小供の時から損ばかりしている。

ソース


<div class="Cols Col1v2">
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
<div class="ColItem"></div>
</div>

リスト各種

ディスク：中（ld）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。
- 入れ子の場合はマーカーが変わります。爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
- 爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
さらに俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。

ソース


<ul class="List ListDisc">
<li></li>
<li></li>
<li></li>
</ul>

ディスク：小（lds）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。

ソース


<ul class="List ListDiscS">
<li></li>
<li></li>
<li></li>
</ul>

米印：中（lk）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
さらに爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。

ソース


<ul class="List ListKome">
<li></li>
<li></li>
<li></li>
</ul>

米印：小（lks）

爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

ソース


<ul class="List ListKomeS">
<li></li>
<li></li>
<li></li>
</ul>

連番：中（ln）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
1. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
2. 無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
3. 小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
1. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
2. 無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
3. 小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

ソース


<ol class="List ListNum">
<li></li>
<li></li>
<li></li>
</ol>

連番：小（lns）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

ソース


<ol class="List ListNumS">
<li></li>
<li></li>
<li></li>
</ol>

連番米印：小（lkns）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
Futureろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

ソース


<ol class="List ListKomeNumS">
<li></li>
<li></li>
<li></li>
</ol>

マーカーなし（lnm）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。
俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。

ソース


<ul class="List ListNoMarker">
<li></li>
<li></li>
<li></li>
</ul>

インライン表示

大きな爆発音がした俺は驚いて振り返った
大きな爆発音がした
大きな爆発音がした
爆発音がした
爆発音がした
爆発音がした
爆発音がした
爆発音がした
爆発音がした

ソース


<ul class="List ListDisc ListInline_SP ListInline_PC">
<li></li>
<li></li>
<li></li>
</ul>

記述リスト：左右（dlh）

初期状態で定義してあるのは左右の振り分けのみです。
SPで縦並びにしたい場合は「DLHori_SP」を追加してください。

表示サンプル

2022年07月07日: 親譲りの無鉄砲で小供の時から損ばかりしている。

2022年7月7日: 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

ソース


<div class="DLHori DLHori_SP">
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

記述リスト：上下（dlv）

表示サンプル

2022年07月07日: 親譲りの無鉄砲で小供の時から損ばかりしている。

2022年7月7日: 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

ソース


<div class="DLVert">
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

記述リスト：テーブルスタイル（dlt）

SPで縦並びにしたい場合は「DLTable_SP」を追加してください。

表示サンプル

2022年07月07日: 親譲りの無鉄砲で小供の時から損ばかりしている。

2022年7月7日: 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

ソース


<div class="DLTable DLTable_SP">
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
<!-- * -->
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

表組み：項目左（t1）

セルの横幅やalignは個別に設定してください。
SPで縦並びにしたい場合は「Table1_SP」を追加してください。

表示サンプル

厚揚げ	5,000円
ポテトサラダ	10,000円
黒ラベル	15,000円
確かに摂食行動は生きるための本能的な営みに過ぎない。事実、食欲は満たされた瞬間に飽和する。それでも、人は食に魅せられ、日々の暮らしの中でその周辺も含め、文化として食を享受している。	15,000円

ソース


<table class="Table1 Table1_SP">
<!-- * -->
<tr>
<th></th>
<td></td>
</tr>
<!-- * -->
<tr>
<th></th>
<td></td>
</tr>
</table>

表組み：項目上（t2）

セルの横幅やalignは個別に設定してください。

表示サンプル

SPで横スクロール表示にしたい場合は「TableScroll」で囲んでください。

商品名	評価	単価	数量	合計金額
厚揚げ	★★★★★	2	500円	1,000円
ポテトサラダ	★★★★★	2	500円	1,000円
黒ラベル	★★★★★	2	500円	1,000円

ソース


<div class="TableScroll">
<table class="Table2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<!-- * -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- * -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

テキストリンクアイコン

class名は暗記しましょう。

表示サンプル

通常リンク（class="LinkFwd"）
戻るリンク（class="LinkBack"）
下へリンク（class="LinkDown"）
上へリンク（class="LinkUp"）
外部リンク（class="LinkNewWin"）
PDFリンク（class="LinkPDF"）

ソース


<a class="LinkFwd" href="#"></a>
<a class="LinkBack" href="#"></a>
<a class="LinkDown" href="#"></a>
<a class="LinkUp" href="#"></a>
<a class="LinkNewWin" href="#" target="_blank"></a>
<a class="LinkPDF" href="#" target="_blank"></a>

リンクアイコン

それなりに使用頻度が高いので予め定義してあります。使用する部位単位でスタイルは調整してください。
このサイトではフッターメニューに使用しています。
class名は暗記しましょう。

矢印1（LinkIcon1）

SPでは矢印は右側、PCでは左側に付きます。

ソース


<a href="#" class="LinkIcon1"></a>

プラス・マイナス（LinkIconPlus）

主にアコーディオンメニューに使用。class「Current」でマイナス表示になります（JSで付与）。

ソース


<a href="#" class="LinkIconPlus"></a>

ボタン（btn）

classは、サイズ、カラー、矢印の種類で指定。class名は暗記しましょう。

矢印：左

詳しくはこちら（class="BtnS BtnColor1 BtnAllowLeft"）
詳しくはこちら（class="BtnM BtnColor1 BtnAllowLeft"）
詳しくはこちら（class="BtnL BtnColor1 BtnAllowLeft"）

ソース


<a class="BtnS BtnColor1 BtnAllowLeft W100_SP" href="#"></a>
<a class="BtnM BtnColor1 BtnAllowLeft W100_SP" href="#"></a>
<a class="BtnL BtnColor1 BtnAllowLeft W100_SP" href="#"></a>

矢印：右

詳しくはこちらをチェック（class="BtnS BtnColor1 BtnAllowRight"）
詳しくはこちらをチェック（class="BtnM BtnColor1 BtnAllowRight"）
詳しくはこちらをチェック（class="BtnL BtnColor1 BtnAllowRight"）

ボタン：戻る

前の画面に戻る（class="BtnS BtnColor2 BtnAllowBack"）
前の画面に戻る（class="BtnM BtnColor2 BtnAllowBack"）
前の画面に戻る（class="BtnL BtnColor2 BtnAllowBack"）

ボタン：閉じる

閉じる（class="BtnS BtnColor2 BtnClose"）
閉じる（class="BtnM BtnColor2 BtnClose"）
閉じる（class="BtnL BtnColor2 BtnClose"）

矢印：下向き左

詳しくはこちら（class="BtnS BtnColor3 BtnAllowDownLeft"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowDownLeft"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowDownLeft"）

矢印：下向き右

詳しくはこちら（class="BtnS BtnColor3 BtnAllowDownRight"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowDownRight"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowDownRight"）

矢印：上向き左

詳しくはこちら（class="BtnS BtnColor3 BtnAllowUpLeft"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowUpLeft"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowUpLeft"）

矢印：上向き右

詳しくはこちら（class="BtnS BtnColor3 BtnAllowUpRight"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowUpRight"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowUpRight"）

矢印なし

詳しくはこちら（class="BtnS BtnColor1"）
詳しくはこちら（class="BtnM BtnColor1"）
詳しくはこちら（class="BtnL BtnColor1"）

非アクティブ

詳しくはこちら（class="BtnS BtnColor1 Disabled"）
詳しくはこちら（class="BtnM BtnColor1 Disabled"）
詳しくはこちら（class="BtnL BtnColor1 Disabled"）

囲み

囲み表示したい要素にclass「Box」を追加して使用します。

表示サンプル

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れ

背景色

個別要素で背景色を指定したい場合に使用します。

表示サンプル

背景色1（class="BgColor1 TxtColorWhite"）

背景色2（class="BgColor2 TxtColorWhite"）

背景色3（class="BgColor3"）

アラート色

class「Alert」を付与します。

表示サンプル

テキスト（class="Alert"）

囲み（class="Box Alert"）

リスト米印（class="ListKome Alert"）
リスト2
リスト3

ページネーション（pn）

表示サンプル

ソース


<nav class="PageNation">
<p class="PageNation_Num"><strong>11ページ目</strong>（全1,000件）</p>
<ul class="PageNation_Menu">
<li class="PageNation_Prev"><a href="#">前へ</a></li>
<li><a href="#">10</a></li>
<li class="PageNation_Current"><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><span class="PageNation_Abbr">…</span></li>
<li><a href="#">9,999</a></li>
<li class="PageNation_Next"><a href="#">次へ</a></li>
</ul>
</nav>

よくある質問（faq）

表示サンプル

検索窓（sb）

表示サンプル

ソース


<nav class="SearchBox">
<form method="post" action="#">
<input class="SearchBox_Txt" type="text" name="search" value="" placeholder="キーワードを入力"><input class="SearchBox_Btn" type="submit" name="submit" value="検索">
</form>
</nav>

動画埋め込み

videoタグ（movie1）

ソース


<video src="#" controls></video>

YouTube動画（movie2）

ソース


<div class="MovieWrap">
</div>

マップ埋め込み（map）

表示サンプル

ソース


<div class="MapWrap">
</div>

個別調整

汎用

ボーダー無し: NoBorder

パディング無し: NoPadding

横幅「Inherit」: WidthInherit

opacity:1: Opacity1

太字にしない: FontWN

文字詰め「palt」: TxtPalt

箱組「TxtJustify」: TxtJustify

非アクティブ: Disabled

SPのみ表示: SP

PCのみ表示: PC

左・右・中央寄せ（text-align）

共通: AlignL、AlignR、AlignC

SP: AlignL_SP、AlignR_SP、AlignC_SP

PC: AlignL_PC、AlignR_PC、AlignC_PC

マージントップ（5px刻み）

共通: MT0〜MT50

SP: MT0_SP〜MT50_SP

PC: MT0_PC〜MT50_PC

マージンボトム（5px刻み）

共通: MB0〜MB50

SP: MB0_SP〜MB50_SP

PC: MB0_PC〜MB50_PC

横幅指定（5%刻み）

共通: W5〜W100

SP: W5_SP〜W100_SP

PC: W5_PC〜W100_PC

端末振り分け

iOS: iOS

Android: Android

スマホ: SmartPhone

タブレット: Tablet

Windows: Win

Mac: Mac

非推奨

フロート: FloatL、FloatR

ClearFix: CF