divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分け

自社サイトの記事のソースを開くと、div という名前のタグが何重にも重なっていた。

これは何のために付いているのか。pタグとは何が違うのか。横に並べたいときや、真ん中に寄せたいときは、このタグにどう書けばよいのか。

制作会社に任せたままで、タグの中身を聞いたことがない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。div要素は、HTMLの仕様で「特別な意味をまったく持たない」と定義された入れ物です。仕様はこれを、ほかに合う要素が無いときの最後の手段として使うよう書いています。

横に並べる、真ん中に寄せるといった見た目は、divの仕事ではありません。CSSの仕事です。しかも、CSSを書く場所を間違えると、並びません。この記事では、実際にブラウザで測った数字で、その理由を示します。

AI検索との関係は、公式の文書に記載が見つかりませんでした。Googleの公式ページは、AI機能のために特別な最適化は要らないと書いています。divの数や深さが引用に影響するという根拠は、確かめられた範囲にはありません。

この記事の軸は、「意味を持たない箱を、いつ使い、いつ使わないか」を決める方法です。タグの名前を覚える話は最小限にして、置く前の3つの問いに落とします。

先に答え：div要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、その答えの根拠にした資料です。

疑問	答え	根拠にした資料
div要素は何を表すか	特別な意味を持たない入れ物。子要素をそのまま表す	HTMLの仕様（WHATWG）のグループ化コンテンツの章
いつ使うか	ほかに合う要素が無いときの最後の手段	同上
pタグとの違いは何か	pは段落という意味を持つ。divは意味を持たない	同上
横並びはどう書くか	並べたい箱の親にCSSの display: flex を書く	CSSの仕様（W3C）と、弊社のブラウザ実測
中央寄せはどう書くか	幅を決めて、左右の余白を auto にする	CSS 2の仕様（W3C）と、弊社のブラウザ実測
検索やAI検索に影響するか	公式に記載なし	検索セントラル、OpenAIとAnthropicの公式文書

表の中で「記載なし」と書いた行は、調べて見つからなかったという報告です。ないことの証明ではありません。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
divの意味と、なぜ必要なのかを知りたい	div要素とは何か：仕様に書かれた定義
pやspanとどう違うのか分からない	pタグとの違いとspanとの違い
divで囲んでいるが、これでよいのか不安	意味のあるタグとの使い分け
横に並ばない	横並びはCSSで決める
真ん中に寄らない	中央寄せはCSSで決める
divが何重にもなっていて怖い	divの入れ子と、増えすぎたときの困りごと
WordPressで作ったページのHTMLが気になる	WordPressのグループブロックが出すHTML
すぐ点検したい	今日できる点検

この記事で使う言葉

タグの話は、同じ言葉が場面によって違う意味で使われます。迷わないように、この記事での使い方を先に決めておきます。

言葉	この記事での意味
要素とタグ	開始タグと終了タグで囲んだ全体が要素。実務では同じ意味で使われることが多い
入れ物	中に別の要素を入れるための要素。div、section、article などが当てはまる
親と子	ある要素の直接の内側にある要素が子。外側が親
横並び	複数の箱が、同じ行の左から右へ並ぶ状態
中央寄せ	箱の左右の余白が同じになり、親の真ん中に来る状態
入れ子	あるタグの中に、別のタグを入れること

記事の中で「divタグ」と書くときは、div要素の開始タグと終了タグを含めた全体を指します。

この記事の根拠にした資料

この記事は、次の資料を2026年11月8日に実際に開いて読んでから書いています。

• HTMLの仕様（WHATWG）の最新版（グループ化コンテンツの章は2026年11月6日更新）。グループ化コンテンツ、セクション、テキストレベル、構文解析、表示の各章
• W3Cが2024年12月12日に勧告したウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.2
• W3CのCSS Flexible Box Layout Module Level 1（2025年10月14日版）と、CSS 2の視覚整形モデルの詳細の章
• Google検索セントラル「Google 公式 SEO スターター ガイド」（日本語版・2025年12月18日更新）
• Google検索セントラル「AI機能とウェブサイト」（日本語版・2025年12月31日更新）
• OpenAIとAnthropicのクローラーに関する公式文書
• WordPressのブロックエディタの公開ソースコードと、WordPress日本語公式サイトのニュース一覧ページ

書くのは、そこで確かめられた範囲だけです。確かめられなかったことは「公式に記載なし」と書きます。

ブラウザでの見え方は、2026年11月8日に、Chromium 145で実際に表示して測りました。数字はすべてその測定値です。

Q&Aサイトで見かけた、flexを使っても並ばない質問

