Webサイトでは、見出しやタイトルの背景に色を付けた**「帯」のようなデザイン**がよく使われます。
CSSで帯を作る場合、特別なプロパティがあるわけではありません。
基本的にはbackground-colorで背景色を指定し、paddingや要素の幅を調整することで作れます。
ただし、文字の後ろだけに色を付けたいのか、コンテンツ幅いっぱいに広げたいのか、画面の端まで広げたいのかによって書き方は少し変わります。
この記事では、CSSで帯を作る基本から、帯の幅や余白を調整する方法まで紹介します。
background-colorで基本の帯を作る
まずは最もシンプルな方法です。
見出しなどの要素にbackground-colorを指定すると、その要素の背景に色を付けられます。
見出しの背景に色を付ける
HTMLは次のようにします。
<h2 class="heading">見出しタイトル</h2>CSSで背景色を指定します。
.heading {
background-color: #e5e5e5;
color: #333;
}これだけで見出しの背景に色が付き、帯のようなデザインになります。
h2などの見出しは通常ブロック要素なので、文字の長さだけではなく、利用できる横幅いっぱいに背景色が広がります。
色を変更したい場合は、background-colorの値を変更します。
paddingで帯の余白を調整する
背景色だけでは、文字と帯の端が近く見えることがあります。
そんなときはpaddingを追加します。
.heading {
background-color: #e5e5e5;
color: #333;
padding: 12px 20px;
}paddingは、要素の内側に余白を作るCSSです。
この例では上下に12px、左右に20pxの余白を作っています。
帯の高さを直接指定するよりも、文字サイズに合わせてpaddingで余白を調整すると扱いやすくなります。
帯の幅を変更する
同じbackground-colorを使っていても、要素の種類やCSSによって背景色が付く範囲は変わります。
帯を作るときは、どこまで背景色を広げたいのかを最初に考えるとCSSを決めやすくなります。
文字の幅だけに帯を付ける
文字の後ろだけに背景色を付けたい場合は、display: inline-block;が使えます。
.heading {
display: inline-block;
background-color: #e5e5e5;
padding: 8px 16px;
}inline-blockにすると、要素の幅が内容に合わせやすくなります。
そのため、
文字の長さ＋padding分
だけのコンパクトな帯を作れます。
見出し全体を強調するというより、ラベルやカテゴリー名のようなデザインにも使いやすい方法です。
横幅いっぱいの帯を作る
反対に、親要素の幅いっぱいまで帯を広げたい場合は、ブロック要素として表示します。
.heading {
display: block;
width: 100%;
background-color: #e5e5e5;
padding: 12px 20px;
box-sizing: border-box;
}width: 100%;によって親要素の横幅に合わせています。
ここでbox-sizing: border-box;を指定すると、paddingを含めた状態で幅を計算してくれるため、意図せず横にはみ出すのを防ぎやすくなります。
画面いっぱいに広がる帯を作る
ブログやWebサイトでは、コンテンツ部分だけではなく、ブラウザの左右いっぱいまで背景色が続く帯を作りたい場合もあります。
この場合は、文章を配置する領域と背景色を付ける領域を分けると作りやすくなります。
外側と内側の要素を分ける
HTMLを次のような構造にします。
<section class="band">
<div class="band-inner">
<h2>見出しタイトル</h2>
<p>ここにコンテンツが入ります。</p>
</div>
</section>CSSはこちらです。
.band {
width: 100%;
background-color: #e5e5e5;
padding: 40px 20px;
box-sizing: border-box;
}
.band-inner {
max-width: 1000px;
margin: 0 auto;
}.bandで背景色を広げ、.band-innerで中身の最大幅を制限しています。
こうすると、背景は広く、文章は読みやすい幅に収めることができます。
Webサイトで横長のセクションを作るときにもよく使える考え方です。
背景とコンテンツの幅を分けて考える
帯を作るときに混乱しやすいのが、「背景をどこまで広げるか」と「文字をどこまで広げるか」を一緒に考えてしまうことです。
画面いっぱいの帯だからといって、文章まで画面の端から端まで広げる必要はありません。
外側の要素で背景を作り、内側の要素でコンテンツ幅を管理すれば、
背景の幅とコンテンツの幅を別々に調整できます。
これは帯だけでなく、Webサイトのセクションを作るときにも使える基本的なレイアウト方法です。
【まとめ】CSSの帯は背景色と幅を組み合わせて作れる
CSSで帯を作る基本となるのは、**background-color**です。
そこから目的に合わせて、
paddingで帯の内側に余白を作るinline-blockで文字幅に合わせるwidth: 100%で親要素いっぱいに広げる- 外側と内側の要素を分けて画面幅の帯を作る
といった方法を使い分けられます。
特に覚えておきたいのは、背景色を付ける範囲と、コンテンツを配置する範囲は別々に考えられるということです。
帯をただ装飾として付けるだけでなく、見出しを強調したいのか、コンテンツのまとまりを示したいのかによって幅や余白を調整すると、使いやすいデザインになります。
まずはbackground-colorとpaddingを使ったシンプルな帯から試してみてください。