Miniature businessman on map of Europe. Color tone tuned
Webページを見やすく整えるために欠かせないのが「セクションの区切り」です。
ユーザーが迷わずコンテンツを読み進めるには、視覚的にセクションを分ける工夫が重要です。
この記事では、HTMLとCSS、そして少しのJavaScriptを使って、セクションを美しく・分かりやすく区切るテクニックを紹介します。
見た目に優れたページ構成を目指したい方は、ぜひ参考にしてください。
HTMLでは、意味に応じたタグを使ってセクションを分けることが大切です。以下のようなタグを活用します。
<section>：独立した内容のまとまり<article>：独立性の高いコンテンツ（ブログ記事など）<div>：汎用的な区切り（意味を持たない場合）<header>や<footer>：セクションのヘッダー・フッター的役割<section>
<header>
<h2>サービス紹介</h2>
</header>
<p>私たちのサービスは〜</p>
</section>
これにより、構造が明確になり、SEOにも好影響を与えます。
異なるセクションに異なる背景色を設定すると、視覚的に分かりやすくなります。
.section1 {
background-color: #f0f8ff;
padding: 40px 20px;
}
.section2 {
background-color: #e6e6fa;
padding: 40px 20px;
}
<div class="section1">
<h2>セクション1</h2>
<p>ここに内容が入ります。</p>
</div>
<div class="section2">
<h2>セクション2</h2>
<p>こちらは別のセクションです。</p>
</div>
細い線や太めのボーダーで区切る方法もあります。
hr {
border: none;
height: 2px;
background: #ccc;
margin: 50px 0;
}
<p>前のセクションの内容</p>
<hr>
<p>次のセクションの内容</p>
セクションにアニメーション効果をつけることで、印象的なページが作れます。ここではIntersection Observerを使ってみます。
<div class="fade-section">
<h2>フェードインするセクション</h2>
<p>スクロールすると表示されるエフェクト。</p>
</div>
.fade-section {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.fade-section.active {
opacity: 1;
transform: translateY(0);
}
const fadeSections = document.querySelectorAll('.fade-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('active');
}
});
});
fadeSections.forEach(section => {
observer.observe(section);
});
このようにして、ユーザーのスクロールに合わせてセクションが「登場」する形になります。
スマートフォンなどの画面でも、セクションの見やすさを保つにはレスポンシブデザインが重要です。
.section {
padding: 60px 40px;
}
@media (max-width: 768px) {
.section {
padding: 40px 20px;
}
}
スマホやタブレットでも違和感のないレイアウトが実現できます。
より装飾性を高める方法として、SVGやCSSグラデーションを使うのもおすすめです。
<section class="top-section">
<h2>上のセクション</h2>
</section>
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
<path d="M0,0 C480,100 960,0 1440,100 L1440,0 L0,0 Z" fill="#e6e6fa"></path>
</svg>
<section class="bottom-section">
<h2>下のセクション</h2>
</section>
これにより、単調な区切りから抜け出すことができます。
NG：
<section><p>次の話題です。</p></section>
改善：
<section>
<h2>次の話題</h2>
<p>話題の概要をここに記述。</p>
</section>
区切りの色合いにコントラストが無いと、見づらくなります。背景色と文字色は十分に差をつけましょう。
HTMLで構造的な区切りを設け、CSSで視覚的に演出し、必要に応じてJavaScriptで動きを加える。
この3つの要素をバランスよく活用することで、読みやすく魅力的なWebページが作れます。
特に初心者の方は、まずはCSSで背景色や余白を使ったシンプルな区切りから始め、慣れてきたらアニメーションやSVGでの装飾にも挑戦してみましょう。
「伝わるWebデザイン」は、視覚的な区切りから始まります。ぜひ実際に手を動かして、セクションの区切りをデザインしてみてください。