はじめに
HTMLとCSSを学ぶ上で避けて通れないのが、要素の「表示形式」や「レイアウトの仕組み」についての理解です。
特に、
- ブロック要素 / インライン要素 / インラインブロック要素
- CSSのグリッドレイアウト
は、Web制作やフロントエンド開発において非常に頻出します。
この記事では、それぞれの違いや使いどころを自分の備忘録も兼ねてまとめます。
HTML：表示形式の違いを理解しよう
① ブロック要素（display: block）
- 1行全体を占有する要素
- 常に改行される
- 幅・高さの指定が可能
- 他の要素とは上下に並ぶ
代表的なブロック要素
| タグ | 用途 |
|---|---|
<div> |
汎用のコンテナ |
<p> |
段落 |
<h1>〜<h6>
|
見出し |
<ul>, <ol>, <li>
|
リスト |
<form> |
入力フォームの囲い |
② インライン要素（display: inline）
- テキストと同じ行に並ぶ
- 幅や高さの指定が基本的にできない
- 主に「部分的な装飾やリンク」に使われる
代表的なインライン要素
| タグ | 用途 |
|---|---|
<span> |
汎用のインライン要素 |
<a> |
リンク |
<strong>, <em>
|
強調 |
<img> |
画像（※例外的にサイズ指定可能） |
③ インラインブロック要素（display: inline-block）
- 横に並びつつ、幅や高さも指定可能
- ボタンやカードレイアウトなどに便利
使用例：
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
<div class="box">A</div>
<div class="box">B</div>
④CSS：グリッドレイアウトの基本
1.グリッドとは？
- 縦・横の2軸（行と列）で要素を整列できるCSSレイアウト手法
- 従来の float や flex に比べて、複雑なレイアウトが簡単に組める
2.基本の書き方
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
→この場合、要素が 3列×2行 に並びます。
3.よく使うグリッドプロパティ
⑤比較まとめ: どれがどう違う？
HTML要素の表示形式まとめ
グリッドとフレックスの違い
⑥：CSSフレームワークとの関連（Tailwind CSSなど）
最近は Tailwind CSS などのユーティリティファーストなCSSが主流になっていますが、Tailwind も内部的には display: grid や display: inline-block を使っているため、 基本概念を理解しておくことがとても大切です！
⑦まとめ
- HTMLとCSSの基本に立ち返ることで、後々の Vue / React、Tailwind / Bootstrap、Laravel Blade でのビュー設計にも活きてきます！