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

今回から 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つのサンプルです

<div>
<p>値が1つのサンプルです</p>
</div>
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 にしています
<ul id="sample5">
 <li>List1
  <ul>
   <li>List1_1</li>
   <li>List1_2</li>
   <li>List1_3</li>
  </ul>
 </li>
</ul>
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」という単位や、単位無しで「0」だけで指定している値については、
【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)をご覧ください。

次回予告

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

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 31 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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