サイト改善 / 制作 公開日: 2023.02.06

divタグとは?HTMLとCSSでの使い方や意味を解説

HTMLソースコードを見ると、必ずと言っていいほど見ることのあるdivタグ。

divタグは、各コンテンツをグループ化する(ひとつにまとめられる)際に使うHTMLタグです。divタグを使用すると、ブロック要素にまとめることができるため、例えばCSSを使って装飾する際、他に最適なタグがない場面などで使用することが多いタグです。
divタグは、直接的なSEOへの影響はありませんが、不適切に使うことで、クローラビリティの低下に繋がる恐れがあります。

本記事では、divタグの意味や使い方や属性について詳しく解説していきます。

その他のHTMLに関連する記事は以下から確認できます。
alt属性とは?htmlの正しい使い方を理解してSEOを強化しよう!
SEOにおいて重要なアンカーテキストとは?実装時に抑えるべきポイントを解説
[テンプレあり]レスポンシブ対応は必須条件!?実装方法・ポイントまで徹底解説
レスポンシブデザインの最適ブレイクポイント【最新版】

divタグとは

まずdivタグとは何なのかということから説明します。

読み方は「ディブ」で、英語の「divided」が由来となっていて、「分かれた、分配された」という意味があります。

divタグは、各コンテンツをグループ化する際に使用するブロック要素のタグです。
単体では特に意味を持たないタグですが、要素をdivタグで囲うことで、コンテンツの幅や余白となる部分を指定することができます。

SEO的観点から見ると、divタグを扱うことによる直接的なSEOへの影響はありません。ただdivタグを不適切に扱うことで、クローラビリティの低下に繋がってしまう恐れがあります。
具体的には、複数の項目を並べて提示する時などに注意が必要です。リストタグ(ulタグ、olタグ、liタグ)ではなくdivタグをマークアップすると、各項目の重みづけに差が生じる可能性がでてくるので、こうなるとクローラーが文書の意図を理解しづらくなるというわけです。

divタグに限りませんが、何らかのコーディングなどをした際は、サイトやページの再確認を忘れずにすることが重要になってきます。

divタグの属性について

次に、divタグの3つの属性について解説していきます。

divタグによるブロックレベル要素を使用することで、任意の範囲をブロックレベル要素としてまとめることができます。

divタグの主な属性として、class属性、id属性、style属性があり、グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。
例えば、この要素にclass属性やid属性を指定することで、任意の範囲にスタイルを適用できるようにもなります。

それでは、それぞれの属性の記述方法について、項目ごとにさらに詳しく見ていきましょう。

これより本文で出てくるpaddingは、上下左右の余白をまとめて指定するCSSプロパティであり、px,%,pt,emといった値で指定します。
※初期値は0です。borderとは、上下左右のボーダーラインの太さや色をまとめる一括指定CSSプロパティと呼ばれています。
※0の場合は、pxなど単位は記載しなくて良いとなっています。

class属性について

はじめに、class属性について具体的な記述方法を紹介していきましょう。

class属性とは、主に、CSSなどの外部ファイルと連携するために指定する属性になります。
まず、divタグの扱い方として、の中に、class属性を記載していきます。

HTMLマークアップの場合

<div class="box">株式会社ヒトノテ</div>

CSSの場合

「要素名 クラス名 {プロパティ名:値;}」という記載の仕方になります。
※要素名は省略できます。

以下に、具体的にCSSの記述方法を紹介します。

CSS記述の場合、

1行目 div.box
2行目 { padding:10px;
3行目 border:1px solid #blue;
4行目 }

という以下のような記載の仕方となります。

div.box
{ padding:10px;
border:1px solid #blue;
}

style属性について

次に、style属性について解説していきます。
style属性の場合は、前述したclass属性とは違い、HTMLとCSSでファイルを分けなかった場合、HTMLのコード上でCSSを記載する方法と覚えておくと良いでしょう。

具体的には、以下のような記載の仕方となります。

HTMLマークアップの場合

<div style="padding:10px; border:1px solid #blue;">株式会社ヒトノテ</div>

このようにstyle属性は、HTML上で直接CSSを適用する際に使う属性となっています。

id属性について

最後に、id属性について解説していきます。

id属性は、一番目のclass属性と同じように、主に、CSSなどの外部ファイルと連携するために指定する属性です。HTMLの記載方法は以下のように、class属性と同様、

株式会社ヒトノテと記載します。

CSSの記述で、id属性とclass属性との違いが出てきます。

id属性は、「要素名 #id名 {プロパティ名:値;}」という記載方法になります。※要素名は省略できます。
 
CSSの記述では、

1行目 div#box {
2行目 padding:10px;
3行目 border: 1px solid #blue;
4行目 }

という記載の仕方となります。

具体的には、以下のようになります。

div#box {
padding:10px;
border: 1px solid #blue;
}

