divタグはHTMLコーディングをする際に非常に多くの場面で利用します。
しかし、imgタグやaタグと違って直接見た目や動作に変化がないので、HTML初めて勉強した人はいまいち意味や役割がわからない方も多いのではないでしょうか。
そこで今回は、divの意味や役割などdivタグの使い方の基本を解説します。
この記事を読むと分かること
- divタグの概要について
- divタグを使う上での注意点について
- divタグの使い方について
- divタグとspanタグの違いについて
divタグとは？
divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使用されます。
divタグは、img(画像)タグやa(リンク)タグ、h(見出し)タグなどと違ってそれだけでは意味を持たず、他のhtml要素をグルーピング化してコンテナ的な役割を果たしています。
■(参考)タグ一覧とそれぞれの役割
| タグ名 | 意味・役割 |
|---|---|
| pタグ名 | 文書内の段落を表す |
| h1~h6タグ | 文書内の見出しを表す |
| ulタグ・olタグ・liタグ | 文書内の箇条書きリストを表す |
| tableタグ・trタグ・tdタグ | 文書内の表を表す |
| divタグ | 意味や役割はない |
divタグの使い方
divタグは、多くの場合下記のような形式で使用します。
■divタグを使用する上で抑えるべきポイント
- グループ化したい要素をdivタグで囲う
- class属性で名前を付けてCSSで装飾する
グループ化したい要素をdivタグで囲う
まずはグループ化したい要素をdivタグで囲います。
|
1 2 3 4 |
<div> <h2>見出し</h2> <p>ここにテキストが入ります/p> </div> |
これでdivタグで囲った部分をグループ化することができました。
ただし、divタグだけでは見た目上の変化はないので、このdivタグにCSSを適用して装飾をすることが一般的です。
divタグにclass属性を指定してCSSを適用する
つぎに、divタグにclass属性を指定してCSSを適用していきます。
divタグは他の箇所にも複数使用されることが多いので、通常他のdivタグと区別ができるようにclass属性の指定することが一般的です。
class属性を指定するには、以下のように記述してあげればOKです。
|
1 2 3 4 |
<div class="box1"> <h2>見出し</h2> <p>ここにテキストが入ります</p> </div> |
これでdivタグで囲ったグループに対して、上の例では「box1」というclass名を付けることができました。
あとはこちらのclass名に対して好きなスタイルを付けていくことが可能です。
|
1 2 3 4 5 6 |
.box1 { width: 300px; height: 150px; border: 2px solid #333; text-align: center; } |
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タグとspanタグの違い
なおHTMLを勉強し始めたばかりの初学者にとっては、spanタグとdivタグの使い方の違いが分からない方もいらっしゃるのではないでしょうか。
divタグはグループ化したブロック全体のスタイリングに使用されるのに対して、spanタグは一般的に文章の中の一部のスタイリングに使用されます。
■divタグとspanタグの違い
- divタグ・・・グループ化したブロック全体のスタイリングに使用される
- spanタグ・・・文章の中の一部のスタイリングに使用される
こういった使い分けがされる理由は、全てのHTMLタグにはコンテンツモデルと呼ばれる「〇〇要素の中には、△△要素が配置できる」といった配置ルールが決まっている為です。
なおdivタグとspanタグのコンテンツモデルは以下のようになっており、例えばspanタグの中にはpタグやh1~6タグといったタグは入れられないので、divタグのようにブロック全体をspanタグで囲うといったことはできません。
■(参考)spanタグの誤った使用例
また逆にspanタグはpタグやh1~h6タグといった要素の子要素として使用することができますが、こちらもコンテンツモデルの決まりからpタグやh1~h6タグの配下にはdivタグは使用できないといったルールがある為、spanタグの代わりにdivタグを使用することはできません。
■(参考)divタグの誤った使用例
(併せて読みたい関連記事)
その他にもdivタグで囲った要素はブロックレベル要素の性格を有するのに対して、spanタグで囲った要素はインライン要素の性格を有するといった違いもあります。
これらの違いについては以下のブログ記事にて詳しく解説していますので、気になった方はこちらも併せてご覧頂けると良いかと思います。
まとめ
まとめです。今回はHTMLタグ、divタグの正しい使い方について解説しました。
divタグは最も頻出度の高いタグの1つなので、正しい使い方を覚えて適切な場面で使えるようにしておくと良いかと思います。
なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。
今回は以上になります。最後までご覧頂き、ありがとうございました。
合わせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
