目次
- ボックスモデル
- Border
- Padding
- Margin
-
Displayプロパティ
- 5.1 インライン要素とブロック要素
- 5.2 inline-block
- 5.3 display: none
- 単位
ボックスモデル
ボックスモデルは、以下の4つの領域で構成されている。
- Content： 要素自体の中身
- Border： 要素の外周を囲む枠
- Padding： コンテンツとボーダーの間のスペース
- Margin： ボーダーの外側のスペース
開発者ツールでそれぞれ色分けされて表示されている。
Border
枠線
例
index.css
div {
border: 2px solid red; /* 2pxの赤いボーダー */
border-radius: 50px; /* 角を丸くする */
}
-
border-radiusを使って角を丸くすることができる
Padding
内側の隙間
例
div {
padding: 20px 30px; /* 上下に20px、左右に30px */
}
設定する時の種類
-
上下 / 左右 の設定:
padding: 10px 20px; -
上 / 左右 / 下 の設定:
padding: 10px 20px 30px; -
上 / 右 / 下 / 左 の設定:
padding: 10px 20px 30px 40px;
Margin
外側
例
div {
margin: 10px 15px; /* 上下に10px、左右に15pxのマージン */
}
- 画像のオレンジの部分が
margin - 細い黄色い部分が
border -
黄緑の部分が
padding - 水色の部分がコンテンツ
Displayプロパティ
要素がインライン要素かブロック要素かを指定する
-
ブロックレベル要素とは：
h1,divなど、幅と高さを持ち、改行される要素 -
インライン要素とは：
span,aなど、テキストのように横並びになる要素
例
h1 {
display: inline; /* h1をインライン要素に変更 */
}
span {
display: block; /* spanをブロックレベル要素に変更 */
}
↑h1がブロックレベル要素になって、spanがインライン要素に変わった！
ブロックレベル要素とインライン要素の特徴
-
ブロックレベル要素：
widthやheight、padding、marginがすべて適用される -
インライン要素：
widthやheightは適用されず、paddingやmarginは横方向にしか適用されない
でも、インライン要素にwidthやpaddingを適用させたい！
そんなときは！
inline-block
インライン要素のように横並びにしつつ、幅や高さ、マージン、パディングも適用可能にする。
span {
display: inline-block;
width: 100px;
height: 50px;
padding: 10px;
margin: 20px;
}
インライン要素のspanに、marginなどで余白ができてる！
display: none;
要素を完全に非表示にする。
div {
display: none;
}
単位
% （パーセント）
親要素に対して相対的なサイズを指定する
例：
index.html
<body>
<div>親要素はbody</div>
</body>
index.css
div {
width: 50%; /* 親要素の幅の50% */
}
divの幅は親要素（body）の幅の50%を指定する。
例外
-
line-height：
行の高さを指定するプロパティ。
このプロパティで%を使った場合、その文字の大きさに対して、動作する。
h1 {
font-size: 40px;
line-height: 200%; /* 行の高さは80px */
}
この場合、行の高さはh1のフォントサイズの2倍になる。
em
font-sizeの場合
親要素に対して相対的なサイズを指定する
例：
index.html
<div>
<p>親要素はdiv</p>
</div>
index.css
div {
font-size: 50px;
}
p {
font-size: 2em; /* 親要素のフォントサイズの2倍、つまり100px */
}
この場合、親要素のdivのフォントサイズが50pxなので、divの中にあるpは2emつまり、100pxとなる。
font-size以外の場合
その要素自身のfont-sizeを基準とする
例：
index.css
div {
font-size: 20px;
padding: 2em; /* 20pxの2倍の40pxのパディング */
}
emが便利な場面
- 親要素の
font-sizeを変更すると、emで指定した値が全て連動して変更される - これにより、全体のデザインを一括で調整できる
emの問題点
- emを使用する際に、階層構造が深くなると問題が発生することがある
- ul>li>ul>li>ul>liがあったとして、そこにul1.5emを指定すると、
ulがでるごとに1.5倍されるからどんどんデカくなっちゃう
例：
index.html
<ul>
<li>最初のリスト項目</li>
<ul>
<li>ネストされたリスト1</li>
<ul>
<li>さらにネストされたリスト2</li>
<ul>
<li>さらにさらにネストされたリスト3</li>
</ul>
</ul>
</ul>
</ul>
index.css
ul {
font-size: 1.5em; /* 1.5倍にする */
}
だんだんおっきくなっていっちゃう。
そこで！
rem
ルート要素のfont-sizeを基準とした相対単位
-
ルート要素とは：htmlタグ
-
ルート要素の
font-sizeが20pxなら1remは必ず20pxになり、2remは必ず40pxになる
例：
index.html
<html lang="ja" style="font-size: 20px;">
<body>
<h1>これは2remの見出しです</h1>
<p>これは1.5remの段落です</p>
</body>
index.css
h1 {
font-size: 2rem;
}
p {
font-size: 1.5rem;
}
-
h1：ルート要素のfont-size (20px)の2倍、つまり40px -
p：ルート要素のfont-size (20px)の1.5倍、つまり30px
em と rem の簡単な使い分け
-
em：親要素に合わせて 個別の要素のサイズを調整したいときに使う。- 例: ボタンやカード内の文字や余白を、親要素に合わせて変動させたいとき。
- 例: ボタンやカード内の文字や余白を、親要素に合わせて変動させたいとき。
-
rem：サイト全体で 統一された基準を持たせたいときに使う。- 例: ルートフォントサイズを基準に、全体の文字やレイアウトを調整しやすくする。