先日、Q&Aサイトでこのような悩みを拝見しました。投稿は2024年11月ですが、いまも同じところでつまずく人は多いと思います。

投稿者は、模写コーディングを学んでいる人でした。画像とタイトルとテキストの組が3つ並ぶ部分を、自分の手で作ろうとしています。

お手本のコードでは、一覧を作るタグが使われていました。投稿者はそれとは別のやり方を探し、組のひとつひとつをdivで囲んで、display: flex を付けてみたそうです。しかし、並びませんでした。

質問は2つです。並ばない理由と、ほかの方法があるなら教えてほしい、というものでした。

回答に書かれていたこと

回答のひとつは、flex は親要素の中にある子要素の並びを変える指定だ、と説明していました。並べたい組を、もうひとつ別のdivで包み、その外側のdivに指定する形です。

別の回答は、グリッドで並べる方法を示していました。列の数と間隔を指定する書き方です。

もうひとつの回答は、少し違う角度でした。すでに article 要素でひとまとまりにしているのに、その外側をさらにdivで括る理由が分からない、という指摘です。

回答のどこまでが確かめられるか

最初の回答の「flex は親に書く」という説明は、CSSの仕様で確かめられます。この記事の次の節以降で、仕様と実測の両方を示します。

article の外側にdivを重ねる理由が分からない、という指摘は、HTMLの仕様の考え方に沿っています。意味のある要素がすでにあるなら、divを足す理由は小さくなります。

一方で、投稿者のコードの全体は私は見ていません。そのため、なぜ並ばなかったのかを断定はできません。ただし、divの子に display: flex を書いた場合に何が起きるかは、実測で再現できました。

質問から読み取れる3つの疑問

この質問の中には、3つの疑問が混ざっています。

1つ目は、flex をどこに書けば並ぶのか。2つ目は、divで囲むのは正しいのか。3つ目は、ほかの方法はあるのか。

次の節から、この3つに順に答えます。

先に短く答える

並べたい箱の親に display: flex を書きます。箱の側に書いても、並びは変わりません。

divで囲むかどうかは、その箱に合う意味のある要素があるかで決まります。ほかの方法には、グリッドや、行の中に収める書き方があります。実測の表は、横並びの節にまとめます。

div要素とは何か：仕様に書かれた定義

HTMLの仕様（WHATWG）によると、グループ化コンテンツの章で、div要素は次のように定義されています。

「div要素は、特別な意味をまったく持たない。子要素をそのまま表す。」（英語の原文を和訳）

意味は、divで囲んだ中身に、新しい役割は何も加わらない、ということです。囲んでも、見出しにも段落にもなりません。

仕様が付け足している使い方

仕様は続けて、divは class、lang、title といった属性と組み合わせて使えると書いています。連続した要素のまとまりに、共通の意味を付けるためです。

dl要素の中で、dtとddの組をまとめる特例も書かれています。これは後ほど、内容モデルの節で触れます。

最後の手段と書かれている理由

仕様は、使い方の注意を強い言葉で書いています。

「作成者は、div要素を、ほかに適した要素が無いときの最後の手段として捉えることが強く推奨される。」（英語の原文を和訳）

理由も同じ箇所に書かれています。divの代わりに適切な要素を使うと、読む人にとって使いやすくなり、作る側にとっても保守しやすくなる、というものです。

つまり、divは使ってはいけない要素ではありません。ほかに合う要素を先に探す、という順番の話です。

仕様が挙げた使いどころ

仕様は、divが役に立つ場面を2つ挙げています。

1つ目は、見た目を整える目的です。2つ目は、複数の段落をまとめて、同じ注釈を付けたいときです。

仕様の例では、2つの段落をまとめてdivで囲み、言語の指定を1回で済ませています。段落ごとに書くより、まとめて書くほうが楽だからです。

内容モデルと、特例

内容モデルとは、その要素の中に何を入れてよいかの決まりです。仕様の表示を、確かめた範囲で表にします。

項目	仕様の記述
属する分類	フロー・コンテンツ、パルパブル・コンテンツ
使える場所	フロー・コンテンツが期待される場所。dl要素の子としても使える
中に入れてよいもの	基本はフロー・コンテンツ。dlの子のときだけ、dtとddの組
開始タグと終了タグ	どちらも省略できない

フロー・コンテンツは、段落、見出し、リスト、表など、ページの本文を作る要素の大きな分類です。

終了タグを省略できない点は、pと違います。pは、次にdivなどが来れば終了タグを省けると仕様に書かれています。divは、閉じ忘れると、後ろの内容が中に入った形で読み取られます。

標準の見た目

