SEO対策の東京SEOメーカー

close

  • キーワード検索

  • カテゴリー検索

人気のキーワード

  • HOME
  • WEB制作
  • divタグとは？spanタグとの違いやさまざまな使い方を解説

divタグとは？spanタグとの違いやさまざまな使い方を解説

divタグとは？

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

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

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

 

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

 

コンテンツ悩み解消

divタグとは

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

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

  • 前後に改行が入る
  • 幅や高さ、余白を指定できる
  • タグ内で使用できるタグが多い
  • spanタグなどのインライン要素を中に入れられる

 

spanタグとの違い

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

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

  • 前後で改行しない
  • 幅と高さ、余白を指定できない
  • タグ内で同じ要素（display: inline）を持つタグのみ使用できる

 

こうした特徴からテキスト内で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属性
  • id属性
  • style属性

 

class属性

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

<div class＝”box”>テスト</div>

 

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

div.box {

padding:10px;

border:1px solid #000;

}

 

id属性

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

<div id＝”box”>テスト</div>

 

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

div#box {

padding:10px;

border:1px solid #000;

}

 

style属性

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

<div style＝”padding:10px; border:1px solid #000;”>テスト</div>

 

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

 

divタグをCSSに適用する

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

 

  • テキストや画像の位置を指定する
  • 特定の要素を非表示にする
  • 特定エリアでスクロールする

 

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

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

HTMLの記述例

<div class=”text”>テストテストテスト</div>

 

CSSの記述例

.text{

text-align:right;

}

 

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

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

 

  • display:none;を使う
  • visibility:hidden;を使う
  • opacity:0～1;を使う

 

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

 

display:none;を使う

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

HTMLの記述

<div class=”block”>テスト</div>

 

CSSの記述

.block{

display:none;

}

 

visibility:hidden;を使う

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

HTMLの記述例

<div class=”block2”>テスト2</div>

 

CSSの記述例

.block2{

visibility:hidden;

}

 

opacity:0～1;を使う

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

HTMLの記述例

<div class=”block3”>透明テスト</div>

 

CSSの記述例

.block3{

opacity:0;

}

 

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

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

HTMLの記述例

 

<div calss=”container”>

はみ出た要素は領域を越えて表示されます<br>

～

はみ出た要素は領域を越えて表示されます<br>

</div>

 

CSSの記述例

 

.container{

width:120px;

height:100px;

overflow:scroll;

}

 

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

CSSの記述例

.container{

width:120px;

height:100px;

overflow:auto;

}

 

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

プロパティ できること
overflow-x: 横方向へのはみ出し要素の処理を指定する
overflow-y: 縦方向へのはみ出し要素の処理を指定する
white-space:nowrap; テキストの改行を禁止する

(normalにすると自動的に枠内で改行する)

 

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

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

 

  1. flex
  2. float
  3. position
  4. display:inline;
  5. table-cell;
  6. grid

 

flexを使う

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

HTMLの記述

 

<div class=”flexbox”>
<div class=”box1”>
<p>box1</p>
</div>
<div class=”box2”>
<p>box2</p>
</div>
</div>

 

CSSの記述

 

.flexbox{

display:flex;

}
.box1{

padding:10px;
border:5px solid #888;
width:100%;

}

.box2{

padding:10px;
border:10px solid #000;
width:100%;

}

 

floatを使う

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

HTMLの記述

 

<div class=”box”>テスト1</div>
<p style=”clear:both”>本文テスト</p>

 

CSSの記述

.box{

float:right;
padding:10px;
border:1px solid #000;
}

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

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

 

  • left
  • right
  • both

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

 

positionを使う

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

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

 

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

HTMLの記述

 

<div class=”box3”>
<p>relative</p>
</div>
<div class=”box4”>
<p>absolute</p>
</div>

 

CSSの記述

 

.box3{

width:200px;
height:150px;
position:relative;
background-color:#dfc3df;
top:150px;
left:250px;

}

 

.box4{

width:300px;
height:150px;
position:absolute;
background-color:#c47d8d;

}

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

 

display:inline;を使う

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

 

  • display:inline;を使う
  • display:inline-block;を使う

 

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

<div class=”box”>テスト</div>
<div class=”box”>テスト2</div>
<div class=”box”>テスト3</div>
<div class=”box”>テスト4</div>

 

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

.box{

display:inline;
padding:10px;
border:1px solid #000;

}

 

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

.box{

display:inline-block;
padding:10px;
border:1px solid #000;

}

 

table-cell;を使う

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

 

HTMLの記述例

 

<div class=”table”>
<p class=”test”>テスト1</p>
<p class=”test”>テスト2</p>
<p class=”test”>テスト3</p>
</div>

 

CSSの記述例

 

.table {

display:table;

}

.test {

display:table-cell;
border: 1px solid;

}

 

gridを使う

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

HTMLの記述例

 

<div class=”container”>
<div class=”item”>box</div>
<div class=”item”>box</div>
<div class=”item”>box</div>
<div class=”item”>box</div>
</div>

 

CSSの記述例

 

.container{

display:grid;
grid-template-columns:150px 150px 150px 150px;

}

 

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

指定方法 指定内容
px 数値で明確にボックスの幅を指定する
fr（2fr、3frと指定できる） コンテナの幅に応じ、列トラックを均等に分割して表示させる
auto（frと併用できる） ボックス内のコンテンツに合わせて幅を調整して表示する

 

まとめ

SEOコンサルタントdivタグとは、要素をひとつにまとめる役割を持つタグです。タグ自体に意味がないという点から、WEB制作においてページ全体の構造化や、CSSでデザインやレイアウトを作るときに多用されます。divタグは、テキストや画像の位置を指定したり特定の部分を非表示にしたりできます。また、ページ内の特定エリアにスクロールバーを表示させることも可能です。divタグはブロック要素のため、通常、使用すると前後で改行が入ります。ですが、flexやfloat、display:inlineなどを使って横並びのレイアウトを作れます。ただし、CSSでdivタグを装飾するときは必ずclassやidをつけてください。これを無視した場合、ソースコード内すべてのdivタグに装飾が施されます。divタグの多用は、SEOのクローラビリティの観点から考えると良くないので、控えましょう。

 

 

この記事の監修者

SEOコンサルタント

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

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

新着記事

人気記事

WEBマーケティング

SEO対策