CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのインラインレベル要素とインラインボックスの違いをわかりやすく解説

インラインレベル要素とは？

インラインレベル要素とは、CSSのdisplayプロパティが「inline」「inline-table」「inline-block」のいずれかに設定されている要素のことです。この種の要素は、自身の前後で強制的な改行を行いません。また、各インラインレベル要素は、配置スキームの一部として振る舞うと同時に、子ボックスを内包する「インラインレベルボックス」を生成します。

インラインボックスとは？

インラインボックスとは、その内容がインライン整形コンテキスト（inline formatting context）に従って表示されるボックスのことです。インラインボックスは、行の折り返しのタイミングなどで複数のインラインボックスに分割されることがあります。その一方で、決して分割されないインラインボックスは「アトミックインラインレベルボックス（atomic inline-level box）」と呼ばれます。<img>や<input>といった置換要素やインラインブロック要素がその代表例です。

匿名インラインボックスとは？

匿名インラインボックスとは、開発者がHTMLやCSSから直接コントロールできないボックスのことです。たとえば、ブロックボックスの中にマークアップされていない素のテキストと、他のインラインレベルボックスが混在している状況を考えてみましょう。このとき、インラインレベルボックスの前後に位置する素のテキストは、インライン整形コンテキストに従うものとみなされ、自動的に匿名インラインボックスで囲まれます。

サンプルコード

続いて、インラインレベル要素とインラインボックスの挙動を確認できるサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS インラインレベル要素とインラインボックス</title>
<style>
form {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
}
input[type="button"] {
    border-radius: 10px;
}
.child {
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1) {
    background-color: #FF8A00;
}
.child:nth-of-type(2) {
    background-color: #F44336;
}
.child:nth-of-type(3) {
    background-color: #C303C3;
}
.child:nth-of-type(4) {
    background-color: #4CAF50;
}
.child:nth-of-type(5) {
    background-color: #03A9F4;
}
.child:nth-of-type(6) {
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS インラインレベル要素とインラインボックス</legend>
<div>
<span class="child">Orange</span> Color
<span class="child">Red</span> Color
<span class="child">Violet</span> Color
</div>
</fieldset>
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のようになります。色のついた<span>要素（インラインレベル要素）が、前後に改行を挟むことなく、テキストと同じ行の中に自然に並んでいる様子が確認できます。

CSSのインラインレベル要素とインラインボックスの違いをわかりやすく解説

まとめ

  • インラインレベル要素は、前後に強制的な改行を発生させない要素である
  • インラインボックスはインライン整形コンテキストに従い、必要に応じて複数のボックスに分割される
  • 一度も分割されないインラインボックスは「アトミックインラインレベルボックス」と呼ばれる
  • 開発者が制御できない素のテキストは、自動的に「匿名インラインボックス」に包まれる
  1. CSSアニメーションで隠れた要素を滑らかに表示する方法

    CSSアニメーションを活用すると、画面上に隠れている要素を滑らかに表示させることができます。マウスホバーなどのユーザー操作をトリガーにして、@keyframesによるアニメーションやopacityのトランジションを組み合わせれば、動きのある魅力的なインターフェースを手軽に実装できます。以下の例では、要素にカーソルを合わせると、非表示になっていた要素がアニメーションとともに現れるデモを紹介します。サンプルコード<!DOCTYPE html> <html> <style> .item {    position: relative; &nbs

  2. HTMLのブロック要素とインライン要素の違いをわかりやすく解説

    はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar