CSSのブロックレベル要素とブロックボックスの仕組みを徹底解説
CSSにおいて、displayプロパティが「block」「list-item」「table」のいずれかに設定されている要素をブロックレベル要素と呼びます。これらの要素は、自身の前後に強制的な改行を挿入するため、常に新しい行から始まり、親要素の利用可能な幅全体を占有するのが特徴です。
各ブロックレベル要素は「ブロックレベルボックス」を生成します。このボックスはページの配置スキーム（positioning scheme）の一部として機能し、子ボックスを内包することができます。
ブロックコンテナボックスとブロックボックスの違い
ブロックコンテナボックスには、主に次の2種類があります。
- ブロックレベルボックスのみを含み、ブロック整形文脈（Block Formatting Context）に従うもの
- インラインレベルボックスのみを含み、インライン整形文脈（Inline Formatting Context）に従うもの
そして、ブロックレベルボックスが同時にブロックコンテナの役割も果たしている場合、そのボックスはブロックボックスと呼ばれます。つまり「ブロックボックス」とは、中身を包む容器としても機能するブロックレベルボックスのことです。
匿名ブロックボックスとは
匿名ブロックボックスとは、開発者が直接制御できないボックスのことです。たとえば、インラインボックスの中にブロックボックスが含まれる場合、そのブロックボックスを取り囲むインラインコンテンツは、自動的に匿名ブロックボックスで囲まれます。匿名ボックスには名前がないため、CSSセレクタで対象を指定できず、個別にスタイルを適用することはできません。
サンプルコード
それでは、ブロックレベル要素とブロックボックスの動作を確認できる具体的なコード例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>CSS ブロックレベル要素とブロックボックス</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
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 id="container">オレンジ色
<div class="child"></div>赤色
<div class="child"></div>紫色
<div class="child"></div>
</div><br>
</body>
</html>
実行結果
上記のコードをブラウザで実行すると、次のような表示結果が得られます。各ブロックレベル要素が前後のテキストを押し分けて独立した行を形成し、幅いっぱいに広がっている様子を確認できます。
-
CSSアニメーションで隠れた要素を滑らかに表示する方法
CSSアニメーションを活用すると、画面上に隠れている要素を滑らかに表示させることができます。マウスホバーなどのユーザー操作をトリガーにして、@keyframesによるアニメーションやopacityのトランジションを組み合わせれば、動きのある魅力的なインターフェースを手軽に実装できます。以下の例では、要素にカーソルを合わせると、非表示になっていた要素がアニメーションとともに現れるデモを紹介します。サンプルコード<!DOCTYPE html> <html> <style> .item { position: relative; &nbs
-
HTMLのブロック要素とインライン要素の違いをわかりやすく解説
はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar