ブロック要素余白用セレクタ

パディング(内余白): pd0px～pd100px

表示例

このコード

<div class="pd10px">上下左右に10ピクセルの内余白が入ります。</div>
<div class="pd15px">上下左右に15ピクセルの内余白が入ります。</div>
<div class="pd24px">上下左右に24ピクセルの内余白が入ります。</div>
<div class="pd30px">上下左右に30ピクセルの内余白が入ります。</div>
<div class="pd40px">上下左右に40ピクセルの内余白が入ります。</div>
<div class="pd55px">上下左右に55ピクセルの内余白が入ります。</div>

上パディング(内余白): pd0px-top～pd100px-top

表示例

このコード

<div class="pd10px-top">上に10ピクセルの内余白が入ります。</div>
<div class="pd15px-top">上に15ピクセルの内余白が入ります。</div>
<div class="pd24px-top">上に24ピクセルの内余白が入ります。</div>
<div class="pd30px-top">上に30ピクセルの内余白が入ります。</div>
<div class="pd40px-top">上に40ピクセルの内余白が入ります。</div>
<div class="pd55px-top">上に55ピクセルの内余白が入ります。</div>

下パディング(内余白): pd0px-btm～pd100px-btm

表示例

このコード

<div class="pd10px-btm">下に10ピクセルの内余白が入ります。</div>
<div class="pd15px-btm">下に15ピクセルの内余白が入ります。</div>
<div class="pd24px-btm">下に24ピクセルの内余白が入ります。</div>
<div class="pd30px-btm">下に30ピクセルの内余白が入ります。</div>
<div class="pd40px-btm">下に40ピクセルの内余白が入ります。</div>
<div class="pd55px-btm">下に55ピクセルの内余白が入ります。</div>

左パディング(内余白): pd0px-l～pd100px-l

表示例

このコード

<div class="pd10px-l">左に10ピクセルの内余白が入ります。</div>
<div class="pd15px-l">左に15ピクセルの内余白が入ります。</div>
<div class="pd24px-l">左に24ピクセルの内余白が入ります。</div>
<div class="pd30px-l">左に30ピクセルの内余白が入ります。</div>
<div class="pd40px-l">左に40ピクセルの内余白が入ります。</div>
<div class="pd55px-l">左に55ピクセルの内余白が入ります。</div>

右パディング(内余白): pd0px-r～pd100px-r

表示例

このコード

<div class="pd10px-r">右に10ピクセルの内余白が入ります。</div>
<div class="pd15px-r">右に15ピクセルの内余白が入ります。</div>
<div class="pd24px-r">右に24ピクセルの内余白が入ります。</div>
<div class="pd30px-r">右に30ピクセルの内余白が入ります。</div>
<div class="pd40px-r">右に40ピクセルの内余白が入ります。</div>
<div class="pd55px-r">右に55ピクセルの内余白が入ります。</div>

マージン(外余白): mg0px～mg100px

30ピクセル(mg30px)以降は「5ピクセル」単位で指定してください。

表示例

上下左右に10ピクセルの外余白が入ります。

上下左右に15ピクセルの外余白が入ります。

上下左右に24ピクセルの外余白が入ります。

上下左右に30ピクセルの外余白が入ります。

上下左右に40ピクセルの外余白が入ります。

上下左右に55ピクセルの外余白が入ります。

このコード

<div class="mg10px">上下左右に10ピクセルの外余白が入ります。</div>
<div class="mg15px">上下左右に15ピクセルの外余白が入ります。</div>
<div class="mg24px">上下左右に24ピクセルの外余白が入ります。</div>
<div class="mg30px">上下左右に30ピクセルの外余白が入ります。</div>
<div class="mg40px">上下左右に40ピクセルの外余白が入ります。</div>
<div class="mg55px">上下左右に55ピクセルの外余白が入ります。</div>

上マージン(外余白): mg0px-top～mg100px-top

30ピクセル(mg30px-top)以降は「5ピクセル」単位で指定してください。

表示例

上に10ピクセルの外余白が入ります。

上に15ピクセルの外余白が入ります。

