divタグとは、要素をひとくくりにする役割を持つタグです。特にタグとしての意味を持ちません。divタグはSEOへの直接的な影響はありませんが、適切に使うことが前提です。divタグを多用するとレイアウト崩れの原因になったりします。

また、検索クローラーがページの情報を読み取りにくくなるため、クローラビリティにも差し障りが出ます。

divタグを使う場合は、<div>〜</div>を記述します。開始タグ<div> と 終了タグ </div>を使ってコンテンツを囲うようにして使用します。

この記事ではdivタグの基本と使い方やdivタグとspanタグとの違いについて解説します。htmlやCSSにおけるdivタグの適切な使い方を知りたい時、参考にしてください。

divタグとは

divタグは、タグで囲った部分を1つのブロック要素としてまとめられるのが特徴です。グループ化した部分を指定範囲にCSSを適用したりできます。また、divタグは、段落として見なされるため前後に改行が入ります。これは、ブロックレベル要素としてグループ化するのが理由です。

divタグは以下の特徴があります。

spanタグとの違い

spanタグは、divタグと同様に単体では意味を持たないタグです。spanタグはdivタグと異なり、テキストの一部を装飾したいときに使います。spanタグはインライン要素と言います。インライン要素とは、文章の一部で扱われ、前後に改行は入りません。ブロックレベル要素とは、1つのブロックを作り、前後には改行が入ります。

spanタグは以下の特徴があります。

こうした特徴からテキスト内でspanタグにCSSを適用して、一部の文字だけ色やフォントを変更したり、下線を付けたりできます。spanタグのプロバティをdisplay: blockに変更して、divタグのように使うこともできますが混乱を招くためおすすめできません。

詳しくはこちら：spanタグとは？htmlでの使い方とdivタグとの違いなど解説

divタグの使用例

divタグは主に2つの目的で使用します。

ページ全体の構造化

ページ全体の構造化とは、divタグでソースコードを区分して構造や構成をまとめることです。WEBサイトのソースコードをdivタグでまとめると、メンテナンスのときに手を入れやすくなり、作業効率がアップします。ページ全体を構造化すると、HTMLのソースコードを確認するだけでレイアウトを把握できるメリットもあります。

デザインの指定

サイトの装飾はCSSでおこないますが、divタグを対象にして装飾するときはidまたはclass属性を付けてください。属性を付けないままdivタグにCSSを適用すると、サイト内のすべてのdivタグが装飾されます。

divタグの属性について

divタグの属性は3つあり、classとidは外部CSSと連携するために指定する属性です。style属性は、HTMLで直接CSSを適用するときに使用します。

class属性

HTMLでclass属性を記述するときの例です。

CSSで記述するときの例です。class属性を記述するときは.（ピリオド）をつけてください。

id属性

HTMLでid属性をdivタグに使用するときの例です。

CSSに記述するときの例です。id属性を記述するときは、#（シャープ）を付けてください。

style属性

style属性は、HTML上で直接CSSを適用するときに使います。

ただし、HTML上に直接CSSを記述すると、そのHTMLファイルにのみCSSが適用され、またソースコードが複雑になるためメンテナンスの効率が低下します。そのため、CSSは外部ファイルから読み込むのが一般的です。

divタグをCSSに適用する

divタグをCSSに適用すると、次のようなレイアウトを作れます。

テキストや画像の位置を指定する

テキストや画像の位置を指定するときは、text-align:を使います。例えばテキストや画像を右寄せにしたいときは、text-align:right;とします。左寄せはleft;とし、中央寄せのときはcenter;としてください。

特定の要素を非表示にする

divタグで囲った部分を非表示にする方法は3つです。

この方法でテキストを隠すと、文字をドラッグで反転しても表示されません。

display:none;を使う

display:noneは、その部分の要素を取得しません。そのため、隠した部分の空白もありません。記述するときは次のようにしてください。

visibility:hidden;を使う

visibility:hidden;を使用すると、視覚的に認識できないだけで要素は存在しています。そのため、隠した部分には空白ができます。以下、visibility:hidden;の使用例です。

opacity:0～1;を使う

隠したい要素の不透明度を指定する方法です。数値は0から1、もしくは0から100を％（パーセンテージ）で指定します。数値が小さくなるほど透明に近くなりますが、要素自体は存在しているので注意してください。

特定エリアでスクロールする

ページの特定部分にスクロールバーを表示させる方法です。更新履歴やお知らせなどのエリアをスクロールさせたいときに使えます。

はみ出た部分があるときにのみスクロールバーを表示させたい場合は、autoを使ってください。

スクロールバーを使うとき、他に指定できることを以下にまとめました。

divタグで横並びのレイアウトを作る

divタグで横並びのレイアウトを作るとき、方法は6つあります。

flexを使う

flexboxは、divタグの配置を換える方法のなかでは主流です。自動的にサイズを調整して横並びにする点が、floatとは大きく異なります。実際に記述するときは次のようにしてください。

floatを使う

floatプロパティを使うとき、レイアウト崩れを防ぐためにclearプロパティを適用してください。以下、記述例です。

floatを使った横並びは、floatを適用していない要素がfloatの適用範囲の周囲に回り込んでレイアウトが崩れることがあります。そのため、floatを使用するときはclearプロパティを使って、要素の回り込みを解除してください。

clearプロパティで指定できる項目は3つです。

ただし、bothを使うとleft、right両方の回り込みを解除できるため、一般的にはbothが多用されています。

positionを使う

positionを使うときは、positionに対して5つの値を使います。

positionは基準となる要素（relative）と配置を換える要素（absolute）を指定するのが基本です。以下、HTMLとCSSの記述例です。ここでは背景色を指定してわかりやすくしました。

box3にあるtop:とleft:の数値を変えると、自由に位置を動かせます。数値をゼロにするときは、pxを省略してもかまいません。また、bottom:やright:からの指定も可能です。サイトのデザインや状況に応じて変更してください。

display:inline;を使う

display:inline;を使うときは、inline;とinline-block;の2つがあります。

いずれの場合も、HTMLの記述例は以下のものを使います。

display:inlineを使うときの記述例です。インライン要素にして高さや横幅、上下のマージンを無効にできます。要素のあいだにできる隙間は、改行せずにHTMLソースコードを記述して回避してください。

display:inline-blockを使うときの記述例です。インラインとブロックの要素を持つため高さや横幅、上下マージンの指定ができます。要素のあいだにできる隙間は、改行せずにHTMLソースコードを記述して回避します。

table-cell;を使う

tableタグはHTMLで表を作成するために使いますが、そのtable内のセルを再現できるのがtable-cellです。以下、display:table-cellを使った基本的な記述例です。

gridを使う

gridはflex-boxよりも柔軟に配置を決められるのが特徴です。実際に横並びのレイアウトを作るときは次のように記述してください。ここでは、幅150pxのボックスを4つ並べるレイアウトにします。

grid-template-columuns:で他に指定できることをまとめました。

まとめ

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。