CSS display: inline vs inline-block の違いを徹底解説
2024-04-02
CSS display: inline vs inline-block の違い
inline
- 要素をテキスト内の一部分として表示します。
- 幅と高さは設定できません。
- 上下のマージン/パディングは無視されます。
- 他の要素と隣接して配置できます。
例:
<p>
This is a text.
<span style="display: inline;">This is an inline element.</span>
This is another text.
</p>
結果:
This is a text. This is an inline element. This is another text.
inline-block
- 要素をテキスト内の一部分として表示しますが、ブロック要素のように幅と高さを設定できます。
<p>
This is a text.
<span style="display: inline-block; width: 100px; height: 50px;">This is an inline-block element.</span>
This is another text.
</p>
This is a text.
[100px x 50px のボックス]
This is another text.
| プロパティ | 説明 |
|---|---|
display: inline | テキスト内の一部分として表示。幅と高さは設定不可。上下のマージン/パディングは無視。 |
display: inline-block | テキスト内の一部分として表示。幅と高さは設定可。上下のマージン/パディングが適用。 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS display: inline vs inline-block</title>
<style>
p {
font-size: 16px;
}
.inline {
display: inline;
background-color: #f00;
padding: 5px;
}
.inline-block {
display: inline-block;
background-color: #00f;
padding: 5px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<p>
これはテキストです。
<span class="inline">これはインライン要素です。</span>
これは別のテキストです。
</p>
<p>
これはテキストです。
<span class="inline-block">これはインラインブロック要素です。</span>
これは別のテキストです。
</p>
</body>
</html>
実行結果:
- 最初の段落では、"これはインライン要素です。" という文字列は、他のテキストと隣接して表示されます。
- 2番目の段落では、"これはインラインブロック要素です。" という文字列は、100px x 50px のボックスとして表示されます。
このコードを参考に、display: inline と display: inline-block の違いを実際に確認してみてください。
CSS display: inline vs inline-block の違いを説明する他の方法
それぞれのプロパティによって要素がどのように表示されるかを図表で示すことで、視覚的に違いを理解することができます。
アニメーションを用いる
要素の表示状態をアニメーションで変化させることで、それぞれのプロパティの違いをより分かりやすく説明することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS display: inline vs inline-block</title>
<style>
p {
font-size: 16px;
}
.inline {
display: inline;
background-color: #f00;
padding: 5px;
transition: all 1s ease-in-out;
}
.inline-block {
display: inline-block;
background-color: #00f;
padding: 5px;
width: 100px;
height: 50px;
transition: all 1s ease-in-out;
}
.button {
margin: 10px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<p>
これはテキストです。
<span class="inline">これはインライン要素です。</span>
これは別のテキストです。
</p>
<p>
これはテキストです。
<span class="inline-block">これはインラインブロック要素です。</span>
これは別のテキストです。
</p>
<button onclick="toggle()">表示方法を切り替え</button>
<script>
function toggle() {
let inline = document.querySelector(".inline");
let inlineBlock = document.querySelector(".inline-block");
if (inline.style.display === "inline") {
inline.style.display = "inline-block";
inlineBlock.style.display = "inline";
} else {
inline.style.display = "inline";
inlineBlock.style.display = "inline-block";
}
}
</script>
</body>
</html>
インタラクティブなデモを作成する
ユーザーが実際にそれぞれのプロパティを試せるようなインタラクティブなデモを作成することで、より深く理解を促進することができます。
コードスニペットと説明文を組み合わせる
それぞれのプロパティのコードスニペットと、その動作を説明する文章を組み合わせることで、簡潔
css
