divタを記述することによる直接的なSEO効果はありません。

ただし、divタグの不適切な利用は、Googleなどの検索エンジンに対する情報伝達を阻害する要因となります。

divタグの不適切な活用を避けるため、divタグを適切に活用するポイントをわかりやすく解説します。

この記事で解説する内容は、次のとおりです。

• divタグとは？
• divタグの特徴
• divタグとspanタグとの違い
• divタグの記述方法や記述の際の注意点

divタグとは？

div（ディヴ）タグはdivisionの略で、HTMLでは多く使われているHTMLタグの一種です。

divタグそれ自体では特に意味を持ちませんが、コンテンツを「分割」し、複数のタグをグループ化する役割があります。

もう少し詳しく解説すると、divタグは要素をグループ化し、Webサイトのページデザインやレイアウトを構成する役割を持ったHTMLタグです。

divタグの特徴

divタグの特徴は、次の2つです。

• 要素のグループ化
• デザインやレイアウト構成が可能

要素をグループ化できる

divタグは、divタグ（<divタグ>）で囲んだ要素のグループ化が可能です。

divタグを単体で使うと改行されただけの見た目になりますが、HTML内の要素をグループ化できることで、複数の要素をひとかたまりのブロックにできます。

これにより、Webサイトのページレイアウトの構成に使われる、非常に重要なタグと言えます。

デザインやレイアウト構成が可能

divタグが他のHTMLタグと異なるのは、CSSを用いてデザインやレイアウト構成ができる点です。

先にも解説したように、divタグ自体に何の意味も持たないがゆえに、できることでもあります。

またdivタグは、例えばpタグやaタグとは違い、divタグの中にdivタグが使用できるため、レイアウト構成が非常に変更しやすい利点を持ったタグと言えます。

divタグとspanタグとの違い

divタグを語るうえで出てくるのがspanタグとの違いです。spanタグはdivタグと同様、それ自体に意味を持ちません。両者の違いは要素の違いにあります。

• divタグ：ブロック要素
• spanタグ：インライン要素

ブロック要素とは、見出しや段落などを構成する要素で、一つのかたまり（ブロック）として扱います。

divタグを使うことで、「レイアウトやサイズ情報が詰まっている、一つのかたまり（ブロック）」として扱われます。

また、ブロック要素では、レイアウト情報（margin・paddingなど）やサイズ情報（width・heightなど）を自由に設定可能です。

一方、spanタグの持つインライン要素は、ブロック要素の中で使われます。文章の一部として扱われ、ブラウザ上では改行されず、spanタグで囲った部分を強調します。

テキストの文字の色やサイズを変える際に使われることが多いです。

divタグの記述方法

divタグの記述方法は次のとおりです。

• divタグで囲みたい要素を囲むだけ
• class属性とid属性の設定
• CSSで要素を配置する

divタグで囲みたい要素を囲むだけ

記述方法は至ってシンプルで、ひとまとめにしたい要素をdivタグで囲むだけです。

【記述サンプル】

<div>  

　 <ひとまとめにしたい要素をここに記述します>

</div>

id属性とclass属性を記述する

divタグには、属性と呼ばれる補足情報として、「id属性」「class属性」があります。

id属性とclass属性は、主にCSSなどの外部ファイルとの連携に使い、それぞれ次の特徴があります。

属性名	説明
id	・要素に名称をつけられる ・名称の重複使用はできない（1つのページで使用は一度のみ）
class	・要素にグループ名を付与する ・複数要素に同一class名の付与が可能

 

class属性は一つのページ内で何度も使えますが、id属性は一つのページに一度しか使えません。

元々の語源を見てみると、classは「分類・種類」、id(identity)は「個性・独自性」を意味するところからも、使われ方が理解できます。

それぞれの記述例を以下に示します。

【記述書式（class属性）】

　要素名.クラス名 {プロパティ名:値;}　※要素名は省略可

【記述書式（id属性）】

　要素名#id名 {プロパティ名:値;}　※要素名は省略可

【記述例（HTML内記述）】

     <div class =”fish”>

         <div id =”maguro”>まぐろ</div>

         <div id =”saba”>さば</div>

         <div id =”tai”>たい</div>

　</div>

 

この記述例で示したclass属性の”fish”は、グループ名として記述しています。

その後に記述しているid属性の”まぐろ”、”さば”、”たい”は、魚類の固有名称を示しているため、それをidで管理しています。

ここの記述で注意すべき点は、両者の違いを厳密にこだわりすぎないことです。

例えば、class属性を「生物」と記述した場合、上記で記述したclass属性である”fish”がid属性となり、解釈を変えることで使い方が変わります。

この二つの属性を使い分けは、自社内で独自の基準が作られることが多く、それに従うのが良いでしょう。

CSSでdivタグの要素を配置する

今度はCSSを使い、divタグの要素の配置を変える記述方法を解説します。

具体的な内容は次のとおりです。

• divタグの要素を全体的に左寄せにする
• divタグの要素を中央真中に配置する
• divタグの要素を左右中央に配置する
• divタグの要素を横並びにする

divタグの要素を全体的に左寄せにする

CSSで次のように記述します。

【記述例（CSS内記述）】

 

.sample-box {

    width: 50px;　

    height: 50px;

    color: #FFF

    background: #529fff:

}

 

ここではdivタグで囲んだ要素の幅と高さを50pxに指定し、全体的に左寄りに表示させています。

divタグの要素を中央真ん中に配置する

CSSでdivタグの要素を中央真ん中に配置する場合、次の3つを記述します。

• display: flex
• justify-content: center
• align-items: center

この三つを用いてCSSで記述すると、次のようになります。

【記述例（CSS内記述）】

.sample-box {

    width: 50px;　

    height: 50px;

    color: #FFF;

    background: #529fff;

　margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

}

divタグの要素を左右中央に配置する

divタグの要素を左右中央に配置したい場合、次の2つの方法があります。

• text-align: centerを記述する
• display: flexとjustify-content: centerを記述する

まず、text-align: centerを記述する場合、次のようになります。

 

【text-align: centerを利用した記述例】

.sample-box {

    width: 50px;　

    height: 50px;

    color: #FFF;

    background: #529fff;

　margin: 0 auto;

    text-align: center;

}

 

divタグで囲んだ要素の中身がテキスト、もしくはdisplay: inlineで指定した要素の場合、CSS上で「text-align: center」の記述で要素を左右中央寄せできます。

次に、display: flexとjustify-content: centerを用いた記述例は次のとおりです。

 

.sample-box {

    width: 50px;　

    height: 50px;

    color: #FFF;

    background: #529fff;

    display: flex;

    justify-content: center;

}

 

divタグで囲んだ要素に対し、display: flexとjustify-content: centerを記述することで、

対象となる要素にかかわらず、左右中央に寄せることが可能です。

divタグの要素を横並びにする

例えば、次のようなdivタグに囲まれた要素に含まれるclass属性があり、これらを横並びで表示させたいとします。

 

【記述例（HTML内記述）】

     <div class =”box”>

         <div class =”item”>XXX</div>

         <div class =”item”>YYY</div>

         <div class =”item”>ZZZ</div>

　</div>

 

このような場合、CSSで「display: flex」を記述することで中身を横並び表示できます。

 

【記述例（CSS内記述）】

.box {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

 

.item {

    background: #529fff;

    text-align: center;

    width; 31%;

}

 

記述した「justify-content: space-between」は、要素が複数並ぶ場合に均等に配置する意味を持っています。

また、それぞれのアイテムの表示幅は「.item { width: XX％など }」で指定可能です。

divタグを使う際の注意点

divタグを使う際の注意点は、次のとおりです。

• divタグを乱用しない
• class属性やid属性を適切に使う

divタグを乱用しない

divタグは他のHTMLタグとは異なり、何度もdivタグを利用できます。

ただし、divタグの乱用により、次の影響が出ます。

1. テキストの可読性が低下する
2. SEOに悪影響が出る可能性がある

divタグは文書自体をわかりやすく構造化する目的で使われるため、divタグを何度も入れ子状にして深く構造化してしまうと、テキストの可読性が低下します。

また、HTMLの構造自体がわかりにくくなることで、メンテナンス性も低下します。

divタグを記述する際には自分だけではなく、他のエンジニアが読むことも意識しておきましょう。

どうしてもdivタグを複数回使わないといけない場合は、コメントアウト機能を使うなどの工夫も必要です。

加えて、divタグの乱用はSEOにも悪影響を及ぼす可能性があります。

divタグの乱用により、作成した見出しや画像がGoogleなどの検索エンジンに引っかかりづらくなってしまいます。

安易にdivタグを使おうせず、見出しにはhタグ、画像にはimgタグを用いるなど、適切なタグの使い分けを意識しましょう。

divタグは必要最小限とし、HMTLの構造もシンプルでわかりやすさを心がけることが大切です。

class属性やid属性などを適切に使う

class属性やid属性の乱用により、CSSやjavascriptの処理が複雑化してしまい、メンテナンスやパフォーマンス低下につながる可能性があります。

class属性やid属性の有効活用はスタイル設定などを可能にしますが、あくまでも適切に使うことが大切です。

divタグを適切に扱うことがSEO効果を上げるカギ！

divタグそれ自体は意味を持ちませんが、その柔軟さと使い勝手のよさゆえに乱用してしまうケースが後を絶ちません。

せっかくdivタグを使ったとしても、結果としてデメリットを生じさせてしまっていては、設定自体が無駄になります。

「divタグを適切に使い、シンプルでわかりやすい構造を作ること」

これを頭に入れながらdivタグを使うことで、間接的に良いSEO効果を得ることができ、ユーザーにも満足してもらえるWebサイト作りが可能となるでしょう。