HTMLの仕様の表示の章には、ブラウザの標準の見た目が書かれています。そこでは、div要素は display: block と指定されています。

ブロックとは、前後で行が変わり、親の幅いっぱいに広がる箱のことです。この記事の実測でも、何も指定しないdivは、親の幅の600pxいっぱいに広がりました。

pタグとの違いとspanとの違い

pとdivは、見た目が似ているので混同されます。違いは、意味の有無と、中に入れてよいものです。

pとの違い

p要素は「段落」を表します。divは何も表しません。これが、第1の違いです。

第2の違いは、内容モデルです。pの中に入れてよいのは、フレージング・コンテンツ、つまり文字の流れの中に収まる要素です。divはフロー・コンテンツなので、pの中には入れられません。

詳しい仕組みは、前日に公開した記事「pタグとは brタグやdivタグとの違いと段落の区切り方の決め方」に書きました。

pの中にdivを書いたら、実際にどうなるか

HTMLの仕様の構文解析の章によれば、pが開いている途中でdivの開始タグが来たら、先にpを閉じる、と定められています。

これを、実際のブラウザで確かめました。次のように書いた場合です。

<p>前の文<div>箱</div>後の文</p>

ブラウザが読み取った形は、次のようになりました。

<p>前の文</p><div>箱</div>後の文<p></p>

書いた形と、読み取られた形が違います。「後の文」は、pの外に出ました。さらに、余った終了タグが、中身のない空のpを作りました。

spanとの違い

span要素も、仕様では「それ自体は何も意味しない」要素です。class、lang、dir といった属性と組み合わせて使うと書かれています。

divとの違いは、置く場所と中に入れてよいものです。spanは、文字の流れの中の一部を囲む要素で、中にはフレージング・コンテンツだけを入れます。divは、ひとまとまりの箱を作る要素です。

実測でも、spanを2つ並べると、同じ行に左から並びました。divは、1つずつ行を変えました。

spanタグそのものの使い方は、別の記事で扱う予定です。この記事では、違いの要点だけにとどめます。

3つを比べた表

要素	意味	分類	中に入れてよいもの
p	段落	フロー・コンテンツ	フレージング・コンテンツ
div	なし	フロー・コンテンツ	フロー・コンテンツ
span	なし	フレージング・コンテンツ	フレージング・コンテンツ

フレージング・コンテンツは、文字と、その流れの中の要素です。フロー・コンテンツは、それを含む、より広い分類です。

表の見方は簡単です。中に段落や見出しを入れたいなら、spanは使えません。文章の一部だけを囲みたいなら、divは大きすぎます。

意味のあるタグとの使い分け

divを書く前に、先に確かめることがあります。囲もうとしている部分に、名前の付いた要素が無いかどうかです。

仕様が挙げた例

仕様のdiv要素の説明には、名前の付いた要素を使う例が書かれています。

ブログの記事ならarticle、章ならsection、ページの案内ならnav、フォームの部品のまとまりならfieldsetを使う、というものです。

divで書いても、見た目は同じにできます。ただし、仕様は、適切な要素を使うほうが読む人にとっての使いやすさ（アクセシビリティ）が上がる、と書いています。

sectionは、汎用の入れ物ではない

sectionは、名前が「区画」なので、divの代わりに使われがちです。仕様は、これを戒めています。

「section要素は、汎用の入れ物ではない。スタイル付けのためだけ、またはスクリプトの便宜のためだけに要素が必要なら、作成者はdiv要素を使うことが推奨される。」（英語の原文を和訳）

さらに、sectionが適切なのは、その内容が文書の見出し構造に載るときだけ、という目安も書かれています。

見た目を整えるだけなら、divを使う。これが仕様の立場です。

主な要素の役割を表にする

仕様のセクションの章とグループ化コンテンツの章から、各要素の役割を確かめた範囲で表にします。

要素	仕様に書かれた役割
article	単独で完結する、独立して配布できる内容。ブログ記事、投稿されたコメントなど
section	見出しを持つ、主題ごとのまとまり。章などが例
nav	他のページや、同じページの別の場所へのリンクのまとまり。主要な案内
aside	周囲の内容と関わりが薄く、切り離して考えられる内容。サイドバーなど
header	導入や案内のまとまり。見出しやロゴを含められる
footer	直近の区画（なければ文書全体）の末尾。書き手の情報、関連資料、著作権など
main	その文書の中心となる内容。表示されている状態のものは、文書に1つまで

表の「表示されている状態のもの」とは、hidden属性が付いていないmainのことです。

mainは、divの中に置いてよい

mainについて、仕様はもうひとつ決まりを書いています。mainの外側に置けるのは、html、body、div、名前のないform、独自の要素だけ、というものです。