上に24ピクセルの外余白が入ります。

上に30ピクセルの外余白が入ります。

上に40ピクセルの外余白が入ります。

上に55ピクセルの外余白が入ります。

このコード

<div class="mg10px-top">上に10ピクセルの外余白が入ります。</div>
<div class="mg15px-top">上に15ピクセルの外余白が入ります。</div>
<div class="mg24px-top">上に24ピクセルの外余白が入ります。</div>
<div class="mg30px-top">上に30ピクセルの外余白が入ります。</div>
<div class="mg40px-top">上に40ピクセルの外余白が入ります。</div>
<div class="mg55px-top">上に55ピクセルの外余白が入ります。</div>

下マージン(外余白): mg0px-btm～mg100px-btm

30ピクセル(mg30px-btm)以降は「5ピクセル」単位で指定してください。

表示例

下に10ピクセルの外余白が入ります。

下に15ピクセルの外余白が入ります。

下に24ピクセルの外余白が入ります。

下に30ピクセルの外余白が入ります。

下に40ピクセルの外余白が入ります。

下に55ピクセルの外余白が入ります。

このコード

<div class="mg10px-btm">下に10ピクセルの外余白が入ります。</div>
<div class="mg15px-btm">下に15ピクセルの外余白が入ります。</div>
<div class="mg24px-btm">下に24ピクセルの外余白が入ります。</div>
<div class="mg30px-btm">下に30ピクセルの外余白が入ります。</div>
<div class="mg40px-btm">下に40ピクセルの外余白が入ります。</div>
<div class="mg55px-btm">下に55ピクセルの外余白が入ります。</div>

左マージン(外余白): mg0px-l～mg100px-l

30ピクセル(mg30px-l)以降は「5ピクセル」単位で指定してください。

表示例

左に10ピクセルの外余白が入ります。

左に15ピクセルの外余白が入ります。

左に24ピクセルの外余白が入ります。

左に30ピクセルの外余白が入ります。

左に40ピクセルの外余白が入ります。

左に55ピクセルの外余白が入ります。

このコード

<div class="mg10px-l">左に10ピクセルの外余白が入ります。</div>
<div class="mg15px-l">左に15ピクセルの外余白が入ります。</div>
<div class="mg24px-l">左に24ピクセルの外余白が入ります。</div>
<div class="mg30px-l">左に30ピクセルの外余白が入ります。</div>
<div class="mg40px-l">左に40ピクセルの外余白が入ります。</div>
<div class="mg55px-l">左に55ピクセルの外余白が入ります。</div>

右マージン(外余白): mg0px-r～mg100px-r

30ピクセル(mg30px-r)以降は「5ピクセル」単位で指定してください。

表示例

右に10ピクセルの外余白が入ります。

右に15ピクセルの外余白が入ります。

右に24ピクセルの外余白が入ります。

右に30ピクセルの外余白が入ります。

右に40ピクセルの外余白が入ります。

右に55ピクセルの外余白が入ります。

このコード

<div class="mg10px-r">右に10ピクセルの外余白が入ります。</div>
<div class="mg15px-r">右に15ピクセルの外余白が入ります。</div>
<div class="mg24px-r">右に24ピクセルの外余白が入ります。</div>
<div class="mg30px-r">右に30ピクセルの外余白が入ります。</div>
<div class="mg40px-r">右に40ピクセルの外余白が入ります。</div>
<div class="mg55px-r">右に55ピクセルの外余白が入ります。</div>

テキスト／コンテンツ装飾定義一覧

• 基本テキスト装飾用セレクタ
• コンテンツレイアウト用セレクタ
• フォントサイズ用セレクタ
• フォントカラー用セレクタ
• テキストマーカー用セレクタ
• 背景カラー用セレクタ
• ブロック要素余白用セレクタ
• ブロック要素のボックス表示用セレクタ
• ラベル表示用セレクタ
• 擬似ボタン表示用セレクタ
• ショートカットキー用セレクタ
• 画像の枠と背景カラーを非表示にする場合
• CSSアニメーション用セレクタ
• 透過効果(アルファ値)を持つ背景カラーを表示する