ブロックレベル要素とインライン要素
ブロックレベル要素
- 1つのまとまった単位となっているひとかたまり（見出しや段落）
- 常に改行されて縦につまさる
- 親要素の幅を直接引き継ぐ（デフォルトで横幅100%）
- 子には、インライン要素もブロック要素も入れることができる
- 注意点として、
pタグの中に他のブロック要素は入れない - ブロック要素の例
section-
h1〜h6 -
hgroup: 見出しのグループ化 p-
blockquote: 引用文 -
pre: 整形済みテキスト -
div: 汎用ブロックレベル要素
インライン要素
- ブロックレベルの中に入っているテキストの一部分
- 改行されず横に並ぶ
- 幅・高さの指定は基本的にできない
- 親要素の幅を直接引き継ぐのではなく、コンテンツ（この場合は画像自体）のサイズによって幅が決まる
- ブロック要素は子には入れられない
- インライン要素の例
imgbr-
em: 強調 strong-
q: 引用文として「」になる -
span: 汎用インラインレベル要素
- インライン要素の中でも画像や動画、埋め込みコンテンツなどは置換要素と呼ばれる！
インライン要素の置換要素について
- HTMLファイルの中に表示したい「中身」を直接書きません。
- 代わりに、「中身がどこにあるか」という情報（パスやURL）だけを属性で指定します。
- ブラウザは、その情報を元に外部のファイル（画像ファイル、動画ファイルなど）を読み込み、HTMLのその場所に「代わりに」表示します。
置換要素はwidthやheightを設定できる
- インライン要素は通常、
widthやheightは設定できない。 - しかし置換要素は外部から読み込まれるコンテンツの固有サイズがあるので、設定することができる！
ブロック要素・インライン要素比較表
| 比較項目 | ブロック要素 | インライン要素 |
|---|---|---|
| 表示形式 | 常に改行されて表示される | 改行されず横に並ぶ |
| 幅の扱い | デフォルトで横幅100% | 中身の幅にフィット |
| 高さの扱い | 内容に応じて広がる／height指定OK |
内容に応じて広がる／heightは効かない |
| 幅・高さの指定 |
width / height 指定できる
|
基本的に指定できない（一部可能） |
| 子要素に入れられるもの | ブロック要素・インライン要素どちらもOK | 原則としてインライン要素のみ（HTML5では多少緩和） |
| margin / padding の効き方 | 上下左右すべて効く | 上下には効かないことが多い（ブラウザによる） |
| displayでの切り替え |
display: inline; にすればインライン化できる |
display: block; にすればブロック化できる |
| 注意点 |
<p>の中にブロック要素を入れるのはNG（HTML仕様違反） |
<span>で囲んだ中に<div>など入れるのは非推奨 |
ボックス
HTMLのそれぞれの要素には、ボックスと呼ばれる四角い表示領域が用意されます。
※ボックスの初期状態は、要素の種類やブラウザの種類によって異なります。
→初期状態の違いをなくす目的で用意するCSSをリセットCSSといいます。
ブロックレベル要素のボックス
┌───────────────────────────────┐
│ 外側の余白（Margin）
│ ┌───────────────────────┐ │
│ │ 境界線（Border）
│ │ ┌───────────────────┐ │
│ │ │ 内側の余白（Padding） ← 背景色が適用される範囲
│ │ │ ┌─────────────────┐ │
│ │ │ │ 表示領域（Content） │
│ │ │ └─────────────────┘ │
│ │ └───────────────────┘ │
│ └───────────────────────┘ │
└───────────────────────────────┘
-
margin：他の要素との外側のすき間 -
border：枠線（太さ・色など指定できる） -
padding：内側の余白（この中に背景色が塗られる） -
content：実際にテキストや画像が表示される領域
インラインレベル要素のボックス
┌──────────────┐
│ Padding │
│ ┌──────────┐ │
│ │ Content │ │
│ └──────────┘ │
└──────────────┘
- 上下
marginは基本的に無視されます。 -
paddingは効くけど、縦方向の見た目には影響が出にくいこともあります。
margin・paddingの設定
1つの値を設定
/* 上下左右に同じ余白を設定 */
margin（padding）: 20px; /* 上下左右20px */
2つの値を設定
/* 上下と左右に異なる余白を設定 */
margin（padding）: 20px 10px; /* 上下20px、左右10px */
3つの値を設定
/* 上、左右、下に異なる余白を設定 */
margin（padding）: 20px 10px 30px; /* 上20px、左右10px、下30px */
4つの値を設定
/* 上、右、下、左に異なる余白を設定 */
margin（padding）: 20px 10px 30px 40px; /* 上20px、右10px、下30px、左40px */
marginの相殺
ブロック要素の場合、
上下のmarginが隣接している場合、重なり合う（左右は重なり合わない）
- 10pxと10pxが重なり合っていると、計10px
- 10pxと20pxが重なり合っていると、計20px
となるよ！
相殺される条件
- 上下に並ぶブロック要素
- 間に
borderやpadingがない - 浮いてない（
floatやposition: absoluteじゃない）
一方でインライン要素の場合、
横のmargin/paddingはまあまあ効くが、縦（上下）は非推奨かつ非安定。
そのため、インライン要素の上下スペースを調整したいときは、line-heightやdisplay: inline-block;を使おう！
要素を表示する領域（Content）について
Contentに関わるプロパティ
1. width（幅）
: 要素の横幅を決めるプロパティ
2. height（高さ）
: 要素の高さを決めるプロパティ
3. min-width / min-height（最小幅・最小高）
: 要素の幅や高さの「最低ライン」を決める。それより小さくならないようにする制限。
4. max-width / max-height（最大幅・最大高）
:要素の幅や高さの「上限」を決める。それより大きくならないようにする制限。
%で高さを指定する場合の注意
親要素に高さを指定しないと正しく指定されません。
❎NG:
/*divのみに設定する*/
div {
height: 100%;
background-color: pink;
}
✅OK:
/*divとbodyに設定する*/
/*bodyの親要素はhtmlなので、ここもきちんと設定する*/
html,
body {
height: 100%;
}
div {
height: 100%;
background-color: pink;
}
border関連
1.border-radius
borderの角を丸くする💪🏻
2.box-shadow
要素に 影（シャドウ） をつけるCSSプロパティ
→border（枠）の外側につくように見える！
※けれど厳密には、要素のボックス全体（Content、Padding、Borderを全て含む）の外側に影を生成する
構文：
box-shadow: 水平方向 垂直方向 ぼかし距離 拡がり距離 色;
使用例：
box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.3);
3.box-sizing
ボックスのContentのみに設定されるwidthとheightを、
paddingとborderまで広げて適用することができます。
content-box
width/heightは コンテンツ部分のサイズだけを指定。
border-box
width/heightにpaddingとborderも含めて指定。
🔰サンプル
<div id="d1">
box-sizing: content-box
</div>
<div id="d2">
box-sizing: border-box
</div>
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin-bottom: 20px;
}
#d1 {
box-sizing: content-box;
background-color: lightblue;
}
/*全部で幅200px → 中身が調整されて小さく見える*/
#d2 {
box-sizing: border-box;
background-color: lightgreen;
}
displayで
ブロック要素・インライン要素を自由に扱う
- ブロックレベル要素はそのままだと縦に並びますが、
displayプロパティは、ボックスの表示形式を根本的に変更したいとき使用します。 - 使用することでインライン要素をブロック要素のように表示させたり、逆も可能となります。
注意点
-
transitionやanimationに設定することはできない
指定できる値
-
inline: インライン要素と同様の表示にする -
block: ブロックレベルと同様の表示にする -
inline-block:
それぞれが「横に並ぶボックス（＝インラインのように並び、でも中ではブロックのようにふるまう）」になる -
none: ボックスを消す
display の種類 |
幅・高さの指定 |
padding/margin の上下 |
改行される？ | 表示される？ |
|---|---|---|---|---|
inline |
❌（無効） | ❌（効きづらい） | ❌（横に並ぶ） | ✅ |
block |
✅ | ✅ | ✅（改行） | ✅ |
inline-block |
✅ | ✅ | ❌（横に並ぶ） | ✅ |
none |
❌（表示されない） | ❌（無効） | ❌ | ❌（非表示） |
表示確認
div→ブロック要素、span→インライン要素
上記は、同じCSS指定でも、表示が異なります。
サンプルコード
/*html*/
<span class="sam1"
>サンプル１<br />span要素</span
>
<div class="sam1">
サンプル１<br />div要素
</div>
<br />
<br />
<span class="sam2"
>サンプル2<br />span要素</span
>
<div class="sam2">
サンプル2<br />div要素
</div>
<br />
<span class="sam3"
>サンプル3<br />span要素</span
>
<div class="sam3">
サンプル3<br />div要素
</div>
<br />
<span class="sam4"
>サンプル4<br />span要素</span
>
<div class="sam4">
サンプル4<br />div要素
</div>
/*style*/
span,
div {
color: #fff;
}
span {
background: #f6d;
}
div {
background: #69e;
}
それぞれ何が違うのか、細かく見ていきましょう！
1.inlineで、ブロック→インラインへ変更
.sam1 {
display: inline;
}
- サンプル1：ブロック要素（
div）にinlineを設定- 横並びになった！
- 幅も要素と同じになった！
- サンプル2：ブロック要素もインライン要素もそのまま
2.blockで、インライン→ブロックへ変更
.sam2 {
display: block;
}
- サンプル2：インライン要素（
span）が、ブロック要素と同じ表示になった！
3.noneで、ボックスを削除
.sam3 {
display: none;
}
- ブロック要素もインライン要素も、丸ごと消えた！
4.inline-blockで横に並ぶボックスを設定
インラインのように並び・でも中ではブロックのようにふるまうよ
step1:上下左右にpaddingを設定
.sam4 {
padding: 10px;
}
→インライン要素（span）はpadding/marginが上下に効かないので、
おかしな表示になってしまう
step2:上下左右にpadding・inline-blockを設定
.sam4 {
display: inline-block;
padding: 10px;
}
- ブロック要素（
div）- 本来は縦に積まれる要素が、改行されずインライン要素のように横並びになる
- でも、幅・高さ・paddingなどの指定はそのまま有効
- インライン要素（
span）- 横並びは維持したまま、幅・高さ・内側余白（
padding）などを自由に指定できるボックスになる - インライン的に横に並ぶのはそのままです。
- 横並びは維持したまま、幅・高さ・内側余白（