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

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

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

枠の外側の余白(マージン)を変更する

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

マージンサイズクラスマージンサイズクラスマージンサイズクラス
0pxm030pxm3090pxm90
5pxm540pxm40100pxm100
10pxm1050pxm50120pxm120
15pxm1560pxm60150pxm150
20pxm2070pxm70200pxm200
25pxm2580pxm80300pxm300
使用例 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でマージンを変える

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

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

位置PCスマホクラス位置PCスマホクラス
10px20pxm10-20-t10px20pxm10-20-b
15px30pxm15-30-t15px30pxm15-30-b
20px40pxm20-40-t20px40pxm20-40-b
25px50pxm25-50-t25px50pxm25-50-b
30px60pxm30-60-t30px60pxm30-60-b
35px70pxm35-70-t35px70pxm35-70-b
40px80pxm40-80-t40px80pxm40-80-b
45px90pxm45-90-t45px90pxm45-90-b

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

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

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

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

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

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

パディングサイズクラスマージンサイズクラスマージンサイズクラス
0pxp025pxp2570pxp70
5pxp530pxp3080pxp80
10pxp1040pxp4090pxp90
15pxp1550pxp50100pxp100
20pxp2060pxp60--
使用例 HTML

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

使用例
内側の余白100px

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

賢威8ではマージンと同じように、クラスの後に『-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;}
}