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

スポンサーリンク


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

関連コンテンツ

スポンサーリンク

「背景画像と重ならない文字配置」への3件のフィードバック

  1. この記事はイドさんあてに書いたので、読むかもしれないからここに書きます。

    イドさんのところには何度コメントしても送れませんでした。
    firefox と Internet Explorer で試しましたがどちらからも送れません。

    スクリプトをひとつひとつ外して原因を探ってください。

  2. 私がちょっとやってみたいことかも。
    背景に画像を使いたい、とか。
    参考にさせていただきます~。(いつになるかわからんけど・・・)

  3. TOMさん
    コメント頂きまして、ありがとうございます。
    まだ未熟者ですが、TOMさんのブログを拝見させていただき、
    勉強していきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください