レイアウト

レイアウト

ディスクトップ　dst

一行配置
100%

・親タグのクラス「dst」
・子タグはいくつでも一行に配置
・親タグ直下の子タグに適用
・「cs」「cb」は、必ずセットで指定

親TAG class="dst"子タグ　1つ 01. 100%表示

子タグ　3つ 02. 一行配置

子TAG class="cs" 03. ちっさいカラム

子TAG class="cb" 03. おっきいカラム

親TAG class="dst" 子TAGの親TAG class="dst"　04. 子タグの親タグも「dst」

子タグ　3つ 02. 一行配置

dsk：ディスクトップ（DiSkTop）、cs：カラムスモール（Column Small）、cb：カラムビッグ（Column Big）

code

<div class="dst">
    <div> 01.100表示%</div>
</div>
<div class="dst">
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
</div>
<div class="dst">
    <div class="cs"> 03.ちっさいカラム　子TAG class="cs"</div>
    <div class="cb"> 03.おっきいカラム　子TAG class="cb"</div>
</div>
<div class="dst">
    <div> 04. 子タグの親タグも「dst」</div>
    <div class="dst">
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
    </div>
</div>

タブレット　tbl

一行配置
100%

・親タグのクラス「tbl」
・子タグはいくつでも一行に配置
・親タグ直下の子タグに適用
・BreakPoint 768px

親TAG class="tbl"子タグ　1つ 01.100%表示

子タグ　3つ 02.一行配置

子TAG class="cs" 03.ちっさいカラム

子TAG class="cb" 03.おっきいカラム

親TAG class="tbl" 子TAGの親TAG class="tbl"　04. 子タグの親タグも「tbl」

子タグ　3つ 02. 一行配置

tbl：タブレット（TaBLet）、cs：カラムスモール（Column Small）、cb：カラムビッグ（Column Big）

code

<div class="tbl">
    <div> 01.100表示%</div>
</div>
<div class="tbl">
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
</div>
<div class="tbl">
    <div class="cs"> 03.ちっさいカラム　子TAG class="cs"</div>
    <div class="cb"> 03.おっきいカラム　子TAG class="cb"</div>
</div>
<div class="tbl">
    <div> 04. 子タグの親タグも「tbl」</div>
    <div class="tbl">
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
    </div>
</div>

スマホ　smp

一行配置

・親タグのクラス「smp」
・子タグはいくつでも一行に配置
・親タグ直下の子タグに適用
・BreakPoint 480px

親TAG class="smp"子タグ　1つ 01.100%表示

子タグ　3つ 02.一行配置

子TAG class="cs" 03.ちっさいカラム

子TAG class="cb" 03.おっきいカラム

親TAG class="smp" 子TAGの親TAG class="smp"　04. 子タグの親タグも「smp」

子タグ　3つ 02. 一行配置

smp：スマホ（SMartPhone）、cs：カラムスモール（Column Small）、cb：カラムビッグ（Column Big）

code

<div class="smp">
    <div> 01.100表示%</div>
</div>
<div class="smp">
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
    <div> 02.一行配置</div>
</div>
<div class="smp">
    <div class="cs"> 03.ちっさいカラム　子TAG class="cs"</div>
    <div class="cb"> 03.おっきいカラム　子TAG class="cb"</div>
</div>
<div class="smp">
    <div> 04. 子タグの親タグも「smp」</div>
    <div class="smp">
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
        <div> 02.一行配置</div>
    </div>
</div>

サイズ指定（複数行、ディスクトップ）

指定サイズ

・親タグのクラス
1.「cf」margin：0；
2.「cfm」margin:2%;
・任意タグのクラス「cf90」～「cf10」数字はサイズ90%～10%

　親TAG class="cf"　子TAG class="cf90" 　01.width 90%

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

　親TAG class="cfm"　子TAG class="cf90" 　01.width 86% margin:2%;

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

cf：カラムフレックス（Column Flex）、cfm：カラムフレックス　マージン（Column Flex Margin）

code

<div class="cf">
    <div class="cf90">01.width 90%</div>
</div>
<div class="cfm">
    <div class="cf90">01.width 86% margin:2%;</div>
</div>

サイズ指定（複数行、タブレット）

　指定サイズ
　100%

・親タグのクラス
1.「cfT」margin：0；
2.「cfmT」margin:2%;
・任意タグのクラス「cf90」～「cf10」数字はサイズ

　親TAG class="cfT"　子TAG class="cf90" 　01.width 90%

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

　親TAG class="cfmT"　子TAG class="cf90" 　01.width 86% margin:2%;

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

cfT：カラムフレックス　タブレット（Column Flex Tablet）、cfmT：カラムフレックス　マージン　タブレット（Column Flex Margin Tablet）

code

