CSS『display: block;』などで指定できるブロック要素をしっかりと理解していますか。
重要な要素ですが、その知識をあやふやなまま使用していることも少なくないと思います。今回はブロック要素の特徴を余さず、丁寧に解説していきます。
ブロック要素の対にもなるインライン要素についてはinlineとは？インライン要素の特徴を分かりやすく解説で詳しく解説していますので、参考にしてみてください。
それではブロック要素について解説していきます。
Contents
特徴１：ブロック要素は縦に並ぶ
まず、ブロック要素は縦一列に順番に並んでいく要素になります。
大まかに見れば、サイトは上から下にスクロールする形が一般的です。そのため、基本的にはブロック要素のままサイト制作をしていっても問題はありません。
しかし、サイトを制作していく過程で要素を横並びにしたい時があるかもしれません。その場合、ブロック要素のままで横並びにするのではなく、インライン要素やインラインブロック要素にする必要があります。
ブロック要素のまま横並びにする方法がない訳ではありませんが、インライン要素やインラインブロック要素にする方が多く利用されています。
特徴２：幅のデフォルトは親要素の100％
次のブロック要素の特徴として、デフォルトの幅が親要素の幅の100%に設定されていることが挙げられます。
つまり、親要素が100pxの場合、子要素のブロック要素は100px、親要素が200pxの場合、子要素のブロック要素は200pxになります。
そして、親要素が画面幅と同じ場合は子要素のブロック要素にテキストがほとんどなくても幅は画面幅分あることになります。
特徴３：幅(width)、高さ(height)が指定できる
次のブロック要素の特徴として、CSSを使用することによって、指定したブロック要素の幅(width)と高さ(height)が指定できます。
インライン要素ではCSSで幅(width)と高さ(height)に関する記述をしたとしても反映されることはありません。
それに比べ、ブロック要素では、CSSで幅(width)と高さ(height)を指定すれば、任意の大きさに幅(width)と高さ(height)を指定することが出来ます。
特徴４：余白(padding、margin)の指定ができる
前述したCSSでの幅(width)と高さ(height)を指定できるのに加え、ブロック要素では余白(padding、margin)の指定することも出来ます。
余白(padding、margin)を指定することで、要素間に空白を作ることが出来、配置を任意のものに変えることが出来ます。
ブロック要素を使用することで、自由な要素の大きさで、自由な配置をすることが可能になり、サイトの利便性も向上します。
特徴５：『display: block;』でブロック要素に変更できる
例えば、ブロック要素としての特徴を利用したいが、使用しているタグがインライン要素の場合、CSSで『display: block;』を指定することで、インライン要素をブロック要素に変更することが出来ます。
元々、タグがブロック要素の場合は『display: block;』を使用することはありませんが、デフォルトでインライン要素のタグには『display: block;』が有効になってきます。
『display: block;』でブロック要素にしたタグは前述した特徴が適応されることになるため、例えば、自由な幅(width)や高さ(height)を指定することも出来るようになります。
・主なブロック要素のタグ一覧
<header>～</header><main>～</main><footer>～</footer><div>～</div><h1>～</h1><p>～</p><ol>～</ol>今回はブロック要素の特徴について、詳しく解説していきました。ブロック要素は汎用性も高く、ほとんど全てのサイトで使用されますが、その特徴が分からなくなったらこの記事を見返して、ブロック要素の特徴を理解してみて下さい。
