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

seoラボラトリー

  • follow us in feedly

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

2017/03/30 2017/03/30

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マークアップ例:
<div class=”box”>ホームページの順位を上げるためにSEO対策が重要です。</div>
CSS記述例:
div.box {
padding:10px;
border:1px solid #CCC;
}

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

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

HTMLマークアップ例:
<div id=”box”>ホームページの順位を上げるためにSEO対策が重要です。</div>
CSS記述例:
div#box {
padding:10px;
border:1px solid #CCC;
}

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

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

HTMLマークアップ例:
<div style=”padding:10px; border:1px solid #CCC;”>ホームページの順位を上げるためにSEO対策が重要です。</div>

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

DIVタグにCSSを適用する

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

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

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

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

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

HTMLマークアップ例:
<div class=”box-containar”>
<div class=”box”>ボックス1</div>
<div class=”box”>ボックス2</div>
<div class=”box”>ボックス3</div>
</div>
CSS記述例:
.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マークアップ例:
<div class=”box”>ボックス1</div>
<div class=”box”>ボックス2</div>
<div class=”box”>ボックス3</div>
CSS記述例:
.box {
display:inline;/*インライン要素*/
padding:10px;
border:1px solid #CCC;
}
display:inline-block;

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
<div class=”box”>ボックス2</div>
<div class=”box”>ボックス3</div>
CSS記述例:
.box {
display:inline-block;/*インライン要素とブロック要素を兼ね備える*/
padding:10px;
border:1px solid #CCC;
}
display:table-cell;

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
<div class=”box”>ボックス2</div>
<div class=”box”>ボックス3</div>
CSS記述例:
.box {
display:table-cell;/*テーブルセル*/
padding:10px;
border:1px solid #CCC;
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

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

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

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

text-align:center;

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
CSS記述例:
.box {
text-align:right;/*右揃え*/
padding:10px;
border:1px solid #CCC;
}
float:right;

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
<p style=”clear:right;”>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p>
CSS記述例:
.box {
float:right;/*右寄せ*/
padding:10px;
border:1px solid #CCC;
}

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

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

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

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
CSS記述例:
.box {
visibility:hidden;/*非表示*/
padding:10px;
border:1px solid #CCC;
}

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

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

HTMLマークアップ例:
<div class=”box”>ボックス1</div>
CSS記述例:
.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マークアップ例:
<div class=”box”>ボックス1</div>
CSS記述例:
.box {
overflow-x: auto;/*横スクロール表示*/
white-space: nowrap;/*自動的に改行させない(横スクロールの際に必要な場合あり)*/
}
CSS記述例:
.box {
overflow-y: auto;/*縦スクロール表示*/
}

まとめ

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

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

最新記事

本日の順位変動幅順位変動情報へ