<div class="cfT">
    <div class="cf90">01.width 90%</div>
</div>
<div class="cfmT">
    <div class="cf90">01.width 86% margin:2%;</div>
</div>

サイズ指定（複数行、スマホ）

指定サイズ
100%

・親タグのクラス
1.「cfS」margin：0；
2.「cfmS」margin:2%;
・任意タグのクラス「cf90」～「cf10」数字はサイズ

　親TAG class="cfS"　子TAG class="cf90" 　01.width 90%

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

　親TAG class="cfmS"　子TAG class="cf90" 　01.width 86% margin:2%;

　cf10

　cf80

　cf20

　cf70

　cf30

　cf60

　cf40

　cf50

cfS：カラムフレックス　スマホ（Column Flex Smartphone）、cfmS：カラムフレックス　マージン　スマホ（Column Flex Margin Smartphone）

code

<div class="cfS">
    <div class="cf90">01.width 90%</div>
</div>
<div class="cfmS">
    <div class="cf90">01.width 86% margin:2%;</div>
</div>

サイズ指定（複数行　一括）

・親タグのクラス
1.「cfA90」～「cfA10」margin：0；
・親タグ直下の子タグに適用
・「cfA90」～「cfA10」数字はサイズ90%～10%
・全デバイスで、指定サイズで表示されます。
・同じタグにクラス「tbl」で、480px以下が100％になります。
・親クラスに「tbl」、入れ子親タグに「cfA90」でもOK。480px以下が100％になります。

　親TAG class="cfA20"　01.子div全てに適用

div

　親TAG class="tbl cfA20"　02.480px以下が100％

div

　親TAG class="tbl"　03.親タグに「tbl」

　親TAG class="cfA20"入れ子親タグに「cfA20」480px以下が100％

div

cfA：カラムフレックス　オール（Column Flex All）

code

<div class="cfA20">
    <div>01.子div全てに適用</div>
    <div>margin:0;</div>
</div>
<div class="tbl cfA20">
    <div>02.480px以下が100%</div>
    <div>margin:0;</div>
</div>
<div class="tbl">
    <div>03.親タグに「tbl」</div>
    <div class="cfA20">
        <div>入れ子親タグに「cfA20」</div>
        <div>480px以下が100%</div>    
    </div>
</div>

・親タグのクラス
1.「cfAm20」margin：2%；
・子タグはdivのみに適用
・「cfAm90」～「cfAm10」数字はサイズ86%～6%
・全デバイスで、指定サイズで表示されます。
・同じタグにクラス「tbl」で、480px以下が100％になります。
・親クラスに「tbl」、入れ子親タグに「cfA90」でもOK。480px以下が100％になります。

　親TAG class="cfAm20"　01.子div全てに適用

div

　親TAG class="tbl cfAm20"　02.480px以下が100％

div

　親TAG class="tbl"　03.親タグに「tbl」

　親TAG class="cfAm20"入れ子親タグに「cfAm20」480px以下が100％

div

cfAm：カラムフレックス　オール　マージン（Column Flex All Margin）

code

<div class="cfAm20">
    <div>01.子div全てに適用</div>
    <div>margin:2%;</div>
</div>
<div class="tbl cfAm20">
    <div>02.480px以下が100%</div>
    <div>margin:2%;</div>
</div>
<div class="tbl">
    <div>03.親タグに「tbl」</div>
    <div class="cfAm20">
        <div>入れ子親タグに「cfAm20」</div>
        <div>480px以下が100%</div>    
    </div>
</div>

強制2カラム（タブレット）

　指定サイズ
　50%

・cf系統(複数行)を利用した上で、タブレットで強制的に2カラム表示したい場合に使用
・親タグのクラス
1.「setC50t」margin：0；
2.「setCm50t」margin:2%;
・cf系統と同じタグに指定

　親TAG class="cfA30 setC50t"

PC:width 30% タブレット:50%;

setC50t：セット　カラム　50　タブレット（SET Column 50 Tablet）

code

<div class="cfA30 setC50t">
    <div>親TAG class="cfA30 setC50t"</div>
    <div>PC:width 30% タブレット:50%;</div>
</div>
<div class="cfA30 setCm50t">
    <div>親TAG class="cfA30 setCm50t"</div>
    <div>PC:width 30% タブレット:46%;</div>
</div>

強制2カラム（スマホ）

　指定サイズ
　50%

・cf系統(複数行)を利用した上で、スマホで強制的に2カラム表示したい場合に使用
・親タグのクラス
1.「setC50s」margin：0；
2.「setCm50s」margin:2%;
・cf系統と同じタグに指定

　親TAG class="cfA30 setC50s"

PC:width 30% スマホ:50%;

setC50s：セット　カラム　50　スマホ（SET Column 50 Smp）

