このページについて
このページではHTMLで使えるdivの使い方を解説しています。
divタグ
divはドキュメント内にセクションを定義する機能を持っています。このタグはブロック属性と言って、設定すると自動で改行扱いになるスタイルを持っています。
そして対になるのがspanタグなんですが、このspanは「インライン要素のセクションを定義」ということで、divと全くの正反対の性質を持っています。
divタグの書き方
divはシンプルで、特定のブロックを入れたいところに書くだけでOKです。中身は空っぽでも構いません。もともと空っぽのところに挿入し、JavaScript等で後から操作するという使い方がメインなのです。
<html>
<head>//色々書く</head>
<body>
<div>//処理があれば書く
</div>
</body>
</html>こんな感じで、何かしらの処理などがある場合はdiv内に書きます。
divにdivを入れ子にする構造も可能です。
<div>ブロックA<div>ブロックAの中のB</div></div>この場合は以下のようなブロックが出来上がります。
ブロックA
ブロックAの中のB
枠線などがないため非常に分かりにくいと思いますが、自動で改行されているであろうことだけはわかると思います。divの中には全てのコンテンツを入れることが可能なので、画像とかも可能です。
divタグで使える属性
divは固有の属性はありませんが、グローバル属性・イベント属性をサポートしています。特にid属性を付与すればgetElementbyIdで検索することができるのでもしJavaScriptでdivを操作したい場合はidを付与しておきましょう。
まとめ
divはブロック要素を持つ空っぽのセクションを定義します。対になるspanタグとは使い分けが必須です。JavaScriptで後から操作するのであれば、あらかじめidを付与しておきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。