つまり、全体をdivで包んだ中にmainを置く書き方は、仕様に合っています。「mainを使うなら、divは使えない」という決まりはありません。

迷ったときの目安

囲みたい部分	先に考える要素	無ければ
単独で読めるブログ記事	article	div
見出しの付く区画	section	div
ページの主要なリンク集	nav	div
本文の主役の部分	main	div
見た目を揃えるだけの箱	なし	div

最後の行が、divの出番です。ほかの行も、名前のある要素が合わなければ、divで構いません。

横並びはCSSで決める：flexを書く場所

横に並べるかどうかは、HTMLのタグでは決まりません。CSSで決めます。

そして、CSSを書く場所が、結果を分けます。先に実測の結果を示します。

何も書かないdivは、縦に積まれる

幅600pxの親の中に、高さ40pxのdivを3つ入れて、何も指定せずに表示しました。

3つの箱は、左端の位置が0px、上端の位置が0px、40px、80pxでした。幅はどれも600pxです。親の幅いっぱいに広がって、1つずつ行を変えています。

これが、仕様の表示の章に書かれた display: block の結果です。

この測定は、ページの先頭に DOCTYPE を書いた状態で行いました。DOCTYPE が無いと、ブラウザは古い描き方（互換モード）に切り替わり、同じCSSでも見た目が変わることがあります。同日公開の記事「doctype htmlとは 読み方と書き方 無いと互換モードになる理由」に書きました。

箱に display: flex を書いても、変わらない

Q&Aサイトの投稿者が試した形を再現しました。3つのdivそれぞれに、display: flex を書いた場合です。

結果は、何も書かないときと同じでした。上端の位置が0px、40px、80pxで、幅は600px。縦に積まれたままです。

理由は、flex が「その要素の子」の並び方を決める指定だからです。箱に書いたflexは、箱の中身には効きますが、箱どうしの並びには効きません。

親に display: flex を書くと、横に並ぶ

次に、3つの箱の親に display: flex を書きました。

W3Cが2025年10月14日版として公表したCSS Flexible Box Layout Module Level 1によると、flexの箱の仕組みは次のとおりです。

「flexコンテナは、表示の計算値がflexまたはinline-flexの要素が作る箱である。通常のフローの中にあるflexコンテナの子は、flexアイテムと呼ばれ、flexの配置モデルで並べられる。」（英語の原文を和訳）

つまり、並べられるのは、flexを書いた要素の子です。親に書いて、初めて子が並びます。

子の幅を決めないと、文字の幅に縮む

親にflexを書いただけの測定では、3つの箱は左端が0px、8px、16pxの位置に並びました。幅は、どれも8pxです。

箱の中身が数字1文字なので、箱は文字の幅に縮みました。横には並んでいますが、見た目は崩れます。

箱の幅は、子の側で決めます。次の短い例が、よく使う形です。

短い例：3つを等分に並べる

<div class="row">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>
/* CSS */
.row { display: flex; gap: 10px; }
.card { flex: 1; }

意味は、親の row に flex を書き、箱どうしの間隔を10pxにし、子の card には「余った幅を等分する」指定を書く、というものです。値は一例です。

この形で測ると、3つの箱は左端が0px、203.3px、406.7pxの位置になり、幅はどれも193.3pxでした。600pxから間隔20pxを引いた幅を、3等分した結果です。

ほかの横並びの書き方も測った

flex 以外にも、横に並べる書き方があります。同じ条件で測りました。

書き方	3つ（または2つ）の位置	結果
親に flex（幅の指定なし）	左端0px、8px、16px	横に並ぶが、文字の幅に縮む
親に flex と間隔、子に flex: 1	左端0px、203.3px、406.7px	幅193.3pxで等分に並ぶ
親にグリッド（3列を等分、間隔10px）	左端0px、203.3px、406.7px	flex と同じ位置に並ぶ
子に inline-block と幅200px	左端0px、200px	横に並ぶ（2つの測定）
子に float: left と幅200px	左端0px、200px	横に並ぶ（2つの測定）

どの書き方でも、並べるにはCSSが要ります。divというタグ自体に、横に並べる力はありません。

幅が足りないときは、折り返すかどうかを決める

幅250pxの箱を3つ、幅600pxの親に入れて、親に flex と flex-wrap: wrap を書いたところ、3つ目は次の行に回りました。2つ目までは左端が0px、250pxで、3つ目は左端0px、上端40pxでした。

スマートフォンの幅では、横に3つ並べると窓に入りきらないことがあります。折り返す指定を入れておくと、はみ出しを防げます。

