最終更新HTMLの<div>ディブタグは、とくに意味を持たないタグです。デザインやレイアウトのために使います。このページでは<div>の基本的な使い方や、<span>タグとの違いなどについて解説します。✍️「div」は、division(ディビジョン=分割の意味)の略です。読み方は「ディブ」となります。基本的に1つ1つのHTMLタグは「意味」や「役割」を持っています。<div>タグと<span>タグだけは意味を持ちません。spanタグとはdivタグの使いどころではいつ<div>や<span>を使うのかというと、CSSをあてて、デザインやレイアウトを変えたいときに使います。「意味を持たない」ため、どの場所でも使いやすいのです。👆たとえばこの例では、見出しや段落を囲む<div>に対してCSSで「背景を青にして、文字を白にする」という指定をしています。<div>は好きなところに、好きな数だけ使えるため、デサインやレイアウトを変更するときに大活躍します。divとspanの違い<div>と<span>はどちらも「意味を持たない」タグです。HTML初心者の方が混乱するのがこの2つの違いです。一言でいうと、この2つは「displayというCSSプロパティの値が違う」ということになります。😺displayは「要素をどのように配置するか(前後に改行を入れるか、中身を横に並べるかどうか...など)」を決めるプロパティです。blockというCSSがあてられています。inlineというCSSがあてられています。blockをあてると<div>と全く同じ働きになります(もちろん混乱するのでやらないようにしましょう)。blockというCSSがあてられています。blockがあてられた要素はブロックを作り、前後には改行が入るようになります。👆青に塗られた部分が<div>要素が作るブロックを表しています。<div>の前後に改行が入っていることが分かると思います。<div>はデフォルトでは横に広がります。inlineというCSSがあてられています。inlineの要素の前後には改行が入りません。inlineの要素はおもに文章の中の一部として扱われます。👆青色の部分が<span>です。前後に改行が入っていませんね。幅も横に広がるのではなく、テキストの長さだけの幅になっています。そのため、<span>は文章の一部分の色を変えたり、線を引いたりするときにピッタリなのです。🤔ブロックレベル要素とインライン要素(従来の考え方ですが)HTMLの要素は「ブロックレベル要素」か「インライン要素」のどちらかに分類されていました。「ブロックレベル要素」は、1つのブロックを作り、前後には改行が入ります(例外もありますが...)。<div>や、段落(<p>)、見出し(<h1>-<h6>)、引用(<blockquote>)などが「ブロックレベル要素」にあたります。「インライン要素」は、文章の一部のようなイメージで扱われ、前後に改行は入りません。<span>や、リンク(<a>)などが「インライン要素」にあたります。ちなみに「ブロックレベル要素」と「インライン要素」の区分はHTML5〜別の考え方に置き換えられました。考え方が置き換わっただけで、段落や見出しの前後に改行が入ることには変わりはありません。inlineの要素です。inlineの要素内に、blockの要素を入れないようにしましょう。<div>~</div></span>👆つまり<span>の中に<div>は入れないようにしましょう。これをやってしまうとイメージ通りに表示されないことがあります。正しい使い方の例イメージ的にはこんな感じです。blockの要素の中には何でも入れられます。block要素の中に入ることになります。<div>の中に<p>を入れて、その中で<span>を使ったりするわけですね。divタグの使い方CSSでスタイルをあてるときにはclassを使う<div>に対してCSSでスタイルを適用するときには、クラスを指定するようにします。}という形でスタイルを指定します。✍️classの代わりにidを使うこともできますが、基本的にCSSをあてる目的ではclassだけを使うのが良いとされています。divは何回使っても良い<div>や<span>は何回でも使うことができます。入れ子にしすぎるとHTMLの可読性が低下する(読みづらくなる)ので注意しましょう。できる限り意味のあるタグを使う<div>ばかりを使ってWebページを構築することもできます。「段落に相当する文章は<p>タグで囲む」「メニューは<nav>タグで囲む」のように、できる限り意味を持つタグを優先して使いましょう。✍️意味を持つタグの例ヘッダーならheaderタグフッターならfooterタグ主要なコンテンツならmainタグ補足的なコンテンツならasideタグ1つのセクションならsectionタグ1つの独立した記事ならarticleタグメニューなどのナビゲーションならnavタグ見出しならh1-h6タグ段落ならpタグ👆これらのタグは<div>でも代用できますが、意味を持つタグを使うことには以下のようなメリットがあります。自分自身が後からソースコードを触るときに構成を理解しやすくなるCSSでdiv要素の配置を変えるここからはちょっとだけ具体的な例を紹介します。参考程度に読み流していただければと思います。👆たとえば<div>の幅と高さを「60px」に指定した例です。全体的に左寄りに表示されることが分かると思います。divを中央寄せする<div>自体を中央寄せにしたいときは、左右のmarginの値をautoにします。autoにより、<div>要素が中央寄せになりました。左右のマージン;」と省略して書くこともできます。auto;のようになります。blockの要素を中央寄せするときはこの方法が使えます。divの中身を左右中央寄せする<div>の中身を左右で中央寄せする場合、いくつかの方法が考えられます。centerを指定すると、中が何であれ左右中央に寄せることが可能です。centerの3つを指定すると、中身をど真ん中に寄せることができます。divを横並びにするたとえば、HTMLで次のように<div>を複数こ並べるとします。class="container">に囲まれています。class="item">が含まれています。flexを指定すると、中身は横並びになります。space-betweenは、「要素が複数並んでいるときに均等配置する」という意味の指定になります。}という形で指定すればOKです。ここで紹介した方法はあくまでも一例です。CSSでのレイアウトについて書き出すとキリがないのでこのくらいで留めておくことにします。