レイアウトの前に理解しておくこと
CSSでは、背景色や要素の大きさによって見た目が形作られます。
ここでは配置の仕組みではなく、各プロパティが画面上でどう見えるかを軸に基本を整理します。
背景色
background-colorは要素の背景に色を付けるプロパティです。
見出しやボックスの背景に色を付けることで、内容の区切りを明確にしたり、注意喚起したい部分を目立たせたりできます。
文字色と組み合わせることで、読みやすさとデザイン性を同時に高めることができます。
構文
セレクタ{
background-color:値;
}色の指定方法はcolorプロパティと同じです。 詳しくは付録：色の指定方法を参照してください。
コード例
<p>背景色をグレーにします。</p>
<p class="red-a">背景色を赤くして透明度を50％にします。</p>
p{
background-color: gray;
}
.red-a{
background-color: rgba(255,0,0,0.5);
}出力例
背景色をグレーにします。
背景色を赤くして透明度を50％にします。
背景色を強くしすぎると文字が読みにくくなったり、ページ全体が落ち着かない印象になることがあります。
本文の背景は控えめな色にし、強調したい部分だけ色を変えると情報の整理がしやすくなります。
また、背景色と文字色のコントラストが不足すると可読性が大きく下がるため、配色の組み合わせには注意が必要です。
また、背景色を付けると、要素がどこまで存在しているかが一目で分かります。
余白を調整した際に「どこが要素で、どこが間隔なのか」を確認したいときの基準として非常に有効です。
レイアウト確認用として一時的に使うのも定番です。
幅
要素の横方向の大きさを制御します。
広がりすぎや縮みすぎを防ぐための制限も含めて考えます。
構文
セレクタ{
width:値;
}
widthは、要素の横方向の広がりをコントロールするためのプロパティです。
レイアウト上で「どこまで広げるか」「どこで止めるか」を決める役割を持ちます。
widthは要素の横幅の基準値を指定するプロパティで、値にはpx・%・remなど様々な単位があります。
どの単位を使うかによって、幅の決まり方や振る舞いが変わります。
コード例
<div class="width01">
<p class="width02">幅を300pxで指定します。</p>
<p class="width03">幅を親要素の500pxを超える650pxで指定すると要素が親を超えてオーバーフローします。</p>
</div>.width01{
background-color: #cccccc;
width: 500px;
}
.width02{
background-color: #ff000088;
width: 300px;
}
.width03{
background-color: #ff000088;
width: 650px;
}出力例
幅を300pxで指定します。
幅を親要素の500pxを超える650pxで指定すると要素が親を超えてオーバーフローします。
pxは固定指定になります。
親要素であるdivに幅を500pxで指定し、子要素の1番目のpに幅300pxで指定しました。
子要素の2番目のpには650pxを指定したため、親要素を飛び出して650pxの幅となり、いわゆる表示崩れをわざと起こしました。
コード例
<div class="width01">
<div class="width04">
<p class="width05">幅を親要素の80％で指定します。</p>
<p class="width06">幅を親要素の120%で指定します。</p>
</div>
</div>.width01{
background-color: #cccccc;
width: 500px;
}
.width04{
width: 100%;
}
.width05{
background-color: #ff000088;
width: 80%;
}
.width06{
background-color: #ff000088;
width: 120%;
}出力例
幅を80％で指定します。
幅を親要素の120%で指定します。
%は相対指定になります。
親要素であるdivに幅を500pxで指定し、子要素のdivに幅100%で指定しました。
この100%は500pxの100％ということです。
さらにwidth04クラスの付いたdivの子要素の1番目のpに80%で指定しました。
どの要素に対する80%かというと、直近の親要素の100%に対して80％で400px分の幅となります。
逆に2番目のpには120%を指定したため、親要素を飛び出して600pxの幅となり、いわゆる表示崩れをわざと起こしました。
widthを指定しない場合、ブロック要素は基本的に親要素いっぱいに広がります。
widthを指定することで、要素の広がり方を意図的に制限できるようになります。
高さ
要素の縦方向の大きさを制御します。
横幅よりも扱いに注意が必要なプロパティです。
構文
セレクタ{
height:値;
}
heightは、要素の縦方向の広がりをコントロールするためのプロパティです。
width同様、レイアウト上で「どこまで広げるか」「どこで止めるか」を決める役割を持ちます。
heightは要素の高さの基準値を指定するプロパティで、値にはpx・%・remなど様々な単位があります。
どの単位を使うかによって、高さの決まり方や振る舞いが変わります。
コード例
<div class="height01">
<p class="height02">高さを100pxで指定します。</p>
<p class="height03">高さを50%で指定します。</p>
</div>
<div class="height04">
<p class="height05">高さを30％で指定します。</p>
</div>.height01{
background-color: #cccccc;
height: 250px;
}
.height02{
background-color: #ff000088;
height: 100px;
}
.height03{
background-color: #ff000088;
height: 50%;
}
.height04{
background-color: #aaaaaa;
height: 100%;
}
.height05{
height: 30%;
}出力例
高さを100pxで指定します。
高さを50%で指定します。
高さを30％で指定します。
1つ目の親要素となるdivに250pxの高さを指定したため、divの中身は250pxの高さになります。
子要素の1番目のpは100pxの高さで指定しています。
2番目のpは50%の高さで指定したため、親要素の250pxの半分で125pxの高さが出ています。
もう一つのdivには100％の高さを指定して、子要素のpに高さの30％を指定しました。
ところが、親要素に高さの基準がないため、30%を計算できず、結果として高さが指定されていない状態になります。
これはスペルミスなどの不具合ではなく、heightを100%で指定していても、親要素に高さが指定されていなければ基準が存在しないためです。