中央寄せはCSSで決める：幅の有無で結果が変わる

真ん中に寄せるのも、CSSの仕事です。ここでも、書いたのに寄らないという失敗が起きます。

左右の余白を auto にすると寄る仕組み

W3CのCSS 2の視覚整形モデルの章は、ブロックの箱の幅の決まり方を、次のように書いています。

「左右の余白がどちらも auto なら、その使われる値は等しくなる。これにより、要素は包含ブロックの端に対して水平方向の中央に置かれる。」（英語の原文を和訳）

この規則が使われるのは、幅が決まっている場合です。幅が auto のままだと、箱は親の幅いっぱいに広がるので、余白が入り込む隙間がありません。

幅が無いと、寄らない

実測しました。親の幅は600pxです。

左右の余白を auto にしただけで、幅を決めなかった箱は、左端0px、幅600pxのままでした。見た目は何も変わりません。

幅を決めると、寄る

同じ箱に、幅300pxを足しました。すると、左端が150pxになり、幅は300pxになりました。親の幅600pxから箱の幅300pxを引いた残りの半分が、左側に入っています。

これが、中央寄せの基本の形です。「幅を決める」と「左右の余白を auto にする」の2つがそろって、初めて寄ります。

flex で寄せる

親に display: flex と justify-content: center を書く方法もあります。

W3Cの仕様は、justify-content を、flexアイテムを主軸に沿って配置する指定と定めています。

箱の幅を300pxにして測ると、左端は150pxで、余白で寄せた場合と同じ位置になりました。

text-align: center が動かすもの

文字を真ん中にしたいときは、text-align: center を使います。ただし、これが動かすのは文字などの行の中身で、箱ではありません。

実測では、親に text-align: center を書いても、幅300pxのdivの左端は0pxのままでした。箱の中の文字だけが、箱の中央に寄りました。

箱ごと寄せたい場合は、箱を inline-block にすると、左端が150pxの位置に寄りました。ただし、この書き方は行の扱いになるので、上の余白の方法のほうが素直です。

中央寄せの測定をまとめる

書き方	箱の左端	箱の幅	結果
余白 auto のみ（幅なし）	0px	600px	寄らない
余白 auto と幅300px	150px	300px	箱が寄る
親に flex と justify-content: center、子の幅300px	150px	300px	箱が寄る
親に text-align: center、箱の幅300px	0px	300px	箱は動かず、中の文字だけ寄る
箱を inline-block にして親に text-align: center	150px	300px	箱が寄る

横に並べる場合も、中央に寄せる場合も、書き場所を決めてから書く、が基本です。

divの入れ子と、増えすぎたときの困りごと

divの中にdivを入れることは、仕様で許されています。内容モデルがフロー・コンテンツなので、divの中にdivを入れても規則には反しません。

問題になるのは、規則違反かどうかよりも、増えすぎたときの扱いにくさです。この節は、仕様に書かれていることと、弊社の整理を分けて書きます。

仕様に書かれていること

仕様に、「divを何重まで入れてよい」という上限は書かれていません。深さの決まりが無いので、深くしても検査には引っかかりません。

一方で、仕様は、適切な要素を使うほうが読む人にとっても作る側にとっても良いと書いています。この記述が、判断の土台です。

アクセシビリティの基準は、何を求めているか

W3Cが2024年12月12日に勧告したウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.2によると、達成基準1.3.1は適合レベルAに分類されています。

「見た目で伝えている情報、構造、関係は、プログラムで判断できるか、文章として用意されている。」（英語の原文を和訳）

ここで言う「プログラムで判断できる」とは、読み上げ機能のような支援技術が、役割を取り出せる状態です。

ここから先は弊社の整理

以下は弊社の整理です。公式に書かれた規則ではありません。

見た目では「ページの案内」に見えるのに、divだけで作られていると、機械には案内として伝わりません。nav を使っていれば、仕様の定義どおりに、案内と読み取れます。

逆に、見た目を整えるだけの箱なら、divで十分です。意味のない箱に、意味のある名前を付けると、かえって誤解を招きます。

divが増える典型的な原因

ページを点検して、divが多いときの原因は、いくつかに絞られます。

• 制作を何人かで引き継ぎ、見た目を直すたびに箱を足した
• 画面を組むツールやテーマが、段ごとに箱を作っている
• 見た目を揃えるためだけに、箱で何重にも包んだ

どれも、悪意があるわけではありません。直しながら足していくと、自然に増えます。

減らす手順

減らすときは、見た目を変えないことを優先します。

