SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

divタグとは?HTMLタグでグループ化すると共に抑えたい5つのテクニック

divタグでコンテンツをグループ化し、HTMLタグでマークアップしながら、サイト構築する方法があります。

今回は、divタグにCSSを適用する、HTMLのdivタグを横並びにする方法、HTMLのdivタグのclass属性・id属性の使い方について中心に解説したいと思います。

divタグとは?HTMLタグでグループ化すると共に抑えたい5つのテクニック

divタグとは?

divタグとは、各コンテンツをひとまとめする(グループ化する)際に使う、汎用的なHTMLタグです。

divタグは、コンテンツの幅や余白など柔軟に指定できるブロック要素です。

divタグは、インライン要素であるSPANタグと似通った部分があり、共にタグ自体には意味を持ちません。

divタグは、PタグやMETAタグといった良く活用される代表的なHTMLタグの一つといえます。

divの略・読み方

divは、「division(ディヴィジョン)」の略で、区分・部分といった意味合いです。

divは、「ディヴ」という読み方になります。

divタグの属性

divタグの主な属性として、「class属性」「id属性」「style属性」があり、以下のように記述します。

HTMLのdivタグの「class属性」使い方

主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名.クラス名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

HTMLマークアップ例:

CSS記述例:

HTMLのdivタグの「id属性」使い方

主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名#id名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

HTMLマークアップ例:

CSS記述例:

検索順位を上げたり、検索流入を増やすにはSEOが重要!

関連記事

【2021年版】SEOとは?基本や重要な対策など初心者にわかりやすく解説!

SEOの基本を押さえて対策しよう。とくにユーザーの利便性を考慮することが重要で、これを無視すればGoogleに評価されない(検索順位や検索流入が向上しない)…

続きを見る

HTMLのdivタグの「style属性」使い方

HTML上で直接CSSを適用する際に使う属性です。

HTMLマークアップ例:

divタグにCSSを適用する

divタグにCSSを適用するには、主に以下のようなパターンがあります。

HTMLのdivタグを横並びにする(改行させない)

※参考:CSSで要素を横並びにする方法まとめ

CSSの「float」プロパティを使う方法

CSSの「float」プロパティを活用し、要素を回り込ませることでdivタグで横並びができます。
※基本的にdivタグで囲んだ次の要素は改行されるため、横並びにはCSSの適用が必要となります。

HTMLマークアップ例:

CSS記述例:

CSSの「display」プロパティを使う方法

display:inline;

CSSの「display」プロパティでinline値を指定し、インライン要素にすることでdivタグで横並びができます。
インライン要素のため、高さや横幅、上下マージンが無効となります。
要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。

HTMLマークアップ例:

CSS記述例:

display:inline-block;

CSSの「display」プロパティでinline-block値を指定し、インライン要素にすることでdivタグで横並びができます。
さらにブロック要素も持ち合わせてるため、高さや横幅、上下マージンが有効となります。
要素間の隙間は、改行せずにHTMLソースコードを記述すれば回避できます。

HTMLマークアップ例:

CSS記述例:

display:table-cell;

CSSの「display」プロパティでtable-cell値を指定し、テーブルセルにすることでdivタグで横並びができます。

HTMLマークアップ例:

CSS記述例:

HTMLのdivタグで位置を指定する方法

※参考:CSSで中央寄せの方法いろいろメモ

HTMLのdivタグで中央寄せ(center・センタリング)にする

text-align:center;

CSSの「text-align」プロパティでright値を指定することで、divタグで右寄せできます。
この場合、divタグの中の要素(テキストや画像)に対する位置指定となります。

HTMLマークアップ例:

CSS記述例:

float:right;

CSSの「float」プロパティでright値を指定することで、divタグで右寄せできます。
この場合、レイアウトが崩れるので、次の要素clearプロパティを適用し、回り込み解除します。
この場合、divタグ自体の右寄せとなり、divタグの中の要素には適用されません。

HTMLマークアップ例:

CSS記述例:

HTMLのdivタグで非表示にする

HTMLのdivタグで非表示にするには、以下のような方法があります。
※参考:display:none と visibility:hidden の違い

CSSの「visibility:hidden」を活用する

CSSの「visibility」プロパティでhidden値を指定することで、divタグで非表示にできます。
扱いとしては、要素はあるけど見えない状態となるため、空白となります。

HTMLマークアップ例:

CSS記述例:

CSSの「display:none」を活用する

CSSの「display」プロパティでnone値を指定することで、divタグで非表示にできます。
扱いとしては、要素が取得されず、その場にない状態となるため、空白も無く詰めて表示されます。

HTMLマークアップ例:

CSS記述例:

HTMLのdivタグでスクロールする

HTMLのdivタグでスクロールするには、以下のようなCSSの「overflow:auto」を活用する方法があります。

CSSの「overflow」プロパティでauto値を指定し、自動て縦横のスクロールが挿入され、divタグでスクロールできます。
また、「overflow-x:auto;」で横スクロール、「overflow-y:auto;」で縦スクロールがそれぞれ指定できます。

HTMLマークアップ例:

CSS記述例:

CSS記述例:

まとめ

divタグをうまくマークアップし、サイト構築しましょう。

ソース・内容・デザインといったコンテンツの質を上げ、サイト価値を高めながら、SEO対策で上位化を目指すことが重要です。

検索順位が上がらない…なぜ?

検索順位が上がらない…なぜ?

検索順位が上がらない理由は、SEO対策の質が低いからです。

例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やして内部リンクの最適化を疎かにします。
この場合、SEO対策の質が下がります。
結果、検索順位が上がらないというわけです。

こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策を洗い出しましょう。

SEO対策無料ご提案はこちら