レイアウト

ディスクトップ dst

一行配置
100%

・親タグのクラス「dst」
・子タグはいくつでも一行に配置
・親タグ直下の子タグに適用
・「cs」「cb」は、必ずセットで指定
親TAG class="dst"子タグ 1つ 01. 100%表示
子タグ 3つ 02. 一行配置
子タグ 3つ 02. 一行配置
子タグ 3つ 02. 一行配置
子TAG class="cs" 03. ちっさいカラム
子TAG class="cb" 03. おっきいカラム
親TAG class="dst" 子TAGの親TAG class="dst" 04. 子タグの親タグも「dst」
子タグ 3つ 02. 一行配置
子タグ 3つ 02. 一行配置
子タグ 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.一行配置
子タグ 3つ 02.一行配置
子タグ 3つ 02.一行配置
子TAG class="cs" 03.ちっさいカラム
子TAG class="cb" 03.おっきいカラム
親TAG class="tbl" 子TAGの親TAG class="tbl" 04. 子タグの親タグも「tbl」
子タグ 3つ 02. 一行配置
子タグ 3つ 02. 一行配置
子タグ 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.一行配置
子タグ 3つ 02.一行配置
子タグ 3つ 02.一行配置
子TAG class="cs" 03.ちっさいカラム
子TAG class="cb" 03.おっきいカラム
親TAG class="smp" 子TAGの親TAG class="smp" 04. 子タグの親タグも「smp」
子タグ 3つ 02. 一行配置
子タグ 3つ 02. 一行配置
子タグ 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
 cf50
 親TAG class="cfm" 子TAG class="cf90"  01.width 86% margin:2%;
 cf10
 cf80
 cf20
 cf70
 cf30
 cf60
 cf40
 cf50
 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
 cf50
 親TAG class="cfmT" 子TAG class="cf90"  01.width 86% margin:2%;
 cf10
 cf80
 cf20
 cf70
 cf30
 cf60
 cf40
 cf50
 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
 cf50
 親TAG class="cfmS" 子TAG class="cf90"  01.width 86% margin:2%;
 cf10
 cf80
 cf20
 cf70
 cf30
 cf60
 cf40
 cf50
 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
div
div
div
 親TAG class="tbl cfA20" 02.480px以下が100%
div
div
div
div
 親TAG class="tbl" 03.親タグに「tbl」
 親TAG class="cfA20"入れ子親タグに「cfA20」480px以下が100%
div
div
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
div
div
div
 親TAG class="tbl cfAm20" 02.480px以下が100%
div
div
div
div
 親TAG class="tbl" 03.親タグに「tbl」
 親TAG class="cfAm20"入れ子親タグに「cfAm20」480px以下が100%
div
div
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%;
PC:width 30% タブレット:50%;
PC:width 30% タブレット:50%;
PC:width 30% タブレット:50%;
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%;
PC:width 30% スマホ:50%;
PC:width 30% スマホ:50%;
PC:width 30% スマホ:50%;
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

Menu

Menu

Menu

Menu

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
card

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

card

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

card

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

card

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

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>
Share