手順	やること	確かめること
1	変更前の画面を保存する	比べる材料があること
2	中に何も効いていない箱を探す	class も style も付いていない箱
3	意味のある要素に置き換えられる箱を探す	案内、記事、本文の主役など
4	1か所ずつ直し、画面を見比べる	見た目が変わっていないこと

一度に直さないのがコツです。崩れたときに、どの変更が原因か分からなくなるからです。

WordPressのグループブロックが出すHTML

WordPressで作ったページは、ブロックエディタで組まれていることが多いです。そこで使われるグループブロックが、実際にどんなHTMLを出すのかを確かめました。

ブロックエディタの公開ソースコード

ブロックエディタの公開ソースコードを、2026年11月8日に開いて読みました。

グループブロックの保存処理は、ごく短いものでした。属性で決まったタグの名前を使って、中身のブロックを包む要素を1つ出力するだけです。

そのタグの名前の初期値は div と定義されています。

選べるタグ

編集画面のグループブロックには、HTMLの要素を選ぶ項目があります。ソースコードには、選べる候補が次のように書かれていました。

候補	初期値かどうか
div	初期値
header	選べる
main	選べる
section	選べる
article	選べる
aside	選べる
footer	選べる

nav は、この候補に含まれていませんでした。

つまり、WordPressは、divを初期値にしつつ、意味のある要素に切り替える道も用意しています。

行・縦並び・グリッド

同じソースコードに、グループブロックの派生が定義されていました。

名前	レイアウトの指定
行（Row）	flex、折り返さない
縦並び（Stack）	flex、縦向き
グリッド（Grid）	grid

行を選ぶと、前の章で測った flex が裏で使われます。横並びのCSSを自分で書かなくても、画面の操作で作れます。

公式サイトの実物を数えた

実際のHTMLでどう出るかを、WordPress日本語公式サイトのニュース一覧ページで数えました。

class に wp-block-group を持つ要素は、合計38個でした。内訳は、div が15個、header が11個、section が10個、footer が1個、nav が1個です。

グループブロックが、divだけでなく、header や section としても出力されていることが、実物で確かめられました。

横並びのクラス

同じページに、行にあたる div が見つかりました。class に is-layout-flex を持つ要素です。

ページに埋め込まれたCSSには、次の指定がありました。

「.is-layout-flex{display: flex;}」

さらに、個別の指定として、折り返さず、左寄せで並べる内容が書かれていました。つまり、WordPressの行ブロックは、本記事で測った display: flex の書き方で動いています。

自分のページで確かめる手順

手順	やること
1	ブラウザでページを開き、右クリックから「ページのソースを表示」を選ぶ
2	wp-block-group で検索する
3	見つかった要素の頭のタグの名前を見る
4	is-layout-flex が付いていれば、横並びの箱

テーマによっては、この名前が出ないこともあります。その場合は、使っているテーマのHTMLの出し方を、制作した方に聞きます。

弊社の公開ページで数えたdiv

弊社のサイトで、divがどれくらい使われているかを数えました。

調べ方

弊社が公開している記事の最新30本を、WordPressの公開APIで取得しました。取得した日は2026年11月8日です。

記事本文のdivは、30本の本文のHTMLを数えました。ページ全体は、そのうち10本を、1本ずつ間隔を空けて取得して数えました。

記事の本文には、divが無かった

30本の本文のうち、記事末尾の案内枠より前の部分には、divが1つもありませんでした。

本文は、p、h2、h3、表、リスト、図の要素だけで組まれていました。

divの合計は90個で、30本のすべてで同じ3個です。内訳は、無料ページ作成の案内枠が1個、問い合わせの案内枠が1個、その中のボタンを並べる枠が1個です。

ボタンを並べる枠には、display: flex と間隔の指定が、そのまま書かれていました。この記事で測った書き方と同じで、親にflexを書いて、子のボタンを横に並べています。

ページ全体では、divは85個だった

弊社の実測では、ページ全体を取得した10本は、どれも同じ構造でした。divは85個で、最も深い入れ子は6段でした。

意味のある要素も使われていました。header、main、nav、article、aside、footer が各1個、section が2個です。

85個のうち、上の3個を除いたすべては、テーマが出力した部分です。

数字の読み取り方

数えたもの	結果
記事本文のdiv（30本）	0個
記事末尾の案内枠まわりのdiv（30本）	90個、1本あたり3個
ページ全体のdiv（10本）	どれも85個
最も深い入れ子（10本）	どれも6段
main、nav、article の数（10本）	どれも各1個

10本が全部同じ数字になったのは、構造がテーマで決まっているからです。この数字が示すのは、テーマ側の構造です。記事ごとの偏りは、ここからは読み取れません。

弊社の場合、記事本文の側にdivの増えすぎは見つかりませんでした。点検するなら、テーマ側の6段が、見た目に必要な深さかどうかです。

SEOとAI検索では、公式に何と書いてあるか

divの使い方が、検索順位やAI検索の引用に関係するのか。公式の文書を、2026年11月8日に開いて確かめました。

Google 公式 SEO スターター ガイド

Google検索セントラルのSEOスターターガイド（日本語版・2025年12月18日更新）には、「見出しの数や順序」という項目があります。ここに、HTMLの意味づけについての記述がありました。

「見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。ウェブは一般に正しくない HTML で書かれています。そのため、Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません。」

この文章は、見出しについての説明です。divという要素そのものには、触れていません。

読み取れるのは、Google検索が、HTMLの意味づけに頼ることはめったにない、という点です。ただし、読み上げ機能を使う人にとっては、意味のある順番が役に立つ、と同じ箇所に書かれています。

AI機能とウェブサイト

Google検索セントラルの「AI機能とウェブサイト」（日本語版・2025年12月31日更新）には、次の記述がありました。

「AI による概要と AI モードのための特別な最適化を行う必要はありませんが、次のようなこれまでの SEO の基本は引き続き重要となります。」

基本の項目には、「重要なコンテンツはテキスト形式で提示します」が含まれています。同じページは、AI機能のために新しい機械可読ファイルやマークアップを作る必要はない、とも書いています。

divの数や入れ子の深さについては、このページに記載がありませんでした。

OpenAIとAnthropicの公式文書

OpenAIのクローラーに関する文書には、OAI-SearchBot と GPTBot という2種類の仕組みを、robots.txt で別々に管理できると書かれています。

Anthropicの文書には、ClaudeBot、Claude-User といった種類ごとの役割が書かれています。

どちらの文書にも、divを含むHTMLの要素の使い方についての記述は、見つかりませんでした。

確かめられた範囲を表にする

資料	divの使い方との関係
HTMLの仕様（WHATWG）	最後の手段。適切な要素のほうが、使いやすさと保守のしやすさが上がる
WCAG 2.2	構造や関係は、プログラムで判断できる状態にする
検索セントラル（SEOスターターガイド）	HTMLの意味づけに依存することは、めったにない
検索セントラル（AI機能）	特別な最適化は不要。divの数は記載なし
OpenAIとAnthropicの文書	公式に記載なし

公式の記述を、書き方に当てはめる

ここは弊社の整理です。

公式が求めているのは、重要な内容をテキストで置くことです。その文章を何重のdivで包むかは、公式の関心の外にあります。

一方で、仕様とアクセシビリティの基準は、意味のある要素を使うほうが良いと一貫して書いています。divを減らす理由は、読む人と直す人にあります。検索やAIの引用は、その理由に入りません。

divを置く前の3つの問い

ここまでの内容を、実務で使える3つの問いにまとめます。divを書く前に、順番に確かめます。

問い1：この部分に、名前のある要素が合うか

最初に、囲もうとしている部分の役割を言葉にします。

単独で読める記事ならarticle、主要なリンク集ならnav、本文の主役ならmain。当てはまる要素があれば、divは使いません。

当てはまる名前が無いときは、問い2に進みます。

問い2：囲む目的は、見た目か、まとめて指定することか

名前が見つからない部分は、見た目を揃える、または複数の要素に同じ属性をまとめて付ける、という目的で囲みます。

仕様が使いどころとして挙げた2つが、これに当たります。この目的なら、divで構いません。

目的が「文字の一部だけを囲む」なら、spanの出番です。ここでは、行の中か、まとまりの箱か、を見分けます。

問い3：並べ方や寄せ方は、CSSを書く場所が合っているか

横に並べたい、真ん中に寄せたい、という要望があるときは、CSSを書く場所を確かめます。

横に並べたいなら、並べたい箱の親にflexを書く。中央に寄せたいなら、箱の幅を決めて、左右の余白をautoにする。実測で、この2つが確かめられました。

3つの問いの判定表

場面	問い1	問い2	問い3	結論
記事1本のまとまり	article が合う	不要	不要	article
主要なリンク集	nav が合う	不要	不要	nav
カード3枚を横に並べる	合う名前なし	見た目の目的	親にflex	親も子もdiv
文章の一部を目立たせる	合う名前なし	行の中の目的	不要	span（または意味のある要素）

複数の問いが同時に当てはまるとき

問い1と問い2が同時に当てはまることがあります。名前のある要素が合うが、見た目を整える箱も欲しい、という場合です。

このときは、名前のある要素を外側に置き、見た目のためのdivを内側に置く形にします。名前のある要素は、役割を伝えます。内側のdivは、見た目を担当します。

