「HTML超入門！押さえておきたいマークアップの基本」では、汎用的なタグについて紹介しました。特別な意味を持たない「div」と「span」タグについて解説します。これらのタグは文書構造を示す特別な役割はありませんが、スタイルを適用するために使用されます。デザインの調整などには、id属性やclass属性と併用して利用されます。

役割

複数の要素を1つに束ねる役割

束ねた複数の要素の親要素となります。

装飾のためのタグである

divの特徴

displayプロパティにblockが設定されている

コンテンツをグループ化したいが、適切なタグが当てはまらない場合などに使用する。

ブロックレベル要素で、要素のまとまりに対してスタイルを適用したい場合に使います。ブロックに対するデザインに使います。

spanの特徴

displayプロパティにinlineが設定されている

特定の文字にスタイルを適用したい場合などに使用する

インライン要素で、文章の一部にだけスタイルを適用したい場合に使います。文字のデザインに使います。

サンプルコード

spanタグでは、noticeクラスのスタイルを使用して特定の範囲を赤字にしています。また、divタグでは複数のp要素をまとめています。idセレクタfooterのスタイルでは、文字を小さくし、色をグレーにしています。divタグ自体には青枠が付いています。2つの子要素は文字が小さくなり、グレーになっていることがわかります。継承されているプロパティとされていないプロパティがあることもわかります。

divとspanは文書構造には意味を持ちませんが、デザインのために使用されるため、現代のWeb開発では非常に頻繁に使用されます。その特徴をしっかり押さえておく事が大事です。

フォント・行

JavaScriptでプログラミングの基本的概念を学ぼう！

Xでポスト