CSSで装飾を施す際になぜかうまく幅を合わせられない、余白を設定できない、といった経験はございませんか？
これにはある理由があります。
それは、HTMLのタグにはブロックレベル要素や、インライン要素といった性質があるのですが、
それを考慮に入れていないコーディングをしてしまっている可能性があるからです。
そこで今回は、HTML/CSS初学者向けにインライン要素とブロックレベル要素を分かりやすく解説していきます。
（今回のゴール）インライン要素とブロック要素を完璧に理解する！
目次
ブロックレベル要素の特徴
ブロックレベル要素とは、その名の通り、ブロック(箱や入れ物)の性質を持っています。
特徴として親要素の横幅いっぱいに広がるため、初期設定ではブロック要素を持つタグを2つ実装すると、それらは縦に並んでいきます。
ブロックレベル要素の特徴は下記の通りです。
- 縦並びである
- 幅や高さを自由に指定できる
- 余白を自由に指定できる
- 配置の指定ができない
これらの特徴があります。
インライン要素の特徴
反対にインライン要素の特徴を見ていきましょう。
インライン要素は文章の一部として扱われる要素になります。
ブロック要素が箱ならインラインはその中に入れる入れ物みたいなイメージです。
通常、ブロック要素の中に使われ、ブロックに効果をもたらすために使用されます。
例を挙げると、aタグはリンクを付けてブロックに効果を与えることができます。
そんなインライン要素の特徴は下記の通りです。
- 横並びである
- 幅や高さは指定できない
-
余白は左右のみ指定可。(推奨はされないが、paddingのみ上下も指定可)
-
配置の指定は親要素に指定することで可能
このようにほぼ真反対の性質を持っていることがわかると思います。
特にインライン要素は幅や高さや余白を自由に設定できないので、
それがwidthが効かないなどの原因があったりします。
代表的なブロックレベル要素のタグ
それでは代表的なブロックレベル要素のタグを見ていきましょう。
| タグ | 説明 |
| div |
特定の範囲をグループ化する |
| p | テキストの段落を表す |
| dl | 説明リストを表します |
| dt | 説明リストの中で用語を表す部分 |
| dd |
説明リストの中で用語の説明にあたる部分 |
| ul | 項目の順序なしリストを表す |
| ol | 項目の順序付きリストを表す |
| li | リストの項目を表す |
| article | 文書などの中で自己完結したコンテンツの項目を表す |
| aside | サイドバーなどに使われる補助的なコンテンツ |
| h1~h6 | セクションの見出し |
| section | 文書の独立した一般的なセクションを表す |
| main | 文書の主要な内容を表す |
| header | 導入的なコンテンツを表す |
代表的なインライン要素のタグ
次にインライン要素のタグの例です
| タグ | 説明 |
| a | ハイパーリンクを作成する |
| br | 文中に改行を作成する |
| iframe | 現在のHTMLページに他のページを埋め込む |
| img | 文書に画像を埋め込む |
| input | フォームを作成し、ユーザからデータを受け取る |
| label | ユーザインタフェースの項目のキャプションを表す |
| picture | レスポンシブの条件に応じた画像を表示する |
| small | 著作権表示など小さく表示される文を表示する |
| span | 記述コンテンツで汎用的に使われる行内コンテナーを表す |
| textarea | ユーザから複数行のデータを受け取る際に使われる |
| video | 文書中に動画を埋め込む |
これらがインライン要素のタグの中でもよく使うものです。
使っていくうちにどんどん覚えていくと思うので、たくさんコーディングをして慣れていきましょう。
具体的なブロック要素とインライン要素の違い
ここからは実際にコードを書いてブロック要素とインライン要素の違いを確認してみたいと思います。
縦並びと横並び
まずは縦並びと横並びです。
下のコードはブロック要素のpタグとインライン要素のaタグそれぞれを複数記述したものです。
See the Pen Untitled by kota (@kota1459) on CodePen.
ブロック要素のpタグは縦に並び、インライン要素のaタグは横に並びましたね。
こうなった原因はブロック要素のpタグはデフォルトで横幅いっぱいに幅をとるため、縦並びになるからです。
反対にインライン要素のaタグは入力した内容分にしか幅をとらず、また、なるべく1行に収めようとする性質があるため、横幅いっぱいになるまでは1行で表示されます。
高さと横幅
次は高さと横幅についてです。
下のコードはブロック要素のpタグとインライン要素のaタグそれぞれに高さと横幅を指定しています。
See the Pen Untitled by kota (@kota1459) on CodePen.
CSSを確認するとわかるように、
pタグとaタグそれぞれに同じ高さと横幅を指定していますが、pタグにしか反映されていないことがわかります。
余白の設定
続いて、余白についてです。
marginとpaddingの両方を見ていきましょう。
まずはmarginからです。上下左右にmarginを24pxとってみました。
See the Pen Untitled by kota (@kota1459) on CodePen.
これを見てみると、左右のmarginはどちらも効いていることが確認できます。
ただ上下の余白を見てみると、ブロック要素の方は余白が確認できますが、
インライン要素の方は余白がなく、くっついて表示されています。
続いてpaddingです。上下左右にpaddingを12pxとってみました。
See the Pen Untitled by kota (@kota1459) on CodePen.
paddingは要素を押し広げる効果があるので、ブロック要素もインライン要素も背景色の部分が押し広がっていることが確認できます。
大きな違いとしては、ブロック要素の方はデフォルトの上下の余白があるため、上下のブロック要素同士で要素が重なることはないですが、インライン要素の方は、paddingで押し広げた要素の部分が重なって表示されてしまっています。
自動で余白をとってくれるといったことはありません。
冒頭でも軽く触れましたが、これがインライン要素にて上下をpaddingで調整することが非推奨である理由です。
配置の設定
今度は親要素であるdivタグにtext-align: center;をブロック要素とインライン要素に充ててみた結果です。
See the Pen Untitled by kota (@kota1459) on CodePen.
text-align: centerはインラインコンテンツを真ん中に持ってくるプロパティです。
ブロック要素においてはテキストにおいてのみ反映されます。ブロック自体は真ん中に移動することはありません。
試しに1つ目のpタグと2つ目のpタグで横幅を変えてみましたが、それでも真ん中に移動することはありませんでした。
逆にインライン要素は要素全体が真ん中に寄ったことが確認できます。
ココがポイント
インライン要素を真ん中に持ってくるにはtext-alignプロパティを使用する
まとめ
ここまで読んでいただいた方ならブロック要素とインライン要素の違いが掴めたのではないでしょうか。
もう一度、両者の違いを下記にまとめておきます。
ブロック要素
- 縦並びである
- 幅や高さを自由に指定できる
- 余白を自由に指定できる
- 配置の指定ができない
インライン要素
- 横並びである
- 幅や高さは指定できない
- 余白は左右のみ指定可。(推奨はされないが、paddingのみ上下も指定可)
- 配置の指定は親要素に指定することで可能
それぞれの要素の特徴を抑えてあげればCSSの実装も楽に感じるようになるはずです。
最初は戸惑う部分ではありますが、しっかり頭に入れておきましょう。
最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画も出す予定で、そちらでは初心者向けに一からコーディングの解説を行っておりますので、
興味があればご覧いただければと思います。
【クレジット】
VOICEVOX：ずんだもん
立ち絵素材：ヒザフライ様
VOICEVOX：春日部つむぎ
立ち絵素材：ヒザフライ様
