DIV/SPAN htmlタグ・要素／区画・区分・範囲内セレクタ設定

DIV/SPAN タグ・要素とは？

DIV/SPAN htmlタグ・要素

DIV/SPANタグ・要素とは

　divタグはブロックレベル要素で区分・区画を表すdivisionの略、spanタグは範囲を表すインライン要素でグループ化する為に利用し、W3C仕様上は、id属性、class属性の指定がその主な用途とされ、後述のその他の属性も利用できますが、「それ以外の表示上の特別な意味は定義されていない」とあります。

　ただ、divタグは、ブロックレベル要素である為、<div></div>で括られたブロックは見た目上、前後で改行されます。

　この点はW3C仕様上にも同じブロックレベル要素であるpタグとdivタグを使った文節の例が示されていますが、段落用途のpタグが次行との行間が広くなるのに比し、<div></div>タグの前後は、行間が詰められた状態になります。

　前述のようにid、class属性以外について特別な意味は定義されていないのですが、ブラウザの挙動として一般にはこのようになると記されています。

要素	意味		用途	使用例
div	division	区分・区画	装飾設定や言語指定に利用	<div></div>
span	span	範囲	装飾設定や言語指定に利用	<span></span>

各要素・タグの属性

　divタグでW3C非推奨となっているタグは下記の通りです。

非推奨
属性	意味	用途
align	align/alignment	位置指定／設定値：left \| center \| right \| justify

　divタグ、spanタグに設定可能な属性は下記の通りです。

属性	意味	用途
id	identify	タグ識別子・参照設定(セレクタ)
class	class	参照設定(セレクタ)
lang	language	国・地域言語を設定
dir	direction	右書き・左書きの方向指定
title	title	ブラウザ上でタグをポイントすると表示されるテキストを設定
style	style	CSSインライン設定用
※イベント	イベントハンドル	(マウス)ポインタの動作や状態に応じて処理を記述するための設定

id

　idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

(アンカーリンクの識別子)
アンカー(aタグ)以外のタグの識別子
scriptやobjectタグの識別子
外部CSS設定用idセレクタ

等々です。

class

　classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

　また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

　主な用途は

外部CSS設定用classセレクタ

です。

id と class

　id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

　id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。