画像の上にテキストを上下左右中央に表示させる方法

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

といった方に対する記事となります。

前回はヘッダーの作り方の記事を書いたので、サイトの模写をしていて次に躓くのはこれではないかと予想しています。

今回の完成形

まずは今回の完成形を見てみます（スマホで見る場合はResultをタップして下さい）

See the Pen
画像にテキスト表示 by junpei (@junpei-sugiyama)
on CodePen.

今回は一番多いパターンと思われるテキストを上下左右中央に載せました。

それではまずはHTMLから書いていきます。

HTMLの説明

HTMLから書いていきますが、これはいたってシンプルです。

1点、画像とテキストを重ねる為に2つの要素をdivで囲ってあげます。

<div class="top">
  <img src="画像のパス" />
  <p>I'm a Photographer</p>
</div>

それではこの状態で一度見てみます。

See the Pen
画像にテキスト表示（HTMLのみ） by junpei (@junpei-sugiyama)
on CodePen.

画像のサイズを指定していないので、横スクロールが出てしまいました。

さらにCSSをまだ書いていないので、HTMLでは書いた順に表示される通り、画像→テキストの順番で縦並びとなっています。

それではここからCSSを書いてテキストを画像の上に表示させたいと思います。

CSSの説明

まずはCSSを見てみます。

body {
  margin: 0;
}
.top {
  position: relative;
}
.top img {
  width: 100%;
}
.top p {
  color: #fff;
  font-size: 30px;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

bodyのmargin: 0;はデフォルトで設定されているCSSを消すための物で、リセットCSSで調べてみて下さい。

それでは１つずつ見ていきたいと思います。

.top img {
  width: 100%;
}

これは画像の幅を画面いっぱいにしています。

これは特に難しい事はありませんね。

次はフォントの色やサイズを変えます。

.top p {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

文字色は白にして、フォントサイズは16px、あとはデフォルトで設定されているmarginを0にしています。

そして次から画像にテキストを重ねる為のCSSとなります。

まずは画像とテキストを囲ったdivに対してCSSを書きます。

.top {
  position: relative;
}

これはテキストを重ねる起点となる場所に対して書くような物で、この後出てくる position: absolute; とセットで使います。

ちなみに position: relative; だけ書いても特に意味はなく、何も変わりません。

次はテキストに書くCSSですが、少しずつ見てみます。

.top p {
  left: 0;
  position: absolute;
  top: 0;
}

まず position: absolute; ですが、これは絶対配置を指定する値で、top: 0; と left: 0; を指定すると画面の一番左上が起点となります（ここでは説明の為に中央ではなく左上になるように設定しています）

ただ画面の一番左上になるのは position: relative; がなかった場合で、あった場合はそこが起点となります。

今回は画像とテキストを囲ったdivに position: relative; を設定したので、画面の左上ではなく、画像の左上となります（画像が一番上なので結果的に画面の左上と同じなので少しややこしいですが）

一旦この状態を見てみます。

See the Pen
画像の上にテキスト（左上） by junpei (@junpei-sugiyama)
on CodePen.

テキストが画像の左上にきました。

画像の上にテキストを表示させることは出来ましたが、今回はそのテキストを上下左右中央にするのが目標なので、その為のCSSを追記します。

.top p {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

まずは先ほど書いた top: 0; と left: 0; をそれぞれ50%に書きかえます。

これでテキストの起点が画像の左上から画像の中心になりました。

ただこれでは起点が画像の中心になっただけで、テキストが中心になったわけではありません。

これを中心に持ってくるために必要なのが transform: translate(-50%, -50%); となります。

これはテキストの幅と高さを50%分戻すという意味になります。

下の写真で言うと、青枠の幅と高さの50%分左上に移動したのが緑枠の位置となり、ここが画像の中心となります。

それでは最後に完成形をもう一度見てみます。

See the Pen
画像にテキスト表示 by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

あとは古いブラウザに対応するために transform: translate(-50%,-50%); は以下のようにベンダープレフィックス付きの物も書いておきましょう。

-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);

もちろん top や left、transform の数値を変えることで中心以外に配置することも出来るので、色々試してみるといいと思います。