STUDIOのセクションとボックスの違いを徹底解説！【画像で見るHTML/CSSの考え方】
STUDIOでWebサイトを作り始めたとき、「セクション」と「ボックス」の違いに戸惑う方は多いのではないでしょうか？
「なんとなく使っているけど、どう使い分けるのが正解なの？」 「コーディングの知識がないから、違いがよく分からない…」
そんな疑問を解決するため、今回はSTUDIOのセクションとボックスの違いを分かりやすく解説します。
結論から言うと、この2つの違いは「背景の広がり方」と「HTMLタグ」の2つです。
HTML/CSSの考え方と合わせて理解すれば、誰でも簡単に使い分けられるようになりますよ。
1. セクションとボックス、機能面での決定的な違い
まずは、見た目と機能に関わる違いから見ていきましょう。
次の動画を見てください。こちらはセクションとボックスの違いです。
STUDIOのセクションは、「背景は画面幅いっぱいに広がる」一方で、「中身のコンテンツは指定した幅に収まる」という特徴を持っています。
一方、ボックスは背景も中身も、すべて指定した幅に収まります。この違いが、Webサイトのデザインを大きく左右します。
以下の画像は、要素の横幅を設定するパネルです。
もし、このデザインをCSSで書くとどうなるか見てみましょう。
セクションは、「背景が画面幅いっぱいに広がる親要素」と「コンテンツの幅を制御する子要素」の2つの役割を、内部的に兼ね備えています。
HTML
<section class="section">
<div class="content">
</div>
</section>
CSS
/* CSSでの設定イメージ */
.section {
/* 背景を画面幅いっぱいに広げる */
width: 100%;
background-color: #333333;
}
.content {
/* コンテンツの幅を最大1080pxに制限する */
width: 100%;
max-width: 1080px;
}
このように、セクションは背景とコンテンツの幅を別々に制御できるため、デザインの幅が格段に広がります。
2. SEOにも影響する！HTMLタグの違い
セクションとボックスには、もうひとつ決定的な違いがあります。それは、デフォルトで設定されているHTMLタグです。
画像のように、セクションのタグは＜section＞、ボックスのタグは＜div＞がデフォルトで設定されています。
このタグは、私たちが普段意識することはありませんが、Googleなどの検索エンジンがWebサイトを理解する上で非常に重要です。
＜div＞（ディブタグ）は、ただの「箱」を意味するタグで、特に意味を持ちません。一方、＜section＞タグは、ページの主要なコンテンツを意味するタグです。
ページを大きなコンテンツのまとまりごとに＜section＞で区切ることで、検索エンジンは「このWebサイトは、こういう内容のセクションで構成されているな」とページの構造を正しく把握しやすくなります。これがSEO対策にもつながるのです。
まとめ：結局、どう使い分ければいいの？
STUDIOでの使い分けは、以下のルールを覚えておきましょう。
- ページの大きな区切りには、左上の「セクション」を使います。
- 背景を画面幅いっぱいに広げたいとき
- Webサイトの大きな構造（会社概要、サービス一覧、お問い合わせなど）を作るとき
- セクションの中の小さなまとまりには、2番目の「ボックス」を使います。
- 画像とテキストをセットで並べるとき
- 複数のボタンを横並びにするとき
セクションで大枠を作り、ボックスでその中の詳細なレイアウトを整える。
このシンプルなルールを意識するだけで、誰でも見やすく、SEOにも強いWebサイトを効率的に作れるようになりますよ。ぜひ、今回の内容を参考にデザインしてみてください。