code

<div class="cfA30 setC50s">
    <div>親TAG class="cfA30 setC50s"</div>
    <div>PC:width 30% タブレット:50%;</div>
</div>
<div class="cfA30 setCm50s">
    <div>親TAG class="cfA30 setCm50s"</div>
    <div>PC:width 30% タブレット:46%;</div>
</div>

カラムを右寄せ

・任意タグクラス「cr80」～「cr20」数字はサイズ80%~20%
・デフォルトで、768px以下が100%になります。
・同じタグにクラス「tbl」で、480px以下が100%になります。
・同じタグにクラス「smp」で、全デバイスで80%~20%になります。

　TAG class="cr80"01.768px=width 100%

　TAG class="tbl cr80"02.480px=width 100%

　TAG class="smp cr80"03.全デバイスで 80%

cr：カラム　ライト（Column Right）

code

<div class="cr80">01.768px=width 100%</div>
<div class="tbl cr80">02.480px=width 100%</div>
<div class="smp cr80">03.全デバイスで 80%</div>

カラムを中央寄せ

・任意タグクラス「cc80」～「cc20」数字はサイズ80%~20%
・デフォルトで、768px以下が100%になります。
・同じタグにクラス「tbl」で、480px以下が100%になります。
・同じタグにクラス「smp」で、全デバイスで80%~20%になります。

　TAG class="cc80"01.768px=width 100%

　TAG class="tbl cc80"02.480px=width 100%

　TAG class="smp cc80"03.全デバイスで 80%

cc：カラム　ライト（Column Center）

code

<div class="cc80">01.768px=width 100%</div>
<div class="tbl cc80">02.480px=width 100%</div>
<div class="smp cc80">03.全デバイスで 80%</div>

子タグを右寄せ

右寄せ
中央寄せ

・親タグのクラス「end」
・スマホでは中央寄せ

LOGO

code

  <nav class="end">
    <ul>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
  </nav>

子タグを中央寄せ

中央寄せ

・親タグのクラス「center」
・スマホでは中央寄せ

LOGO

code

  <nav class="cc80 center">
    <ul>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
  </nav>

Padding

・上下左右に適用
・クラス「p10」～「p100」はその要素に適用
・クラス「p10i」～「p100i」の直下の子タグ適用
・数字はピクセルサイズ

　任意TAG class="p20"　01.任意タグにパディング

　親TAG class="p20i"　02.子タグにパディング

code

<div class="p20">01.任意タグにパディング"</div>
<div class="p20i">
    <p>02.親TAG class="p20i"</p><p>02.子タグにパディング</p>
</div>

Margin

・上下左右に適用
・クラス「m10」～「m100」はその要素に適用
・クラス「m10i」～「m100i」の直下の子タグ適用
・数字はピクセルサイズ

　任意TAG class="m20"　01.任意タグにマージン

　親TAG class="m20i"　02.子タグにマージン

code

<div class="m20">　01.任意タグにマージン</div>
<div class="m20i">
    <p>02.親TAG class="m20i"</p><p>02.子タグにマージン</p>
</div>

カードレイアウト

・親TAG クラス「card」で四角
・親TAG クラス「cardR」で角丸
・imgは100%表示
・上の階層タグに「tbl」「smp」を適用もOK

01.カードレイアウト　四角、上の階層にtbl

Link Link

02.カードレイアウト　角丸、上の階層にtbl

Link Link

カードレイアウト　四角、上の階層にsmp

Link Link

カードレイアウト　角丸、上の階層にsmp

Link Link

code

<div class="tbl">
    <div class="card">
        <img src="img/card.jpg" alt="card" />
        <div>
            <p>01.カードレイアウト　四角、上の階層にtbl</p>
            <div><a href="">Link</a><a href="">Link</a></div>
         </div>
    </div>
    <div class="cardR">
        <img src="img/card.jpg" alt="card" />
        <div>
            <p>02.カードレイアウト　角丸、上の階層にtbl</p>
            <div><a href="">Link</a><a href="">Link</a></div>
         </div>
    </div>
</div>

Download

Demo

レイアウト

ディスクトップ dst

code

タブレット tbl

code

スマホ smp

code

サイズ指定（複数行、ディスクトップ）

code

サイズ指定（複数行、タブレット）

code

サイズ指定（複数行、スマホ）

code

サイズ指定（複数行 一括）

code

code

強制2カラム（タブレット）

code

強制2カラム（スマホ）

code

カラムを右寄せ

code

カラムを中央寄せ

code

子タグを右寄せ

code

子タグを中央寄せ

code

Padding

code

Margin

code

カードレイアウト

code

ディスクトップ　dst

タブレット　tbl

スマホ　smp

サイズ指定（複数行　一括）