注意点として、class属性では同じ名前を1ページ中に何度使っても支障はないのですが、id属性の場合、同じ名前は、1ページ中に1度しか使えないため、注意が必要です。

基本的なdivタグの使用方法について

それでは、次に、divタグを用いる際の基本的な使用方法について解説します。
全てにおける共通点は、開始タグのからはじめて、終了タグのでコンテンツを囲うように使用して記述することです。

実際の使用例を見ていきましょう。

1行目 <div>
2行目 <img src=”img.jpg” alt=”静止画像”>
3行目 <p> 株式会社ヒトノテ </p>
4行目 </div>

のように記述します。

<div>
<img src="img.jpg" alt="静止画像"> 
<p>株式会社ヒトノテ</p>
</div>

上記の使用例では、画像を表示するためのimgタグとpタグを一括りにするために、<div>から</div>で囲っています。

このように、divタグは、CSSを使う際など、範囲を一括りにしたい時に使用すると考えてください。
ただし注意点としては、コンテンツの意味を考えずにdivタグを多用してしまうことは避けるようにしてください。divタグを使う前に、他に適したタグが無いのかを確認してから使うようにしましょう。

その他のdivタグ使用方法について

ここまでdivタグの大まかな属性と、具体的な記述方法を解説してきました。
ここからは、サイトを構築するうえで、すぐに役立つ実戦的なその他のdivタグの便利な使用方法について解説していきます。

divタグを使うことにより、コードが一括りに見やすくなり、余分な手間が省けるため、ぜひ、覚えておいてください。

divタグの位置を中央に指定する方法

続いて、divタグでテキストや画像を中央に寄せたい場合の方法を解説します。
簡単に言うと、divタグの中の要素(テキストや画像)に対する位置指定を行なう方法になります。CSSの「text-align」というプロパティを使用します。

それでは、当社を例にとって、実際に記述していきましょう。
まずHTMLでは、<div class=”box”>株式会社ヒトノテ</div>と記載します。

次にCSSで、

1行目 box {
2行目 text-align: center;
3行目 padding:10px;
4行目 border:1px solid #blue;
5行目 }

と記載します。

box {
text-align: center;
padding:10px;
border:1px solid #blue;
}

そうすると、『株式会社ヒトノテ』が中央に表示されます。
ちなみに中央だけではなく、右寄りにしたい場合は、

text-align:right;

左寄りにしたい場合は、

text-align:left;

と記載すれば文章や画像などの位置を調整できます。

divタグでスクロールする方法

次にdivタグを使用して、スクロールする方法を解説していきます。
HTMLで記載したdivタグをスクロールさせるようにするには、CSSで「overflow」プロパティを使用する必要があります。
overflowは、HTMLタグのボックス範囲内に収まりきらない文字や画像などの情報がある時などに、表示方法を決めるプロパティになります。

まずHTMLで、位置調整の時と同様、<div class=”box”>株式会社ヒトノテ</div>と記述していきます。
では、横スクロールさせる場合から解説していきましょう。CSSでは、横スクロールの場合【x】を使います。

具体的には、

1行目 .box{
2行目 overflow-x:auto;
3行目 white-space: nowrap;
4行目 }

という記述方法になります。

box{
overflow-x:auto
white-space: nowrap;
}

縦スクロールの場合は【y】と記述します。
具体的には、

1行目 .box {
2行目 overflow-y:auto;
3行目 }

というような記述となります。

box { 
overflow-y:auto;
}

このように、overflowで横方向を指定する時は「overflow-x」、縦方向を指定する時は「overflow-y」と覚えておけばOKです。

まとめ

本記事では、divタグについて詳しく解説してきました。
divタグは、特に意味を持つわけではありませんが、多数の要素を一括りにする役割を持っています。

また今回は触れませんでしたが、同じ意味を持つタグとしてspanタグや、divタグと似たタグとしてsectionタグもあります。同じような役割があるタグでも、タグの意味を理解して適切なタグを使うことが大切になってきます。似たタグ同士の小さな差まで、しっかりと理解し、使用するタグの判断ができるようにしておくことで最適なタグを使うことができるようになります。

HTMLやCSSを扱う際に、divタグは重要な要素の1つとなります。直接的なSEOへの影響はありませんが、不適切に使うことで、クローラビリティに影響が出る点を理解して、活用するようにしましょう。

その他のタグに関する記事はこちら
h1タグの正しい使い方とは?注意点もまとめてご紹介!
strongタグとは?SEO効果の有無やタグの設置方法などについて解説!
SEOにおいて重要なheadタグの書き方 タイトル、カノニカルetc

ヒトノテロゴ

執筆者:川口享晟

株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。

ヒトノテ坪昌史

監修者:坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。

WEBサイトの問題点・改善案を無料診断

    送信することで、プライバシーポリシーに同意したものといたします。