0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSS実践(3) 「ボックスモデル」「マージン・マージンの相殺」「ボーダー」

Last updated at Posted at 2021-08-24

##1. はじめに
本記事では、CSSの
「ボックスモデル」「マージン・マージンの相殺」「ボーダー」
について記載する。
##2. ボックスモデル
###ボックスとは?
HTMLタグでマークアップされた要素(タグ+コンテンツ)
###ボックスモデルとは?
要素を表示するためのコンテンツ領域の周辺にある、3つの領域(マージン・ボーダー・パディング)のこと。
【図解】
boxmodel.png
【ボックスモデルを調整できる主なプロパティ】
ボックスモデル.png
##3. マージン
###マージンとは?
ボックスモデルの1番外側の領域のこと。
boxmodel_margin.png
【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

styles.css
h1 {
  margin: 50px;
}

【表示例】
<before>
margin_bef.png
<after>
要素の外側の上下左右すべてに対して50pxのマージンが付与されている。
zmargin_aft.png
【デベロッパーツールでの検証】
dev_tool.png
<検証方法>

1.Chromeで⌥+⌘+Iを押下する。
2.Devツール内①のElementsタブを押下。
3.調査したい要素を押下。(今回の例だと②に該当)
4.③で表示されているように、要素周辺のマージンが上下左右50pxであることがわかる。

※マージンを上下左右別々につけることが可能。

margin-top:要素の上方向にマージンをつける。
margin-bottom:要素の下方向にマージンをつける。
margin-right:要素の右方向にマージンをつける。
margin-left:要素の左方向にマージンをつける。

また、上記を簡略化してマージンを付ける方法もある。

margin : 10px 20px 30px 40px;
margin : 10px 20px;
margin : 10px 20px 30px;

①マージンをスペース区切りで上(10px)右(20px)下(30px)左(40px)つける方法。
②マージンをスペース区切りで上下(10px)左右(20px)つける方法。
③マージンをスペース区切りで上(10px)左右(20px)下(30px)つける方法。
##4. マージンの相殺
###マージンの相殺とは?
マージンの相殺.png

・垂直マージンを指定した2つのブロックレベル要素が並んだ時に発生する。
・マージンの相殺が発生すると、2つのマージンのうち大きい方(等しい場合はいずれか)が、1つのマージンとしてみなされる。

☆注意点☆
パディングボーダーに関しては、上下左右すべて相殺されない。

##5. パディング
###パディングとは?
表示要素の内側に設ける余白部分のこと
boxmodel_padding.png

【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

styles.css
h1 {
  padding: 50px;
}

【表示例】
<before>
padding_before.png
<after>
要素の内側の上下左右すべてに対して50pxのパディングが付与されている。
padding_after.png
【デベロッパーツールでの検証】
padding_dev-tool.png
<検証方法>

1.Chromeで⌥+⌘+Iを押下する。
2.Devツール内①のElementsタブを押下。
3.調査したい要素を押下。(今回の例だと②に該当)
4.③で表示されているように、要素周辺のパディングが上下左右50pxであることがわかる。

※パディングを上下左右別々につけることが可能。

padding-top:要素の上方向にパディングをつける。
padding-bottom:要素の下方向にパディングをつける。
padding-right:要素の右方向にパディングをつける。
padding-left:要素の左方向にパディングをつける。

また、上記を簡略化してパディングを付ける方法もある。

padding : 10px 20px 30px 40px;
padding : 10px 20px;
padding : 10px 20px 30px;

①パディングをスペース区切りで上(10px)右(20px)下(30px)左(40px)つける方法。
②パディングをスペース区切りで上下(10px)左右(20px)つける方法。
③パディングをスペース区切りで上(10px)左右(20px)下(30px)つける方法。
##6. ボーダー
###ボーダーとは?
・マージン領域とパディング領域の間にあるもの。
・日本語で「罫線」を指し、borderでボックスに罫線を引くことができる。
boxmodel_border.png
【サンプル】
※わかりやすく可視化するため、ブラウザ全体にskyblue、要素にblueの背景色を付与。

styles.css
h1 {
  border: solid 10px #f3b94e;
}

・border:ボーダープロパティ
・solid:線の種類
・10px:線の太さ
※solidは実線の意味。点線にしたい場合はdottedとする。(今回は割愛)

参考(MDN border):https://developer.mozilla.org/ja/docs/Web/CSS/border

・#f3b94e:実線の色
【表示例】
<before>
border_bef.png
<after>
border_aft.png
【デベロッパーツールでの検証】
border_dev-tool.png
<検証方法>

1.Chromeで⌥+⌘+Iを押下する。
2.Devツール内①のElementsタブを押下。
3.調査したい要素を押下。(今回の例だと②に該当)
4.③で表示されているように、要素周辺に実線で10px付与されていることがわかる。

##7. おわりに
次項:CSS実践(4) 「ボックスの横幅と高さの指定」に続く。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?