【11-1】marginと marginのショートハンド

最終更新日:2017年11月13日  (初回投稿日:2015年11月04日)

今回から margin(マージン)プロパティについて。
margin は、CSSレイアウトですっごくよく使いますが、これがけっこうクセ者です。

autoという値・ネガティブマージン・相殺(マージンどうしの結合)など、marginだけの独特のルールがあるんです。
それを知らないままだと、いつまでもCSSで手こずるハメに。(経験者は語るww)
そんなわけで、marginでぜひ覚えておいたほうがイイことを、これから4回に分けて書いていきます。

今回は、けっこう簡単な margin のショートハンドについて。
ショートハンドの書き方の基本を見てみましょう。

margin は上下左右にありますので
margin-top margin-bottom margin-left margin-right という4つのプロパティがあります。
この4つを、いちいち別々に指定しなくても、ショートハンドプロパティmargin で1つにまとめて書くことができます。
この 一括でまとめて書く方法を、CSSの ショートハンド(Shorthand)と言います。
マージンの上下左右のプロパティ

本日のINDEX
  1. ショートハンドとは
  2. margin で使える値
  3. margin のショートハンドの使い方
    1. 値が1つ = 上下左右が全部同じ値
    2. 値が2つ = 上下と左右
    3. 値が3つ = 上、左右、下
    4. 値が4つ = 上から時計回り(上、右、下、左)
  4. margin-right などの個別指定はどんなときに使うか

ショートハンドとは

CSSの「ショートハンド」とは、指定を一括でまとめて書く方法。

例えば、上下左右のマージンを全部20pxにしたいとき、
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
なんつって4行も書いていたら大変ですね。後でやっぱり30pxにしたいなんてとき、4行とも直さなくちゃならなくてめんどくさいし。
これをたった1行の
margin:20px;
というショートハンドで書けばOKというわけ。便利だしシンプルなソースに書けるので、積極的に使っていきましょう。

ショートハンドは別に margin だけにあるのではなく、paddingborderbackgroundfont などにもショートハンドが用意されています。
ざっと、どんなショートハンドプロパティがあるか、表にしてみました。
これらのうち、よく使うものを順次紹介していく予定です。けど、とにかく今回は marginね。

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

margin で使える値

margin は、要素の外側の隣接するボックスとの間隔、または子要素の場合は親要素のとの間隔ですので、距離を指定します。以下の値が使えます。

margin の値
auto 値が自動計算されます(autoに関しては次回詳細)
数値 px や em などの単位を付けて指定します
% 要素の幅や高さに対するパーセントで指定
値の継承 なし 適用できる要素 全部
ただし、テーブル関連の <tr> <th> <td> <thead> <tbody> <tfoot> <colgroup> <col> には使えないので要注意。

margin のショートハンドの使い方

では、margin のショートハンドの法則を見ていきましょう。
下で説明する法則は、padding や border などでも共通のものなので、ぜひ覚えておこう。

値が1つ = 上下左右が全部同じ値

margin:値 というカタチで値が1つなら、上下左右ぜんぶ同じ値という意味です。

サンプルを作ってみました。

値が1つのサンプルです

HTMLソースです(以下のサンプルのHTMLは全部これと同じ構造です)

<div>
<p>値が1つのサンプルです</p>
</div>

CSSはこちら。

div {
	border:solid 1px #ccc;  /*←ここにもショートハンド使ってるけどね。これはボーダー*/
	padding:0;}   /*←これもショートハンドだわ。パディングが上下左右全部0という意味です*/
div p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	margin:1em;}  /*値が1つだと、上下左右同じという意味です*/

値が2つ = 上下と左右

margin:値 値 で値が2つなら「上下」「左右」の値だという意味。
値と値の間は「半角スペース」で区切ります。

値が2つのサンプルです

div p { /*他の指定は略(先ほどとまったく同じ指定です)*/
	margin:1em 10%;}  /*値が2つで「上下」「左右」の値*/

値が3つ = 上、左右、下

margin:値 値 値 で値が3つなら「上」「左右」「下」の値だという意味。
値と値の間は「半角スペース」で区切ります。

値が3つのサンプルです

div p { /*他の指定は略*/
	margin:0.7em 10% 25px;}  /*値が3つで「上」「左右」「下」の値*/

値が4つ = 上から時計回り(上、右、下、左)

margin:値 値 値 値 で値が4つだと、ちょっと変わった法則です。
上から始まって時計回りに「上 → 右 → 下 → 左」の値を表します。
値と値の間は「半角スペース」で区切ります。

値が4つのサンプルです

div p { /*他の指定は略*/
	margin:0.7em 10% 25px 0;}  /*値が4つで「上 → 右 → 下 → 左」の値*/

margin-right などの個別指定はどんなときに使うか

マージンの上下左右の値を ショートハンド で書けるんだったら、margin-right やら margin-bottom などの個別のプロパティってどこに使うの? って思いますよね。

まずショートハンドプロパティで指定した後、ほかの値はそのままで、ピンポイントで変えたいというときに、個別指定のプロパティを使うと便利です。

サンプルを見てみましょう。
入れ子にしたリストの、一番最後の <li>要素の margin-bottom だけ違う値にした例です。

  • List1
    • List1_1
    • List1_2
    • List1_3 ここだけ margin-bottom: 0 にしています

HTMLはこちら。

<ul id="sample5">
 <li>List1
  <ul>
   <li>List1_1</li>
   <li>List1_2</li>
   <li>List1_3</li>
  </ul>
 </li>
</ul>

CSSはこちら。

ul#sample5 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample5 li {
	margin:1em;
	padding:1em;
	list-style:none;
	background:rgba(102, 153, 255, 0.5);
	border-radius:5px;
	color:#fff;
	line-height:1em;}
ul#sample5 li ul {margin:0;}
ul#sample5 li ul li {margin:1em 0 1em 3em;}
ul#sample5 li ul li:last-child {margin-bottom:0;}

入れ子にした <ul>要素内の <li>要素は、上下のマージンが1emずつです(11行目)が、マージンの相殺により各 <li>要素の間隔は 1em になります。合計の 2em にはなりません。
マージンの相殺については後日【11-4】で詳しくやります。)

ですが 最後の<li>は、親の padding と自分の margin のおかげで、下が 2em 空いてしまいます。
これを解消して、下の空きを他と同じ 1em にするために、
擬似クラス「 :last-child 」で、最後の<li>だけ 下マージンを 0 にしています。(12行目)
ここでは下マージンだけしか変更したくないので、margin-bottom プロパティだけ使っています。
こんなかんじで、シーンに合わせてプロパティを使い分けるってわけです。

擬似クラス については、
【3】id とか classって何?(セレクタの「種類」を知っておこう)を、
「em」「%」「px」という単位については、
【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)をご覧ください。

次回予告

今回のショートハンドの書き方は、他のショートハンドプロパティでも共通のルールなので、よ〜く覚えておこう。特に4つ書く時の「時計回りの上→右→下→左」は覚えておいて損は無いですw すごくよく使うから。

さて次回は margin の「auto」という値について。
margin は、数値だけでなく「auto(オート=自動)」という値も使えます。
「auto」はブラウザが自動でサイズを計算してくれる値。使いこなせば、要素をセンター合わせにできたりして便利です。でもけっこうクセがあるんだな、これが。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.