プログラミング

CSSで画像の中央に文字を配置する方法【基本を理解すれば簡単】

2020年6月16日

CSSで画像の中央に文字を配置する方法【基本を理解すれば簡単】
にゃーきゃっと
CSSで文字を画像の上下左右揃えて、真ん中に表示させたいけど、どうすればいいの??
お任せあれ!!!!!
にいやん

この記事は以下の疑問に答えます。

この記事の内容



  • 画像や背景の中央に文字(サイトタイトル)を表示したい
  • 他の箇所でも同じ考えで応用できるようにしたい
  • 現在、主流のコードの書き方で作りたい

この記事を書く僕のことを軽く紹介しておきます。

僕は現在、Web会社でフロントエンドエンジニアをしています。HTML/CSS/JSを使用したコーディングという業務もバリバリしています。

なので、現在現場で使われているコードの書き方を紹介できます。

 

CSSで画像の中央に文字を配置する方法

作業

CSSで画像の中央に文字を表示させるのはとても簡単です。

最初に今回使う核となるコードを伝えます。

「position」と「transform」です。

画像や背景に文字を重ねるイメージでしょうか。

覚えてしまえば、お好みの位置に文字以外も配置できるようになっちゃいます。

それでは早速いってみましょうー!!

文字を中央配置するコード解説

今回、作りたいの物はこんな感じ。
「HTML」「CSS」「Result」のタブをクリックしてもらえれば、コードを確認できます。

See the Pen
mdOxbdb
by えんにぃ (@enjiniyan)
on CodePen.

デザインは例の如く最低限で実装しています。

まずは、配置させたい文字の親要素にあたる、<div class="wrap">position: relative;のスタイルを指定します。

その次に、配置させたい文字(子要素にすること)

<h1 class="title">タイトル</h1>position: absolute;を指定して準備完了です。

その後は上下左右揃うようにまずは下記のように

 css
top: 50%;
left: 50%;

上から半分、左から半分の位置に指定します。
ここでどこを基準??と思われたかもしれません。

先ほど準備したのを振り返りましょう。

position: relative」を親要素に指定しましたね!!

親要素を基準にして動きます。

このとき、動かしたい子要素に「position: absolute」が指定されてる必要があります。

 css
transform: translate(-50%,-50%);

最後にこれを指定します。
この指定をしない場合で表示を確認すると分かるのですが、
子要素のどの部分を真ん中の配置するか指示しています。

デフォルトでは、子要素の左上が親要素の中央に配置されます。
なので子要素の中央が親要素の中央に配置される、おまじないです。

wrapに当てているスタイル

 css
width: 50vw;
margin: 0 auto;

これの意味は単に幅を指定し全体を真ん中に表示させています。

今回のお題には関係ないですが、「margin: 0 auto」は良く使う手法なので覚えておいて、損はないです。

 css
position: relative;

こちらを指定することで、どれに対して配置させるかの
どれ!?を指定しています。

imagesに当てているスタイル

今回は背景色をつけてダミーの背景画像にしています。

titleに当てているスタイル

 css
font-size: 30px;
font-weight: bold;
color: blue;

文字のデザインです。

 css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

上で説明した通り、
今回のお題のメインコードです。

親要素の画像に対して、
文字を上下と左右揃えて、中央に表示させています。

まとめ:CSSで画像の中央に文字を配置する方法

まとめ

今回のコード解説は以上です。

この「position」をマスターすれば
色んな要素を重ねて表示させたりできます。

良く使われるのは、サイトのheroと呼ばれているエリア!!
例えばこんな感じ!

CSSで画像の中央に文字を配置する方法

応用もできるので、是非試してみてください。

僕の記事をお読みいただくと、
誰にでも分かりやすくコード解説しているので、興味があれば他の記事もお読みいただけると嬉しいです。

以下に今回の大事なポイントをまとめます。

 

まとめ

  • 親要素に「position: relative
  • 子要素に「position: absolute

以上です。
ありがとうございました。

にいやん
それでは!よきプログラミングLifeを!!
  • この記事を書いた人
つちだ

えんじ兄やん(えんにぃ)

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-プログラミング

Copyright© 2019-2021 そろりかく。 All Rights Reserved.