背景色を交互にする

CSSレイアウトテクニック

背景を交互にしましょう

デモはこちら

背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。

HTML

<div class="bg-gray">
  <div class="container">
    <h2>ダミーテキスト</h2>
   </div>
</div>
<div class="bg-gray">
  <div class="container">
    <h2>ダミーテキスト</h2>
  </div>
</div>

CSS

.bg{
background: #07aca1;
color: #ffff;
}
.bg-gray{
background:#999;
}
.container{
max-width:960px;
margin:0 auto;
}

ぜひおためしを!

タイトルとURLをコピーしました