marginとpadding 余白の指定方法 基礎
要素はボックスになっています
要素とはタグで囲まれた一塊のことをいうんでした。
<タグ>タグの中のコンテンツ</タグ>で要素です。
そして
全ての要素は表示領域とその境界線、余白でできていて。
この3つを合わせた領域のことをボックスと呼びます。
ボックスはすべて以下のような構造になっています。
ボックスには
テキストや画像などの要素の内容を表示するための領域があり実際に表示されるのはこの部分です
表示領域の周りにはボーダーと呼ばれる境界線がありまして上の図でいうと赤い破線の部分、これが要素の本体です。
また境界線の内側と外側は余白をとることができ、ボーダー内側の余白をpadding、外側の余白をmarginと呼びます。
今回はその「余白」についての解説をしていきます。
CSSのmarginとpaddingについて
CSSは
セレクタ{プロパティ:値
}
で表せるんでした。
例えば
p{
cplor:red
}
のような感じです。
この内marginとpaddingはプロパティになります。
これらのプロパティを使うことによって余白を調整していきます。
例えばpタグにclass名をつけて目印として。
以下のように記述をします。
<p class="above">
セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。
</p>
<p class="middle">
小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語 をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる（昔話「桃太郎」など）。
</p>
<p class="under">
性別の判別は鼻の蠟（蝋）膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟（蝋）膜の色はピンクであることが多い。
</p>
そしてそれぞれmarginとpaddingに違う値を入れてみました。
なおmarginとpaddingはそれだけだと上下左右に同じだけ余白を作ります。
一部だけ余白を作るやり方は後でやります。
それで以下のように3つのpタグ要素について記述をしてみました。
.above {
background: skyblue;
}
.middle { background: orange; padding: 10px; margin: 10px; }
.under {
background: silver;
padding: 40px;
margin: 20px;
}
img{
border:solid 5px red;
}
一番上はmarginとpaddingを指定していません。
真ん中はpadding＝10px、 margin:＝10pxとし。
一番最後は padding:＝40px margin＝ 40pxとしました。
そしてそれぞれ別の色を付けて見ました。
すると以下のように表示されます
指定しない場合表示領域のみとなります。
padding＝10px、 margin:＝10pxとした場合はまず色のついた部分にpadding1（内側の余白）0px分だけ余白ができたことがわかります。
そして色のついた部分との間隔がそれぞれmargin（外側の余白）10px分だけ広く取られていることがわかります。
最後は40px分内側の余白も外側の余白も広く取られていることがわかります。
widthとheightの値を指定した場合
marginやpaddingを指定したあとで
追加で要素をwidthとheightの値を指定した場合。
表示領域の部分だけが指定されます。
なのでその大きさによってボックス全体の大きさが変わってきます。
ちなみに先程の３例について一番下のボックス（銀色の背景のもの）だけ幅高さの指定を追加してみます。
.under {
background: silver;
padding: 40px;
margin: 40px;
width:200px;
height:300px;
すると以下のようになります。
ボックスの形は変わりますが、marginやpaddingはしっかりと効いているのがわかります。
画像の場合
先程のHTML文書に画像を加えてみます。
<img src="インコ３().jpg" alt="ぴーちゃんは生後２ヶ月">
CSSを以下のようにして赤い枠を付けました。
img{
border:solid 5px red;
}
する７と以下のようになります。
画像には赤い枠がはめてありましてこれでmarginやpaddingの数値による変化を見ていきます。
上記CSSの画像の部分にmarginとpaddingの数値(30pxにしてみました）
を書き込みます。
img{
border:solid 5px red;
padding: 30px;
margin: 30px;
}
すると画像が以下のように表示されます。
内側の余白の大きさがpadding外側の余白がmarginで表されるんでした。
またボーダーはは表示領域と内側の余白を囲みます。。
これが写真全体の大きさになります。
だから枠で囲まれたもののうち余白がpaddingで支持された余白です。
そして外側の余白がmarginで示されます。
今度は文字を右に回り込ませてみます。
その方法はfloatやdisplayなどを使うんでした。
今回はfloatを使ってみます
CSSに以下のように記述します。
img{
border:solid 5px red;
padding: 30px;
margin: 30px;
float:left;
}
すると以下のようになって。
margin（外側の余白）が反映されていることがはっきりわかると思います。
最後に上記の表示のために記述したものをおいておきます。
HTMLは以下
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="external file.css">
<title>鳥は可愛い</title>
</head>
<body>
<h1>セキセイインコを飼いました。</h1>
<img src="インコ３().jpg" alt="ぴーちゃんは生後２ヶ月">
<p class="above">
セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。
</p>
<p class="middle">
小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語 をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる（昔話「桃太郎」など）。
</p>
<p class="under">
性別の判別は鼻の蠟（蝋）膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟（蝋）膜の色はピンクであることが多い。
</p>
</body>
</html>
CSSは以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="external file.css">
<title>鳥は可愛い</title>
</head>
<body>
<h1>セキセイインコを飼いました。</h1>
<img src="インコ３().jpg" alt="ぴーちゃんは生後２ヶ月">
<p class="above">
セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。
</p>
<p class="middle">
小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語 をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる（昔話「桃太郎」など）。
</p>
<p class="under">
性別の判別は鼻の蠟（蝋）膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟（蝋）膜の色はピンクであることが多い。
</p>
</body>
</html>
上下左右の一部だけ指定
以上で基本的なことは終わりなんですが。
上下左右のうちその一部だけ余白を作る、ということもできます。
その場合は以下のようなプロパティを使います。
上だけ指定 margin-top、padding-top
下だけ指定 margin-bottom、padding-bottom
左だけ指定 margin-left、padding-left
右だけ指定 margin-right、padding-right
記述は今までのことを基本として実際にウエブ制作の際、
柔軟に対応していけば良いと思います。
必ずこの様に記述しなくてはいけない、というものではありません。
一例だけ上げておくと。
先程の赤枠を付けた画像は全方位に余白を付けておきましたが。
今度は右側にだけ余白を付けてみます。
余白はmargin-right、padding-rightプロパティを使います。
img{
border:solid 5px red;
padding-right: 30px;
margin-right: 30px;
float:left
}
すると以下のようになりました。
ただ右に余白ができただけでなく
pタグのボックスに付いていた背景が消えているのがわかると思います。
まとめ
余白についての基本的なまとめでした。
余白を理解するには要素の内容であるボックスという概念を理解しておく必要があります。
要素は表示領域・内側の余白・外側の余白からできており。
marginとpaddingという２つのプロパティを使って様々に余白をデザインすることができます。
更に深いことについては別記事で行います。
Camera 360
この記事へのコメントはありません。