3分で簡単にわかる！HTMLのdivとsectionの違いとは？使い分けやコーディングのポイントもITオタクの会社員ライターがわかりやすく解説
<div class=”box”>…</div>
<div class=”box”>…</div>
<div class=”box”>…</div>
class属性は、要素が表すコンテンツの特徴や役割に基づいて命名することが一般的です。具体的には、要素の用途や意味に合わせて、header・footer・nav・mainなどの名前をつけることで可読性や保守性が向上します。
また、同じ意味を持つ要素には同じclass名をつけることで一括して同じスタイルを適用することができるため、わざわざ一つひとつスタイリングする必要がなくなり、効率的に作業ができるので覚えておきましょう。
divとsectionのスタイルの適用方法
div要素やsection要素にスタイルを適用する方法は、それぞれに充てたclass属性を指定してCSSでスタイリングします。以下のCSSは、div要素やsection要素に適用させるCSSスタイル例です。
/* div要素にスタイルを適用する場合 */
div {
background-color: #F0F0F0;
padding: 10px;
}
/* class属性を指定してスタイルを適用する場合 */
.section-1 {
background-color: #F0F0F0;
padding: 10px;
}
/* section要素にスタイルを適用する場合 */
section {
background-color: #F0F0F0;
padding: 10px;
}
これらのCSSスタイリングでは背景色や余白などを指定しています。CSSを適用する際には、divやsectionに充てた適切なセレクター（id名やclass名など）を指定することが重要です。
divとsectionを使い分けて見やすいページを作ろう
div要素は特定の意味を持たないコンテンツを区切るためのものである一方、section要素はより意味的なコンテンツのセクションを定義するためのものです。これらの要素を適切に使い分けることでページの見やすさを向上させることができます。
これらdiv要素とsection要素にとって重要な目的はページの構造が明確で読みやすくなることです。div要素を適切にグループ化することでCSSのスタイルを簡単に適用でき、section要素を使用することで各コンテンツの意味を明確にしてSEO対策にも貢献することができます。
つまり、適切な要素の使い分けと適切なクラス名やID付与により人の目にも見やすく、SEO的にもに優れたページを作ることで質の高いWebページを作れるでしょう。
おすすめの記事
Related Posts
