img画像と文字は基本的に重なることは無いですが、背景が画像の場合はその上の文字と
重なってしまう事があります。
その重なりを避けるにはスタイルシートを使います。
画像や文章がどのように配置されているかのイメージ
下は背景の上に画像と文章が配置されたイメージです。通常は上から見ているものと思って
ください。画像と文章は同じ高さにあるので上から見ても重なっていません。
横から見たイメージ
img画像
文章がここに書かれている
背景
上から見たイメージ
img画像
文章 同じ高さにあるので重ならない
背景画像は文章と重なる事がある
しかし、背景が画像の場合、上の文章と違う高さにあるので重なる事が考えられます。
背景画像と文章は、配置を考えないと重なってしまう。
背景は風と樹と空とフリー素材さんのものを使わせていただきました。
重ならないためには、どちらかをずらさなければなりません。
敷地の上に立っている人に合わせて敷地を動かすのは無理です。
やはり、上に載っているものを動かさないといけません。ということで文章を動かします。
横の配置位置を変えるtext-align
これは以前「枠の中の背景に画像を使いたい!」で説明しました。
背景画像をずらす方法も「枠の中の背景に画像を使いたい!」に書いてあります。
- text-align:left
- 文字を左寄せにする。
- text-align:center
- 文字を真ん中あわせにする。
- text-align:right
- 文字を右寄せにする。
text-align:left 左寄せ
text-align:center 中央寄せ
text-align:right 右寄せ
文章の縦の配置にはline-heightが使える
line-heightについては「ナビゲーションをつけるの巻」で説明しました。
- line-height
- 行の高さを指定します。文字の大きさが25ピクセル(px)の時に
line-height:45pxとすると、残った20pxを半分ずつ文字の上と下に配置します。
つまり、上と下に10px分の余白が出来ると言うことです。
下の画像は高さが45ピクセルです。ただし、車の屋根が10ピクセル飛び出しているので、
オレンジの部分は画像の上から10ピクセル目からです。
line-heightの指定なし
line-height:45px
marginとpadding
marginについては「画像の隣に文章を配置したい」で
paddingは「色つきの枠で文章を囲みたい」で取り上げました。
- margin
- 自分と、自分の外側との間の間隔指定です。
- padding
- 自分と、自分の中身との間の間隔指定です。
margin指定なし
margin-left:20px
下の3つは全部、text-align:left;lineheight:45pxを指定済みです。
padding指定なし
padding-left:45px
padding-left:45px;padding-top:5px