【12】paddingと paddingのショートハンド

前回まで4回に渡って見てきた margin は、ややこしかったですね。
margin には「autoという値」「ネガティブ・マージン」「マージンの相殺」があって。
それに比べて padding は 幅を指定するだけなのでカンタン。
ショートハンドも margin のルールと同じです。

本日のINDEX
  1. padding について
  2. padding で使える値
  3. padding のショートハンドの使い方
    1. 値が1つ = 上下左右が全部同じ値
    2. 値が2つ = 上下と左右
    3. 値が3つ = 上、左右、下
    4. 値が4つ = 上から時計回り(上、右、下、左)
  4. padding で「相対値」を使うときの注意

padding について

padding は、コンテンツの外側からボックスの境界までの余白スペースです。

0 か、正の数値で指定します。マイナスの数値は指定できません
margin のように「auto」という値は使えません

また、padding は、margin のように相殺という現象はありませんので、隣り合う要素の padding が直接触れ合っても、1つになったりしません。
サンプルを見てみましょう。
親要素 divの背景色はグレー、子要素 p の背景色はそれぞれグリーンやイエローなどに変えています。

子要素

子要素

子要素

子要素

<div>
<p>子要素</p><p id="smpl_2">子要素</p><p id="smpl_3">子要素</p><p id="smpl_4">子要素</p>
</div>
div {margin:0;
	padding:1em;      /*親要素の上下左右に1emのpaddingを指定*/
	background:#ddd;} /*親要素の背景色はグレーです*/
div p {
	display:inline-block; /*子要素pをブロックレベルのまま横に並べています*/
	-webkit-box-sizing: padding-box; /*box-sizingのベンダープレフィックス*/
    box-sizing: padding-box; /*box-sizingでpaddingまでをボックスサイズにしています*/
	width:50%; /*box-sizingのおかげで、左右のpaddingがあっても親要素からはみ出ません*/
	margin:0;
	text-align:center;
	padding:1em;    /*子要素の上下左右に1emのpaddingを指定*/
	background:#e9ffd3;}           /*薄いグリーン*/
div p#smpl_2 {background:#ffc;}    /*薄いイエロー*/
div p#smpl_3 {background:#cef;}    /*薄いブルー*/
div p#smpl_4 {background:#ffe3e7;} /*薄いピンク*/
サンプルのソースで使用している「display:inline-block」「box-sizing」についてはコチラをご覧ください。
display:inline-block
上のサンプルでは、p要素を横に並べるために使っています。
【9】HTML要素の インライン・ブロックレベル について→displayプロパティで性質を入れ替える
box-sizing
上のサンプルでは、p要素の幅を指定したいけど、デフォルトではコンテンツまでがボックス幅になるので、paddingの範囲までボックス幅を広げるために使っています(そうじゃないと、p要素が div要素の外にはみ出るから)
【10】ボックスモデル(margin, padding, border を使いこなそう)→着膨れを解消する box-sizing: border-box

親要素も子要素もそれぞれがpaddingの領域を確保していて、お互いに吸収されたりしませんね。
それから、それぞれの要素に backgroundプロパティで背景を指定していますが、paddingの部分にも背景が表示されるのがわかりますね。
背景は borderの部分まで表示されるのがデフォルト。backgroundの詳細は後日)

上のサンプルでも使っている「padding:1em」といった書き方が、ショートハンドです。
では続いて padding のショートハンドについて見てみましょう。

padding で使える値

padding は、以下の値が使えます。

padding の値
数値 px や em などの単位を付けて指定します
% 要素の幅や高さに対するパーセントで指定
値の継承 なし 適用できる要素 全部
ただし、テーブル関連の <tr> <thead> <tbody> <tfoot> <colgroup> <col> には使えないので要注意。

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

padding も上下左右にありますので
padding-top padding-bottom padding-left padding-right という4つのプロパティがあります。そのショートハンドプロパティが、padding です。

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

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

子要素

<div>
<p>子要素</p>
</div>
div {
	padding:3em;   /*値が1つだと、上下左右同じという意味です*/
	margin:0;
	border:solid 1px #ccc;
	background:#e9ffd3;
	text-align:center;}
div p {background:#fff; margin:0; padding:0.5em; text-align:center;}

値が2つ = 上下と左右

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

子要素

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

値が3つ = 上、左右、下

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

子要素

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

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

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

子要素

div {
	padding:3em 30% 10px 1.5em;}  /*値が4つで「上 → 右 → 下 → 左」の値*/
     /*他の指定は略(先ほどとまったく同じ指定です)*/

padding で「相対値」を使うときの注意

「単位」のときにも書いていますが、
emなどのフォント関連の相対値だと、自分自身のフォントサイズが基準の相対値になり、
%で指定すると、自分じゃなく親のボックスサイズが基準の相対値になります。
相対値の単位によって、相対の対象が変わるので、注意が必要です。

フォントサイズ 16px。padding: 0.3em です。

フォントサイズは同じ。padding: 30% です。

<div>
<p>フォントサイズ 16px。padding: 0.3em です。</p>
<p id="prcnt">フォントサイズは同じ。padding: 30% です。</p>
</div>
div {
	font-size:16px;  /*親要素のdivにフォントサイズを指定すれば、子も同じになります*/
    border:solid 1px #ccc;
    padding:0;
    margin:0;}
div p {
	background:rgba(102, 153, 255, 0.5);
	border:solid 1px rgb(102, 153, 255);
	margin:1em;
	padding:0.3em;}
div p#prcnt {
	padding:30%;}

次回予告

paddingは、レイアウトでけっこう使うので、使い方が単純でありがたいですね。
同じくらいよく使う margin は複雑だけどね(笑)

次回は、border について。border は要素の外側にボーダーをつけるプロパティです。
border は、margin や padding と違って「太さ」だけでなく「スタイル(実線とか点線とか)」や「色」も指定できるので、ちょっとだけ複雑かもしれません。
ボーダーもレイアウトでよく使うので、ショートハンドをきちんと覚えておけば便利です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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.