賢威８の余白（マージン・パディング）指定　PCとスマホで設定を変える

賢威８は装飾ボックスがいくつか用意されていますが、枠内や枠外の隙間の広さを変更したいときがあります。

賢威８は、その調整を非常に細かく行えるようなので、ここで紹介しておきます。

枠の外側の余白（マージン）を変更する

賢威８では枠のマージンを変更する場合、次のクラスを使用します。

マージンサイズ クラス マージンサイズ クラス マージンサイズ クラス
0px m0 30px m30 90px m90
5px m5 40px m40 100px m100
10px m10 50px m50 120px m120
15px m15 60px m60 150px m150
20px m20 70px m70 200px m200
25px m25 80px m80 300px m300
使用例 HTML

<div class="box_style box_style03 m100">
外側の余白100px
</div>

使用例
外側の余白100px

左右上下でマージンを変える

クラスの後に『-t』『-r』『-b』『-l』を付けることで、それぞれ『上側（top)』『右側（right）』『下側（bottom）』『左側(left)』のみのマージンを指定できます。

使用例 HTML

<div class="box_style box_style03 m30-b m80-r m100-l m10-t">
下側のマージン30px
右側のマージン80px
左側のマージン0px
上側のマージン10px
</div>

使用例
下側のマージン30px
右側のマージン80px
左側のマージン100px
上側のマージン10px

スマホとPCでマージンを変える

賢威８ではスマホとPCで上下のマージンを変更することもできます。

スマホは基本的に、『見にくいイコール読む気がしなくなる』ということを常に気にしておく必要があります。
PCでは問題なくても、スマホで隙間が詰まっているように見えることがあるので、PCとスマホでマージンを変えるのは効果的ですね。

位置 PC スマホ クラス 位置 PC スマホ クラス
上 10px 20px m10-20-t 下 10px 20px m10-20-b
15px 30px m15-30-t 15px 30px m15-30-b
20px 40px m20-40-t 20px 40px m20-40-b
25px 50px m25-50-t 25px 50px m25-50-b
30px 60px m30-60-t 30px 60px m30-60-b
35px 70px m35-70-t 35px 70px m35-70-b
40px 80px m40-80-t 40px 80px m40-80-b
45px 90px m45-90-t 45px 90px m45-90-b

これ以外にも独自に指定したいときは、次のように独自CSSを作成してください。

マージンを指定するCSS
.mXX-SS-t{
    margin-top:XXpx;
}
@media (min-width : 768px){
    .mXX-SS-t{margin-top:SSpx;}
}

賢威８ではスマホかどうかで切り替えているのではなくて、画面サイズが768pxより大きいか小さいかで切り替えているようです。
独自で追加するときも、同じように記述しておきます。

上の例ではmargin-topを指定していますが、margin-leftなども指定できるので、いろいろ試してみてください。

枠の内側の余白（パディング）を変更する

賢威８では枠の内側の余白（パディング）を変更する場合、次のクラスを使用します。

パディングサイズ クラス マージンサイズ クラス マージンサイズ クラス
0px p0 25px p25 70px p70
5px p5 30px p30 80px p80
10px p10 40px p40 90px p90
15px p15 50px p50 100px p100
20px p20 60px p60 - -
使用例 HTML

<div class="box_style box_style03 p100">
外側の余白100px
</div>

使用例
内側の余白100px

左右上下でパディングを変える

賢威８ではマージンと同じように、クラスの後に『-t』『-r』『-b』『-l』を付けることで、それぞれ『上側（top)』『右側（right）』『下側（bottom）』『左側(left)』のみのパディングを指定できます。

使用例 HTML

<div class="box_style box_style03 p30-b p80-r p100-l p10-t">
下側のパディング30px
右側のパディング80px
左側のパディング30px
上側のパディング10px
</div>

使用例
下側のパディング30px
右側のパディング80px
左側のパディング100px
上側のパディング10px

スマホとPCでパディングを変える

マージンとは異なり、スマホとPCでパディングを変更することができません。
変更したい場合は、次のように独自CSSを作成してください。

パディングを指定するCSS
.pXX-SS-t{
    padding-top:XXpx;
}
@media (min-width : 768px){
    .pXX-SS-t{padding-top:SSpx;}
}