divタグとは?使い方やSEOへの影響を解説
divタグ(ディブタグ)は、各コンテンツをグループ化する(1つにまとめる)際に使うHTMLタグです。他に最適なタグがない、CSSでの装飾時に使用することが多いです。
divタグは、直接的なSEOへの影響はありません。しかし、不適切に使うことでクローラビリティの低下につながる恐れがあります。クローラビリティの低下は、SEOへ悪影響を及ぼすため注意が必要です。
本記事では、divタグの意味や使い方、属性を詳しく解説します。
この記事の目次
divタグとは?
まずdivタグとは何なのかということから説明します。
読み方は「ディブ」で、英語の「divided」が由来となっていて、「分かれた、分配された」という意味があります。
divタグは、各コンテンツをグループ化する際に使用するブロック要素のタグです。
単体では特に意味を持たないタグですが、要素をdivタグで囲うことで、コンテンツの幅や余白となる部分を指定することができます。
SEO的観点から見ると、divタグを扱うことによる直接的なSEOへの影響はありません。ただdivタグを不適切に扱うことで、クローラビリティの低下に繋がってしまう恐れがあります。
具体的には、複数の項目を並べて提示する時などに注意が必要です。リストタグ(ulタグ、olタグ、liタグ)ではなくdivタグをマークアップすると、各項目の重みづけに差が生じる可能性がでてくるので、こうなるとクローラーが文書の意図を理解しづらくなるというわけです。
divタグに限りませんが、何らかのコーディングなどをした際は、サイトやページの再確認を忘れずにすることが重要になってきます。
divタグの3つの属性
次に、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への影響はありませんが、不適切に使うことで、クローラビリティに影響が出る点を理解して、活用するようにしましょう。
執筆者:川口享晟
株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。
監修者:坪昌史
株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。
おすすめの関連記事
─ 記事カテゴリから探す ─
WEBサイトの問題点・改善案を無料診断
人気記事ランキング
-
2024.05.30
キーワードマーケティングのやり方とは?SEOの効果が見込める手順を徹底解説
-
2024.05.27
SEOにおけるURL設計のベストプラクティス
-
2024.04.25
ページネーションのSEOにおけるベストプラクティス
-
2024.04.22
E-E-A-Tとは?Googleが評価するコンテンツの基準や対策を解説
-
2021.12.06
レスポンシブデザインの最適ブレイクポイントとは?メディアクエリの書き方も解説
-
2021.07.09
Webコンテンツにおける正しい引用の書き方をマスターしよう!
-
2021.12.22
【徹底比較】さくらのクラウドとAWSの特徴・機能・料金の違いを解説
-
2022.02.21
「note」のユーザー数や年齢層を徹底分析!【2022年版】
-
2022.07.05
WordPressで301リダイレクトを設定する方法とは?初心者でも可能