HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdiv要素とは？基本的な使い方とスタイリング方法を徹底解説

HTMLのdiv要素とは？

<div>は、HTMLで複数の要素をひとつのグループにまとめ、CSSを使って一括でスタイルを適用するための汎用コンテナです。div要素自体はデフォルトでは空であり、中にHTML要素を配置して初めて機能します。<div>タグは開始タグと終了タグがペアで構成されています。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 1px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
       }
       .blue {
           background-color: royalblue;
           border: none;
       }
       .purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>2つの小さなdivを内包するdivです</h4>
           <div class="square blue">1</div>
           <div class="square purple">2</div>
       </div>
</body>
</html>

<div>タグについて最も重要なポイントは、セマンティック（意味的）なHTML要素ではないという点です。つまり、タグ名を見てもその要素が何を表しているのかが分かりません（<caption>や<address>、<section>などの要素とは異なります）。

divを使いすぎると、スクリーンリーダーを利用するユーザーにとってアクセシビリティ上の問題が生じる可能性があります。より適切なセマンティックなHTML要素が存在しない場合の「最後の手段」として<div>を使うことを心がけましょう。

<div>コンテナはブロックレベル要素です。開発者がCSSやインラインスタイルで明示的に制御しない限り、ビューポートの幅全体を占有します。また、displayプロパティをinline系の値やflexなどに変更しない限り、要素の前後には改行が入ります。

レイアウトの観点では、divは非常に柔軟です。別のdivの中に入れ子にすることもできます。ただし、<div>コンテナは段落を分断してしまうため、<p>タグの中に<div>タグを入れ子にするのは避けてください。さらに、見出しタグ（<h1>、<h2>など）の中に<div>を挿入すると予期しない挙動が発生することがあります。見出し側が優先され、<div>が無視されるように見えるのです。

divで使える属性

HTMLの<div>要素では、HTMLのイベント属性とグローバル属性の両方を利用できます。イベント属性とは、ユーザーがWebページ上で何らかの操作を行った際に発動する属性のことです。たとえば、画像がクリックされたときに動作するonclickや、マウスカーソルが要素の上に乗ったときに発火するonmouseoverなどが該当します。一方、グローバル属性はすべてのHTML要素で共通して使える属性です。

これらのHTML属性の完全なリストは、Mozilla Developer Network（MDN）の公式サイトで確認できます。

divへのスタイル適用方法

<div>へのスタイリングはとても簡単で、複数の方法があります。まずインラインスタイルでは、<div>にstyle属性を追加し、スタイルプロパティと値を文字列として直接記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>インラインスタイル</title>
<body>
       <div style="width:500px;border: 3px solid black; padding: 20px;">
           <h4>2つの小さなdivを内包するdivです</h4>
           <div style="background-color: royalblue; border: none;">1</div>
           <div style="background-color: purple; border: none;">2</div>
       </div>
</body>
</html>

スタイルは、HTMLドキュメントの<head>内の<style>タグや、外部スタイルシートでも定義できます。この場合に活躍するのが、<div>のclass属性とid属性です。

classは、同じスタイルを共有したい複数の要素に対して付与できます。一方、idは1つのHTMLドキュメント内で1回しか使用できません。学校に例えるなら、同学年・同い年・同じ担任・同じ教科の生徒たちを「class」というグループにまとめられる一方で、生徒一人ひとりには、その人自身を表す固有の「id」があるというイメージです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 3px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
       }
       #blue {
           background-color: royalblue;
           border: none;
       }
       #purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>2つの小さなdivを内包するdivです</h4>
           <div id="blue" class="square">1</div>
           <div id="purple" class="square">2</div>
       </div>
</body>
</html>

class属性とid属性は、1つの<div>に同時に指定することも可能です。idはclassよりも具体的なセレクタとして扱われ、優先度が高いため、特定の<div>だけに適用したいスタイルにはid属性を使うことで、classによるスタイルを上書きできます。

まとめ

今回は、<div>とは何か、どんな属性が使えるのか、そしてどのようにスタイルを適用するのかを学びました。displayプロパティが<div>コンテナにどのような影響を与えるのかをさらに詳しく知りたい方は、ボックスモデルやフレックスボックスモデルに関する記事もあわせて参照してください。

  1. トップレベルドメイン（TLD）とは？種類と役割をわかりやすく解説

    ドメイン名を入力する際、必ずドットの後ろに「.com」「.net」「.org」のような文字列を続ける必要があります。この数文字こそが、入力したアドレスを正しい目的地へ導くために不可欠な要素であり、「トップレベルドメイン（TLD）」と呼ばれています。TLDは常にドメイン名の末尾に配置されますが、果たしてそれほど重要なのでしょうか？実は、この数文字を読むだけで、そのサイトにどんな情報が掲載されているのかをある程度判断できるのです。逆に、TLDを正しく入力しなければ、意図しないサイトにアクセスしたり、どこにもたどり着けなかったりする可能性もあります。トップレベルドメイン（TLD）の基本トップレベルド

  2. Windows Sysinternalsとは?概要から使い方まで徹底解説

    自分のWindowsパソコンを完全にコントロールできたら素晴らしいと思ったことはありませんか?ほぼすべてのWindowsプロセスやアプリケーションの内部を覗き見できるだけでなく、アプリがアクセスしているファイルやレジストリエントリをリアルタイムで確認できるのは、実に魅力的な機能です。 Sysinternalsは、最も信頼性が高く強力なWindowsシステム管理ツールキットのひとつです。そのほとんどのユーティリティはシンプルなEXEファイルなので、USBフラッシュドライブに入れておけば、持ち運び可能なシステム管理ツールとしていつでも活用できます。 Windows Sysinternalsとは?