ITコラム

Banner Badge Label Blank Copy Space Concept

ITコラム

2017.04.05

CSS【 margin 】1 ~ マージンとショートハンド

marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。
今回は、このmarginプロパティの概要と、ショートハンドについてまとめたいと思います。

marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ~ マージンとショートハンド(本ページ)
CSS【 margin 】2 ~ autoとwidthと上下と左右
CSS【 margin 】3 ~ ネガティブマージン
CSS【 margin 】4 ~ マージンの相殺 (margin collapsing)(1)
CSS【 margin 】5 ~ マージンの相殺 (margin collapsing)(2)

目次

1.ショートハンドとは
2.marginの値
3.marginのショートハンドの書き方
4.個別指定のプロパティ

1.ショートハンドとは

CSSのショートハンドとは、複数のプロパティをまとめて1つのプロパティで指定する方法のことです。ショートハンドを使うと、スタイルシートの内容が読みやすくなったり、コード量が減るためにコーディング作業がスムーズになったりするメリットがあります。

例えば、上下左右のマージンを全部10pxにしたいとき、通常は次のように指定します。

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

この書き方だと、指定する際も大変ですが、後で変更があった場合は4箇所の値をそれぞれ修正行する必要があります。

同じ内容の仕様を、ショートハンドを使って指定すると、次のような書き方となります。

margin:10px;

便利で読みやすく、修正作業も捗ります。

marginの他、padding や border、background、font などでもショートハンドが使えます。

ショートハンドを指定できるプロパティ

margin マージンの上、下、左、右
padding パディングの上、下、左、右
background 背景色、背景画像、画像の表示位置 / 画像のサイズ、画像の繰り返し方法、描画領域、画像の配置基点、画像のスクロール方法
border ボーダーの上、下、左、右の 太さ、スタイル、色
border-image ボーダーに使用する画像、画像のスライス、太さ、外側への拡張、繰り返し方法
outline アウトラインの太さ、スタイル、色
font 文字のスタイル(イタリックか正体か)、文字の表示機能(small-capsとか)、文字の太さ、サイズ / 行の高さ、書体(font-family)
list-style リストマーカーの種類、位置、画像
columns マルチカラムの個数、カラム幅
transform マトリックス変形、移動距離、拡大率、回転の角度、傾斜角度
transition 遷移させるプロパティ、変化にかける時間、変化中の速度、開始のタイミング
animation アニメーションの名前、1回分の再生時間、速度に緩急をつる、開始のタイミング、再生回数、逆方向の再生

▲目次へ戻る

 

2.marginの値

marginプロパティは、要素の外側の隣りのボックスとの間隔、または子要素の場合は親要素のとの間隔を指定します。
marginプロパティの値は、次の通りです。

auto 値が自動計算される
数値 px や em などの単位を付けて指定
% 要素の幅や高さに対するパーセントで指定

marginプロパティの値は、継承されません。
また、marginプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。

▲目次へ戻る

 

3.marginのショートハンドの書き方

marginプロパティのショートハンドの書き方には、ルールがあります。
このルールは、paddingプロパティやborderプロパティなどでも共通のルールです。

値が1つの場合は、上下左右が全て同じ値
{margin:値;}のように値を1つ指定している場合は、上下左右全て同じ値という意味の指定です。

margin:3em;

(CSSソース)
div p {
    background:#e9ffd3;
    margin:3em;} 

(HTMLソース)
<div>
    <p>margin:3em;</p>
</div>
値が2つの場合は、上下と左右の値
{margin:値1 値2;}のように値を2つ指定している場合は、上下(同じ値で値1)と左右(同じ値で値2)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 3em;

(CSSソース)
div p {
    background:#e9ffd3;
    margin:1em 3em;} 

(HTMLソース)
<div>
    <p>margin:1em 3em;</p>
</div>
値が3つの場合は、上、左右、下、の値
{margin:値1 値2 値3;}のように値を3つ指定している場合は、上(値1)、左右(同じ値で値2)、下(値3)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 2em 3em;

(CSSソース)
div p {
    background:#e9ffd3;
    margin:1em 2em 3em;} 

(HTMLソース)
<div>
    <p>margin:1em 2em 3em;</p>
</div>
値が4つの場合は、上、右、下、左、の値
{margin:値1 値2 値3 値4;}のように値を4つ指定している場合は、上から始まって時計回りに、上(値1)、右(値2)、下(値3)、左(値4)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 2em 3em 0;

(CSSソース)
div p {
    background:#e9ffd3;
    margin:1em 2em 3em 0;} 

(HTMLソース)
<div>
    <p>margin:1em 2em 3em 0;</p>
</div>

▲目次へ戻る

 

4.個別指定のプロパティ

マージンの上下左右の値をショートハンドで指定できるので、個別のmargin-rightプロパティなどは必要ないようにも思えますが、例えば、ショートハンドで値を指定した上で、一部だけピンポイントで値を変えたい場合には、個別指定のプロパティを使います。

入れ子にしたリストを、ショートハンドでmarginプロパティを指定すると、次のような表示になります。

  • AList
    • AList1
    • AList2
    • AList3

(CSSソース)
ul#sample1 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample1 li {
	margin:1em;
	padding:1em;
	background:rgba(49, 169, 238, 0.5);
	color:#fff;
	line-height:1em;}
ul#sample5 li ul {margin:0;}
ul#sample5 li ul li {margin:1em 0 1em 3em;}

(HTMLソース)
<ul id="sample1">
    <li>AList
        <ul>
            <li>AList1</li>
            <li>AList2</li>
            <li>AList3</li>
        </ul>
    </li>
</ul>

入れ子にしたul要素内のli要素は、上下のマージンが1emずつですが、マージンの相殺により各li要素間は、合計の2emにはならず、1emとなります。
ですが 最後のli要素は、親のpaddingと自分のmarginのおかげで、下が2em空いてしまいます。

これを、下の空きを他と同じ1emにしたい場合は、最後のli要素だけmargin-bottomプロパティを指定します。

  • BList
    • BList1
    • BList2
    • BList3 ここだけ「 margin-bottom: 0 」と指定しています

(CSSソース)
ul#sample2 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample2 li {
	margin:1em;
	padding:1em;
	background:rgba(49, 169, 238, 0.5);
	color:#fff;
	line-height:1em;}
ul#sample2 li ul {margin:0;}
ul#sample2 li ul li {margin:1em 0 1em 3em;}
ul#sample2 li ul li:last-child {margin-bottom:0;}

(HTMLソース)
<ul id="sample2">
    <li>BList
        <ul>
            <li>BList1</li>
            <li>BList2</li>
            <li>BList3</li>
        </ul>
    </li>
</ul>

擬似クラス「 :last-child 」で、最後の要素だけ下マージンを 0 にしています。
ここでは、一番最後の下マージンだけを変更したいので、margin-bottomプロパティを使っています。
このように、シーンに合わせて個別指定のプロパティを使います。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.