広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

背景画像と重ならない文字配置

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

新ブログ「Big Bang」で続きを読む