HTTML タグの使い方 divの意味や役割を解説

本記事は広告が含まれる場合があります HTML

【HTML divタグの使い方】divの意味や役割を解説

divタグはHTMLコーディングをする際に非常に多くの場面で利用します。

しかし、imgタグやaタグと違って直接見た目や動作に変化がないので、HTML初めて勉強した人はいまいち意味や役割がわからない方も多いのではないでしょうか。

そこで今回は、divの意味や役割などdivタグの使い方の基本を解説します。

 

この記事を読むと分かること

  • divタグの概要について
  • divタグを使う上での注意点について
  • divタグの使い方について
  • divタグとspanタグの違いについて

 

 

divタグとは?

divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使用されます。

divタグは、img(画像)タグやa(リンク)タグ、h(見出し)タグなどと違ってそれだけでは意味を持たず、他のhtml要素をグルーピング化してコンテナ的な役割を果たしています。

divタグで各HTML要素をグルーピングしてレイアウトを作成する

 
ある部分をグループ化してレイアウトを変えたい」といった時などにdivタグを使用する。

■(参考)タグ一覧とそれぞれの役割

タグ名 意味・役割
pタグ名 文書内の段落を表す
h1~h6タグ 文書内の見出しを表す
ulタグ・olタグ・liタグ 文書内の箇条書きリストを表す
tableタグ・trタグ・tdタグ 文書内の表を表す
divタグ 意味や役割はない

 
 

divタグの使い方

divタグは、多くの場合下記のような形式で使用します。

■divタグを使用する上で抑えるべきポイント

  1. グループ化したい要素をdivタグで囲う
  2. class属性で名前を付けてCSSで装飾する
(2)の「class名をつけてCSSで装飾する」は、divタグの文法上の決まりではありませんが、divタグ自体は意味を持たないので、多くの場合CSSで装飾します。

 

グループ化したい要素をdivタグで囲う

まずはグループ化したい要素をdivタグで囲います。

グループ化したい要素をdivタグで囲う。

これでdivタグで囲った部分をグループ化することができました。

ただし、divタグだけでは見た目上の変化はないので、このdivタグにCSSを適用して装飾をすることが一般的です。
 

divタグにclass属性を指定してCSSを適用する

つぎに、divタグにclass属性を指定してCSSを適用していきます。

divタグは他の箇所にも複数使用されることが多いので、通常他のdivタグと区別ができるようにclass属性の指定することが一般的です。

class属性を指定するには、以下のように記述してあげればOKです。

これでdivタグで囲ったグループに対して、上の例では「box1」というclass名を付けることができました。
 

あとはこちらのclass名に対して好きなスタイルを付けていくことが可能です。

付与したclass名に対して好きなスタイルを付けていくことができる。

 

divタグをのかわりに別のタグを使うことも

divタグはそれ自体が意味を持たないので汎用的に使えますが、あえて意味を持たせたい場合は別のタグを使う場合があります。

たとえば、極端な話ですが、見出し(hタグ)やリスト(ul、li)、段落(p)の代わりにすべてdivタグを使ってCSSで装飾することも可能ですが、こういったやり方は検索エンジンが意味を理解しにくくなるので、推奨されません。

また、最近ではより意味づけ(セマンティック)を意識してタグを使うシーンも増えました。

例えば下記のようなタグは、divタグと同じように直接見た目に影響を与えませんが、headerはヘッダー部分、footerはフッター部分など意味をもっ、適切に使うと検索エンジンも意味を理解しやすくなります。

タグ名 意味・役割
header 導入的なコンテンツつまり、ヘッダー部分を指します。詳細はこちら
footer 直近の区分コンテンツまたは区分化ルート要素のフッターを表します。詳細はこちら
main ページ内の主要な内容を指します。詳細はこちら
article ページ内で自己完結している、個別に配信や再利用を行うことを意図した構成物を表します。詳細はこちら
aside 余談要素・補足事項をします。詳細はこちら
nav ナビゲーションリンクを提供するためのセクションを表します。詳細はこちら
section 文書の自立した一般的なセクション (区間) を表します。詳細はこちら

 
たとえば、ヘッダー部分のグルーピングを<div id="header">〜</div>ではなく、代わりに<header>〜</header>を使うことで、検索エンジンもヘッダー部分であるということを理解しやすくなり、SEOの一助になると言われています。

より意味づけを意識したタグを使う
 

ただしあくまで一般的なガイドラインをもとに制作者が解釈して使用しているので、「ここは〜〜を使わないと正解・不正解」とったレベルで神経質に気にしなくても良いかと思います。

divタグを使用する上での注意点。

 

 

divタグとspanタグの違い

なおHTMLを勉強し始めたばかりの初学者にとっては、spanタグとdivタグの使い方の違いが分からない方もいらっしゃるのではないでしょうか。

spanタグも「意味・役割を持たないスタイリング目的で使用されるHTMLタグ」だと聞いたけど、divタグと何が違うの?

 

divタグはグループ化したブロック全体のスタイリングに使用されるのに対して、spanタグは一般的に文章の中の一部のスタイリングに使用されます

■divタグとspanタグの違い

  • divタグ・・・グループ化したブロック全体のスタイリングに使用される
  • spanタグ・・・文章の中の一部のスタイリングに使用される

divタグはグループ化したブロック全体のスタイリングに使用される。

spanタグは文章の一部のスタイリングに使用される。

こういった使い分けがされる理由は、全てのHTMLタグにはコンテンツモデルと呼ばれる「〇〇要素の中には、△△要素が配置できる」といった配置ルールが決まっている為です。

なおdivタグとspanタグのコンテンツモデルは以下のようになっており、例えばspanタグの中にはpタグやh1~6タグといったタグは入れられないので、divタグのようにブロック全体をspanタグで囲うといったことはできません。

divタグとspanタグのコンテンツモデル比較図。

■(参考)spanタグの誤った使用例

spanタグの悪い使用例。

また逆にspanタグはpタグやh1~h6タグといった要素の子要素として使用することができますが、こちらもコンテンツモデルの決まりからpタグやh1~h6タグの配下にはdivタグは使用できないといったルールがある為、spanタグの代わりにdivタグを使用することはできません。

pタグとh1~h6タグのコンテンツモデル比較図。

■(参考)divタグの誤った使用例

divタグの誤った使用例。

 

(併せて読みたい関連記事)

その他にもdivタグで囲った要素はブロックレベル要素の性格を有するのに対して、spanタグで囲った要素はインライン要素の性格を有するといった違いもあります。

これらの違いについては以下のブログ記事にて詳しく解説していますので、気になった方はこちらも併せてご覧頂けると良いかと思います。

HTML ブロックレベル要素とインライン要素の違いと特徴

インライン要素・ブロックレベル要素とCSS「display」の使い方

 

 

まとめ

まとめです。今回はHTMLタグ、divタグの正しい使い方について解説しました。

ある部分をグループ化してレイアウトを変えたい」といった時などにdivタグを使用する。

divタグは最も頻出度の高いタグの1つなので、正しい使い方を覚えて適切な場面で使えるようにしておくと良いかと思います。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【おすすめレンタルサーバー比較】WordPress対応サーバー5選+

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-HTML