Web制作 CSS

【CSS】画像の上に文字を上下左右中央に表示させる方法

文字を画像の上に表示させたいけどどうやるの?

画像の上に文字などの要素を重ねるのはコーディングでよくありますが、最初はつまづく人も多いかと思います。

今回はデモとコードで解説していきたいと思います。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


画像の上に文字を上下左右中央に表示させる方法

まずは今回の完成形を見てみます。

See the Pen
画像の上に文字(imgタグ)
by junpei (@junpei-sugiyama)
on CodePen.

今回は画像の上に文字を重ねるパターンで一番多いと思われる文字を上下左右中央にしました。

それではコードを解説していきます。

 

コード解説

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

画像と文字を重ねる為に2つの要素を.sampleというclassのdivで囲っています。

<div class="sample">
  <div class="sample-title">ポメ&パピ</div>
  <div class="sample-img">
    <img src="画像パス" alt="" />
  </div>
</div>

それではCSSを書かずにこの状態で一度見てみます。

See the Pen
画像の上に文字(imgタグ:HTMLのみ)
by junpei (@junpei-sugiyama)
on CodePen.

画像の横幅であるwidthを指定していないので、横スクロールが出てしまいました。

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

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

.sample {
  margin-inline: auto;
  position: relative;
  width: 80%;
}
.sample-img img {
  height: auto;
  width: 100%;
}
.sample-title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  text-shadow: 2px 2px 5px #333;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

 

全体を囲む要素

.sample {
  margin-inline: auto;
  position: relative;
  width: 80%;
}

position: relative;は配置させたい文字の親要素に書く、文字を重ねる起点となる場所に対して書くような物となります。

最初はよく分からないかも知れませんが、このposition: relative;と動かしたい要素に書くposition: absolute;基本的にセットだと思って下さいposition: relative;は単体で使うこともあります)

中央寄せはmargin-inline: auto;で設定していますが、多くの記事ではmargin: 0 auto;と書いているかと思いますmargin-inline: auto;は最近の書き方です)

他にも以下のような書き方でも中央寄せになります。

.sample{
  margin-left: auto;
  margin-right: auto;
}

中央寄せにしない場合、画像は左寄せになります。

 

画像

.sample-img img {
  height: auto;
  width: 100%;
}

これは画像の幅を設定しているだけです(私は基本的にimgタグにはこれを書いています)

 

文字

そして重要な文字のCSSですが、まずはこちらを見て下さい(完成形ではなく解説用です)

.sample-title {
  left: 0;
  position: absolute;
  top: 0;
}

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

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

今回は画像と文字を囲ったdivにposition: relative;を設定したので、画面の左上ではなく画像の左上となります

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

See the Pen
画像の上に文字(imgタグ:文字左上)
by junpei (@junpei-sugiyama)
on CodePen.

文字が画像の左上にきましたね。

画像の上に文字を表示させることは出来ましたが今回はその文字を上下左右中央にしたいので、その為のCSSを追記します(色などは省略します)

.sample-title {
  left: 50%;
  position: absolute;
  top: 50%;
}

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

これで文字の起点が画像の左上から画像の中心になりました。

文字の起点が画像の中央(ポメラニアンとパピヨン)

文字の起点が画像の中央

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

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

これは文字の幅と高さを50%分戻すという意味になります(上にマイナス50%、右にマイナス50%)

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

transform: translate(-50%, -50%);で移動する位置(ポメラニアンとパピヨン)

transform: translate(-50%, -50%);で移動する位置

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

See the Pen
画像の上に文字(imgタグ)
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS