特定の情報をまとめる「div要素」と「span要素」

Webページでは、CSSによってスタイルを指定します。そこで、特定の要素をグループ化して、まとめてスタイル指定するときに「div要素」や「span要素」を使用します。それ自体に意味を持っていませんが、Webレイアウトには欠かすことのできない要素です。

Webデザインを学ぶ上で必要な知識ですから、しっかりと覚えるようにしてください。それぞれに使う用途が異なるので、違いを理解することが大切です。ここでは、「div要素」と「span要素」について、解説をしていきます。

 

ブロックレベル要素をグループ化する「div要素」

HTMLの文章は、h要素やp要素によって見出しや段落を作っていきます。そうやってマークアップすることで、文章に意味を付けてコンピュータに理解させるわけですね。そして、それらの要素をグループにしてまとめるために、「div要素」を使います。

div要素でまとめられた箇所は、一つのブロックとなります。だから、CSSでまとめて同じスタイルを適用することができ、好きなようにレイアウトすることが可能です。その際に、「ID属性」や「class属性」を付けて、区別できるようにするのが主流ですね。

ヘッダーやフッター、サイドバーやメインコンテンツなど、それぞれにグループ分けしてレイアウトを行っていきます。ただし、HTML5では、header要素やfooter要素が追加されているので、それらを使ってレイアウトを行います。

 

インライン要素をグループ化する「span要素」

div要素はブロックレベル要素をグループ化するものですが、「span要素」はインライン要素に適用されます。たとえば、特定のキーワードや文章の色を変えたいときなどに、span要素でマークアップしてCSSでスタイルを指定するわけです。

div要素よりも狭い範囲で適用されるのが、span要素の特徴ですね。span要素だと、インライン要素に適用されるので、内部で改行することは出来ません。だから、改行したい場合であれば、div要素を使う必要があります。

なので、どちらを使うべきか迷ったら、改行があるかどうかで判断しても良いですね。

 

以上、div要素とspan要素について解説をしました。どちらも、利用頻度が多い要素ですから、ちゃんと覚えておきましょう。Webデザインを身に付けるうえでは、絶対に必要な知識だといえます。

サブコンテンツ

このページの先頭へ