★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

CSSだけで画像の上に文字や要素を重ねる方法

オシャレでWebデザインを作るときに使われるのが画像の上に文字やボタンなどを表示する手法です。

例えば何かフォームなどを作るときにただボタンやテキストボックスを配置するだけだと味気ないですが、画像の上にフォームを作るとそれだけでオシャレな感じになります。

そのようなデザインを作るのは意外と難しくなくCSSだけで実現できます。

ここでは実例を交えてそのようなデザインを作る方法について解説します。

前提知識

画像に何か要素を重ねる際に理解しておかなければならないのは次のCSSプロパティです。

positionプロパティ

これは要素の位置関係について指定するプロパティです。このプロパティが取れる値は次の4つです。

  • static
    positionのデフォルト値でどんな方法でもこの値が指定されている要素は位置を変えることができない
  • relative
    元々表示されるはずだった場所から相対的に位置指定できる
  • fixed
    viewportに対する相対位置で配置。つまり特定の場所に要素が固定されるので画面をスクロールしても付いてくる要素が作れる
  • absolute
    fixedと似ているが位置指定可能(positionプロパティがstatic以外)で最も近い要素に対する相対位置に配置される

この中で今回やろうとしている文字の重ね合わせに必要なのはrelativeabsoluteです。

やることは画像やテキストの入った親要素にposition:relativeを指定して、画像の中に埋め込みたいテキスト要素にposition:absoluteを指定するだけです。この説明を図で表すと以下のような画像のようになります。

上の画像のように画像要素自体にはpositionプロパティを指定する必要がありません。

top,left,bottom,rightプロパティ

この4つは要素の配置する位置を指定するプロパティです。ただし要素のpositionプロパティにrelative,absolute,fixedが指定されている場合に有効になります。

これらのプロパティは基準となる位置から上下左右からどのくらい離れているのか指定するためのものです。例えばtopに10pxを指定すると親要素の上部から10pxだけ離れた場所から要素が開始されます。

画像にテキストを埋め込みたい場合、このtop,left, right, bottomプロパティに適当な値を指定することでテキスト要素の親要素内での位置を決めることができます。

画像へのテキスト埋め込み方

ここまでで説明したpositionとtop,left,right,bottomプロパティを活用すると画像の中にテキストなどの要素を埋め込むことができます。

例えば次が画像埋め込みのHTMLとCSSです。

HTMLの例

<div class="box" >
    <img src="./sample.jpg" width="100%" height="100%" />
    <div class="text">WordPress</div>
</div>

CSSの例

.box
{
    postion: relative;
}

.box div.text
{
    position: absolute; 
    left: 10px; 
    top: 10px; 
    font-size: 30px;
}

親要素にはpostion:relativeを指定し、その中のテキスト要素(div.text)にposition:absoluteを指定しています。テキスト要素にはtop:10px, left:10pxを指定しているので親要素の上部から10px、左側から10pxだけ離れた場所に要素が表示されます。

実際には次のように画像とテキストが重なって表示されます。

WordPress

応用例

最後に画像に要素を埋め込む手法を利用したいくつかの応用例を紹介します。

テキストを中央表示

次は画像中央にテキストを表示する例です。

HTMLコード

<div class="box">
    <img src="./sample.jpg" width="100%" height="100%" />
    <div class="text">WordPress</div>
</div>

CSSコード

.box
{
    position: relative;
}

.box div.text
{
    position: absolute;
    width: 100%;
    left: 0; 
    top: calc(50% - 25px); 
    text-align: center; 
    color: darkblue; 
    font-weight: bold; 
    font-size: 50px;
    line-height: 50px;
}

CSSでテキスト要素のtopプロパティで縦中央にくるように調整しています。この時ただ50%と指定すると50%の場所から要素が開始してしまうのでcalc関数を使い、フォントサイズの半分(50px)を引くことで完全な縦中央寄せになります。

またwidthを100%にし、text-alignをcenterにすることで横方向に中央寄せしています。

このCSSを適用するとブラウザでは次のような表示になります。

WordPress

画像内にフォーム埋め込み

画像内にフォームを埋め込む例です。

HTMLコード

<div class="box">
    <img class="./sample.jpg" alt="" width="100%" height="100%" />
    <form class="form">
        <input type="text" />
        <button class="btn" type="submit">送信</button>
    </form>
</div>

CSSコード

.box
{
    position: relative;
}

.form
{
    position: absolute; 
    text-align: center;
    top: 50%; 
    left: 50%; 
    transform: translateY(-50%) translateX(-50%); 
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.btn
{
    padding: 10px; 
    margin-top: 10px;
}

このCSSで重要なのは次の部分です。

top: 50%; 
left: 50%; 
transform: translateY(-50%) translateX(-50%); 
-webkit-transform: translateY(-50%) translateX(-50%);

まず親要素の上部と左側から50%だけ離れたところからフォーム要素を開始するようにtopとleftを設定しています。しかしこれだとフォームの一番左上が中央にくるので中央寄せになりません。

そこでtransformプロパティでフォーム要素の大きさの半分ずつ戻す(-50%)という処理をしています。これで要素の大きさに関わらず完全に中央寄せになります。

ブラウザ上では次のように中央にフォームが表示されます。


このような親要素内でブロック要素を中央寄せする手法はこの場合だけでなく汎用的に役立つテクニックだと思います。

以上画像内にテキストなどの要素を埋め込む手法について解説しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press