sectionごとに背景色を切り替えるデザインの作り方｜読みやすさ向上テクニック

1 実装のポイント

セクションごとに背景色を変えるだけで、読みやすい構成やLP風のデザインが簡単に作れます。HTMLとCSSのみで実装可能です。

<!-- セクションごとに背景色を切り替えるサンプルHTML -->
<section class="section-bg bg1">
  <h2>セクション１（薄イエロー）</h2>
  <p>ここは白背景のセクションです。</p>
</section>

<section class="section-bg bg2">
  <h2>セクション２（薄グレー）</h2>
  <p>背景色を切り替えるだけで読みやすさが向上します。</p>
</section>

<section class="section-bg bg3">
  <h2>セクション３（薄ブルー）</h2>
  <p>LP風のデザインにも活躍します。</p>
</section>
  

2 汎用CSS

/* -------------------------------------------
 * sectionごとに背景色を切り替えるデザイン
 * ----------------------------------------- */

/* セクション全体の基本スタイル */
.section-bg {               
  padding: 60px 20px;       /* 上下左右の余白 */
}

.bg1 {                      
  background: #ffffcc;      /* 薄イエロー背景 */
}

.bg2 {                      
  background: #f7f7f7;      /* 薄グレー背景 */
}

.bg3 {                      
  background: #eef6ff;      /* 薄ブルー背景 */
}
  

3 完成イメージ

4 代用プラグイン

・Advanced Editor Tools（旧 TinyMCE Advanced）
・VK Blocks
・Snow Monkey Blocks
ブロックエディタを使う場合は、これらでも同様の背景切替ができます。

5 まとめ

背景色を切り替えるだけで、ページの可読性・デザイン性が大幅に向上します。
HTMLとCSSだけで簡単に導入できるため、初心者にもおすすめです。