こんにちは、制作のSです。

前回は、marginとpaddingについて学習しました。
その後、要素の背景に画像を設定する際にもmarginやpaddingで調整していたのですが、
サイズが決まっている場合は「width」や「height」を使うといいと上司に教えていただいたので
復習がてらにコラムを書いていきます。

こちらは前回コーディングしたものです。

要素の中身が左に寄っていて気になるので、中身を中央揃えにしていきます。

要素内のテキストの位置を指定するプロパティ「text-align」

text-align: center; /*中央揃え*/
text-align: left; /*左揃え*/
text-align: right; /*右揃え*/

css

.column {
font-size: 3rem;
margin: 0 auto;
width: 300px;
height: 200px;
text-align: center;
p:first-child {
background-color: #909090;
}
p:nth-child(2) {
background-color: #bbb;
}
p:last-child {
background-color: beige;
}
}

要素の背景に画像を指定するプロパティ「background」

css

.column {
font-size: 3rem;
color: #FFF;
margin: 0 auto;
width: 300px;
height: 200px;
text-align: center;
p{
background: url(img001.png) no-repeat center top/cover;
}
}

※テキストが見えやすいように、テキストの色を白にしています。

横幅と高さを調整するプロパティ「widthとheight」

画像が途切れているため、widthとheightで画像の横幅と高さを調整していきます。
画像のサイズは、横220px、高さ130pxです。

css

.column {
font-size: 3rem;
color: #FFF;
margin: 0 auto;
width: 300px;
height: 200px;
text-align: center;
p{
background: url(img001.png) no-repeat center top/cover;
width: 220px;
height: 130px;
}
}

背景を全て表示することができました。
しかし、margin: 0 auto;でセンター揃えにしているはずなのにテキストの位置がずれています。
次回は理解するまで何度も練習したプロパティdisplayについて書いていきたいと思います。