HTMLの要素には表示形式に種類があります。中でもよく使われるのは以下の3つです。
- ブロックレベル要素
- インライン要素
- インラインブロック要素
上記3要素の使い分け方を知らないと、「要素の高さを調節できない」「右揃えや中央揃えができない」など初歩的な部分でつまづいてしまいます。
3つの表示形式の使い分け方を理解して、Webサイトを構成する要素を正しく扱えるようにしましょう。
- displayプロパティの使い方
- inline・block・inline-blockの特徴
- inline・block・inline-blockの使い分け方
無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！
- 正しいコードの書き方が身につく
- 50本以上の動画教材でサイト制作を学べる
- 30日間に4回の学習サポート面談がある
- わからないことはSlackでエンジニアに質問し放題
目次
HTMLの要素
HTMLの要素とは、タグの初めから終わりまでの部分です。例えば、以下のようなコードがあったとします。
<p>テキスト</p><p>タグで「テキスト」という文字列を囲んでいます。この一文がそのまま要素となります。
displayで要素の表示形式を変更する
要素の表示形式を変更したい場合は、CSSのdisplayプロパティを使用します。以下が記述例です。
div {
display: block;
}値がblockならブロックレベル要素、inlineならインライン要素、inline-blockならインラインブロック要素となります。
例えば<div>タグはブロックレベル要素ですが、display: inline;と指定すればインライン要素に変更できます。
displayの初期値
HTMLの要素には、displayの初期値が設定されています。<div>タグや<p>タグはブロックレベル要素、<a>タグや<span>タグはインライン要素となります。
displayの初期値にinline-blockはありません。インラインブロック要素に変更したい場合はCSSで指定します。
block、inline、inline-blockの特徴
blockの特徴
ブロックレベル要素とは、情報のかたまりのことです。<div>タグや<section>タグなど、コンテンツをまとめるための要素がブロックレベル要素です。
ブロックレベル要素の特徴は以下の通りです。
- 縦に要素が並ぶ
- 幅と高さを指定できる
- 余白を自由に調整できる
- 要素の配置を指定できない
inlineの特徴
インライン要素はブロックレベル要素の内容として用いられる要素です。インライン要素は文章の一部として扱われます。
インライン要素の特徴は以下の通りです。
- 横に要素が並ぶ
- 幅と高さは指定できない
- 上下の余白が調整できない（上下のpaddingは指定できるが非推奨）
- 要素の配置を指定できる
インライン要素を使用する際は基本的にブロックレベル要素の中で使用します。
inline-blockの特徴
インラインブロック要素は、ブロックレベル要素とインライン要素の中間の要素です。display: inline-block;と指定することでインラインブロック要素として扱うことができます。
インラインブロック要素の特徴は以下の通りです。
- 横に要素が並ぶ
- 幅と高さが指定できる
- 余白を自由に調整できる
- 要素の配置を指定できる
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で使用します。
無料でエンジニアへ質問できる環境を「あなたのお部屋」に
ブロック要素に、インライン要素に、インラインブロック要素。
難しい概念の連続で頭の中がパンクしそうになりますよね。
そのまま独学を進めていくと、つまづく回数も増え
挫折の原因になるかもしれません。
一方で疑問をエンジニアに質問できれば、学習はスムーズに進みます。
30日間無料の学習サービス「ZeroPlus Gate」ならば、
現役エンジニアへとSlackを使って無制限で質問できるため、
あなたを悩ませる疑問を全て解消して、ストレスなく学習を進められます。
ZeroPlus Gateの詳細は、以下のリンクより専用ページをご覧ください
block、inline、inline-blockの違い
3つの要素の違いをまとめると画像のようになります。
サンプルコードを使用して実装時の違いを解説します。実際の表示画面で見ていきましょう。
並び方
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
ブロックレベル要素は縦並び、インライン要素とインラインブロック要素は横並びです。
小さい画面での表示だとインライン要素が改行されています。これはインライン要素が親要素の端まで達すると自動で改行される性質を持つためです。
インラインブロック要素は小さい画面幅だと縦並びのように見えるかもしれません。こちらも改行によるものです。インラインブロック要素は要素ごとに改行されるためこのような表示になります。
横幅・高さの指定
See the Pen display 幅と高さ by ZeroPlus (@zeroplus-programming) on CodePen.
widthとheightを100pxずつ指定した結果です。
ブロックレベル要素とインラインブロック要素にはwidthとheightが反映されました。一方、インライン要素にはwidthとheightが反映されていません。
余白の指定
See the Pen display 余白 by ZeroPlus (@zeroplus-programming) on CodePen.
上下左右のmarginとpaddingを20pxずつ指定した結果です。
ブロックレベル要素とインラインブロック要素には上下左右に余白がついています。
インライン要素は基本的に左右の余白のみ調整できます。上下のpaddingも指定できますが小さい画面幅のときに表示崩れが起きてしまいます。このためインライン要素に上下のpaddingを指定するのは非推奨です。
配置の指定
See the Pen display 要素の配置 by ZeroPlus (@zeroplus-programming) on CodePen.
text-align: center;を指定した結果です。
ブロックレベル要素にtext-alignやvertical-alignを指定すると、テキストのみに反映されます。要素そのものには反映されません。
インライン要素やインラインブロック要素を中央配置にする場合は、親要素にtext-alignやvertical-alignを指定します。子要素にtext-alignやvertical-alignを指定しても反映されないため要注意です。
まとめ
この記事ではブロックレベル要素とインライン要素、そしてインラインブロック要素の違いについて解説しました。
要素の使い分けはWeb制作の基本的な知識です。正しく理解すれば想定通りにCSSが実装できるようになります。最初は難しく感じるかもしれませんが、それぞれの違いを意識しながらコーディングしていきましょう。諦めずに練習することがコーディングスキルの向上につながります。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
