divタグとは？HTMLタグでグループ化すると共に抑えたい5つのテクニック
divタグとは、各コンテンツをひとまとめする（グループ化する）際に使う汎用的なHTMLタグです。
このdivタグを使うことによる直接的なSEOへの影響はありません。
一方、divタグを不適切に扱えば、クローラビリティの低下に繋がります。
具体的には、複数の情報（項目）を並べて提示するときにリストタグ（ulタグやolタグ、liタグ）ではなくdivタグをマークアップすれば、各項目における重み付けに差が生じる可能性があります。
つまり、クローラーが文書の意図を理解しづらくなるというわけです。
こうした良くない状況を回避する為に、divタグを適切に使って、わかりやすいHTML構造にしましょう。
今回は、divタグの意味やdivタグを使ってHTMLタグでグループ化すると共に抑えたい5つのテクニックなど中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
divタグとは？
divタグとは、各コンテンツをひとまとめする（グループ化する）際に使う汎用的なHTMLタグで、PタグやMETAタグといった良く活用される代表的なHTMLタグの一つといえます。
このdivタグは、コンテンツの幅や余白など柔軟に指定できるブロック要素です。 また、インライン要素であるSPANタグと似通った部分があり、共にタグ自体には意味を持ちません。divタグのdivの読み方・略
divタグのdivの読み方は「ディヴ」で、「division（ディヴィジョン）」の略です。
直訳すると区分・部分といった意味合いです。
divタグの属性
divタグの主な属性として、「class属性」「id属性」「style属性」があり、それぞれ以下のように記述します。
HTMLのdivタグの「class属性」使い方
主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名.クラス名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。
HTMLマークアップ例：
|
1 |
<div class="box">ホームページの順位を上げるためにSEO対策が重要です。</div> |
CSS記述例：
|
1 2 3 4 |
div.box { padding:10px; border:1px solid #CCC; } |
HTMLのdivタグの「id属性」使い方
主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名#id名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。
HTMLマークアップ例：
|
1 |
<div id="box">ホームページの順位を上げるためにSEO対策が重要です。</div> |
CSS記述例：
|
1 2 3 4 |
div#box { padding:10px; border:1px solid #CCC; } |
HTMLのdivタグの「style属性」使い方
HTML上で直接CSSを適用する際に使う属性です。
HTMLマークアップ例：
|
1 |
<div style="padding:10px; border:1px solid #CCC;">ホームページの順位を上げるためにSEO対策が重要です。</div> |
divタグにCSSを適用する
divタグにCSSを適用するには、主に以下のようなパターンがあります。
HTMLのdivタグを横並びにする（改行させない）
CSSの「float」プロパティを使う方法
CSSの「float」プロパティを活用し、要素を回り込ませることでdivタグで横並びができます。
※基本的にdivタグで囲んだ次の要素は改行されるため、横並びにはCSSの適用が必要となります。
HTMLマークアップ例：
|
1 2 3 4 5 |
<div class="box-containar"> <div class="box">ボックス1</div> <div class="box">ボックス2</div> <div class="box">ボックス3</div> </div> |
CSS記述例：
|
1 2 3 4 5 6 7 8 9 |
.box-containar { overflow:hidden;/*回り込み解除（floatを使った次の要素のレイアウトが崩れるため）*/ } .box-containar .box { float:left;/*左に回り込み*/ padding:10px; border:1px solid #CCC; } |
CSSの「display」プロパティを使う方法
display:inline;
CSSの「display」プロパティでinline値を指定し、インライン要素にすることでdivタグで横並びができます。
インライン要素のため、高さや横幅、上下マージンが無効となります。
要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。
HTMLマークアップ例：
|
1 2 3 |
<div class="box">ボックス1</div> <div class="box">ボックス2</div> <div class="box">ボックス3</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { display:inline;/*インライン要素*/ padding:10px; border:1px solid #CCC; } |
display:inline-block;
CSSの「display」プロパティでinline-block値を指定し、インライン要素にすることでdivタグで横並びができます。
さらにブロック要素も持ち合わせてるため、高さや横幅、上下マージンが有効となります。
要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。
HTMLマークアップ例：
|
1 2 3 |
<div class="box">ボックス1</div> <div class="box">ボックス2</div> <div class="box">ボックス3</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { display:inline-block;/*インライン要素とブロック要素を兼ね備える*/<br /> padding:10px; border:1px solid #CCC; } |
display:table-cell;
CSSの「display」プロパティでtable-cell値を指定し、テーブルセルにすることでdivタグで横並びができます。
HTMLマークアップ例：
|
1 2 3 |
<div class="box">ボックス1</div> <div class="box">ボックス2</div> <div class="box">ボックス3</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { display:table-cell;/*テーブルセル*/ padding:10px; border:1px solid #CCC; } |
HTMLのdivタグで位置を指定する方法
HTMLのdivタグで位置を指定する方法いくつかあります。
HTMLのdivタグで中央寄せ（center・センタリング）にする
text-align:center;
CSSの「text-align」プロパティでright値を指定することで、divタグで右寄せできます。
この場合、divタグの中の要素（テキストや画像）に対する位置指定となります。
HTMLマークアップ例：
|
1 |
<div class="box">ボックス1</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { text-align:right;/*右揃え*/ padding:10px; border:1px solid #CCC; } |
float:right;
CSSの「float」プロパティでright値を指定することで、divタグで右寄せできます。
この場合、レイアウトが崩れるので、次の要素clearプロパティを適用し、回り込み解除します。
この場合、divタグ自体の右寄せとなり、divタグの中の要素には適用されません。
HTMLマークアップ例：
|
1 |
<div class="box">ボックス1</div> |
|
1 |
<p style="clear:right;">SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p> |
CSS記述例：
|
1 2 3 4 5 |
.box { float:right;/*右寄せ*/ padding:10px; border:1px solid #CCC; } |
HTMLのdivタグで非表示にする
HTMLのdivタグで非表示にする方法がいくつかあります。
CSSの「visibility:hidden」を活用する
CSSの「visibility」プロパティでhidden値を指定することで、divタグで非表示にできます。
扱いとしては、要素はあるけど見えない状態となるため、空白となります。
HTMLマークアップ例：
|
1 |
<div class="box">ボックス1</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { visibility:hidden;/*非表示*/ padding:10px; border:1px solid #CCC; } |
CSSの「display:none」を活用する
CSSの「display」プロパティでnone値を指定することで、divタグで非表示にできます。
扱いとしては、要素が取得されず、その場にない状態となるため、空白も無く詰めて表示されます。
HTMLマークアップ例：
|
1 |
<div class="box">ボックス1</div> |
CSS記述例：
|
1 2 3 4 5 |
.box { display:none;/*非表示*/ padding:10px; border:1px solid #CCC; } |
HTMLのdivタグでスクロールする
HTMLのdivタグでスクロールするには、以下のようなCSSの「overflow:auto」を活用する方法があります。
CSSの「overflow」プロパティでauto値を指定し、自動て縦横のスクロールが挿入され、divタグでスクロールできます。
また、「overflow-x:auto;」で横スクロール、「overflow-y:auto;」で縦スクロールがそれぞれ指定できます。
HTMLマークアップ例：
|
1 |
<div class="box">ボックス1</div> |
CSS記述例：
|
1 2 3 4 |
.box { overflow-x: auto;/*横スクロール表示*/ white-space: nowrap;/*自動的に改行させない（横スクロールの際に必要な場合あり）*/ } |
CSS記述例：
|
1 2 3 |
.box { overflow-y: auto;/*縦スクロール表示*/ } |
まとめ：divタグを適切に使って、わかりやすいHTML構造にしよう
divタグをうまくマークアップし、サイト構築しましょう。
ソース・内容・デザインといったコンテンツの質を上げ、サイト価値を高めながら、SEO対策で上位化を目指すことが重要です。
SEO対策しても検索順位が上がらない…なぜ？
SEO対策しても検索順位が上がらない…なぜ？
検索順位が上がらない理由は、SEO対策の質が低いからです。
例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。
こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します（無料）。
- « 前の記事
spanタグとは？htmlでの使い方など徹底解説！ - 次の記事 »
空白文字とは？コピペで使う簡単なやり方など徹底紹介！
検索順位を上げたり、検索流入を増やすにはSEOが重要！
