はじめに

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 でのビュー設計にも活きてきます！