質問者の場合に当てはめる

Q&Aサイトの投稿者の例に、3つの問いを当てはめます。

投稿者の例では、画像とタイトルとテキストの組が、すでにarticleで包まれていたようです。その外側にdivを重ねるのは、見た目を整える目的があるときだけです。目的が無ければ、省けます。

並べるための指定は、組を並べる親に書きます。組の側にflexを書いても、並びは変わりません。

チームで決めておくとよいこと

制作会社や社内で、次の3つを決めておくと、divの増えすぎを防げます。

決めること	例
divを使う条件	名前のある要素が合わず、見た目の目的のときだけ
class の付け方	役割が分かる名前にする。見た目の名前だけにしない
入れ子の深さの目安	超えたら理由を確かめる段数を決める

深さの目安に、公式の数字はありません。サイトごとに決める性質のものです。

書き直しの例

見た目を整える目的で、divが3段重なっている部分があったとします。

最初に、各段のdivに class や style が付いているかを確かめます。何も付いていない段は、削っても見た目が変わりません。

次に、残った段が何の役割かを言葉にします。案内なら nav、本文の主役なら main に替えられるか、問い1に戻って確かめます。

最後に、画面を比べます。変わっていなければ、書き直しは完了です。

よくある質問

Q1. divタグは使わないほうがよいのですか

使ってはいけない要素ではありません。仕様は、ほかに適した要素が無いときの最後の手段として使うよう書いています。

名前のある要素が合うなら、そちらを優先します。合うものが無ければ、divで構いません。

Q2. divを横に並べたいのに並びません。どうすればよいですか

並べたい箱の親に、display: flex を書きます。箱の側に書いても、並びは変わりません。

実測では、3つの箱それぞれに flex を書いた場合は、縦に積まれたままでした。親に書いた場合は、横に並びました。

Q3. divを中央に寄せるには、どう書きますか

箱の幅を決めて、左右の余白を auto にします。幅を決めずに余白だけ auto にしても、寄りません。

親に display: flex と justify-content: center を書く方法でも、同じ位置に寄ります。

Q4. divとpの違いは何ですか

pは段落という意味を持ち、中にはフレージング・コンテンツだけを入れます。divは意味を持たず、中にフロー・コンテンツを入れられます。

pの中にdivを書くと、ブラウザがpを先に閉じるので、書いた形とは違う形に読み取られます。

Q5. divの数は、SEOやAI検索に影響しますか

公式の文書には記載がありません。検索セントラルは、AI機能のために特別な最適化は要らないと書いています。

読む人と直す人のために、役割に合う要素を選ぶ。この方針で書けば、困ることはありません。

まとめ：意味を持たない箱は、置く前に3つ問う

div要素は、特別な意味をまったく持たない入れ物です。HTMLの仕様は、ほかに適した要素が無いときの最後の手段と位置づけています。

pは段落を表し、中にdivは入れられません。spanも意味を持ちませんが、文字の流れの中の一部を囲む要素です。

名前のある要素（article、section、nav、main など）が合うなら、先にそちらを使います。sectionは汎用の入れ物とは位置づけられていません。見た目のためだけの箱はdivで書く、というのが仕様の立場です。

横に並べるには、並べたい箱の親に display: flex を書きます。箱の側に書いても、実測では縦に積まれたままでした。

中央に寄せるには、幅を決めて、左右の余白を auto にします。幅が無いと、寄りません。

WordPressのグループブロックは、初期値のdivのほかに、header、main、section、article、aside、footer に切り替えられます。行を選ぶと、flex が使われます。

弊社の公開記事30本では、本文のdivは0個でした。ページ全体では、テーマの出力により85個、入れ子は6段でした。

divの数や入れ子が検索やAI検索に影響するかは、公式に記載がありません。

今日できる点検

点検すること	方法	合格の目安
意味のある要素が使われているか	ページのソースを表示し、header、main、nav、footer を探す	主要な部分に名前のある要素がある
何も付いていないdiv	ソースで class も style も無いdivを探す	理由が説明できるものだけ残っている
入れ子の深さ	開発者ツールで、本文を囲むdivの段数を数える	サイトごとに決めた目安に収まっている
pの中のdiv	pの中にdivを入れていないか探す	入れていない
横並びの指定の場所	横に並べている部分のCSSを見る	flex が親に書かれている
中央寄せの指定	中央に寄せている箱のCSSを見る	幅が決まっていて、余白が auto になっている
WordPressのグループブロック	ブロックを選び、HTMLの要素の項目を見る	役割に合う要素が選ばれている

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。