画像上にテキストを重ねる方法

2019年4月10日2019年12月21日HTML・CSS

今回は「画像上にテキストを重ねる方法」についてご紹介します。

「難しいんじゃない？」と思うかもしれませんが…大丈です！それほど難しくはありません。
この方法を使うと、画像の説明文やクレジット表記などちょこっとオシャレにすることができます。

CSSを書く場所と基本的な書き方

UUPDATE 2023年05月13日『WordPressでCSSを書く場所』を追記しました 2019年07月21日『CSSを書く場所』 ...

 https://kirari-yums.net/post-8221//

画像上にテキストを重ねる方法

画像上にテキストを重ねる

きらり

ところで『画像上にテキストを重ねる』ってどんなもの？

結耶

上をご覧下さい。サンプルも兼ねて記事タイトルを『画像の上にテキストを重ねて』みました♪
こんな感じのものを作ります。

<div class="box">
    <img src="画像のURL">
  <div class="box-text">ここにテキストが入ります。</div>
</div>

「box」は入れものです。「box」の中に画像とテキスト(box-text)を入れます。

次にCSSを書いていきますが、いくつかポイントがありますので説明しながら書いていきます。
「面倒くさい」という方は目次の「5.HTML・CSS まとめ」にジャンプしてHTMLとCSSをコピペしてください。

テキストの表示位置

テキストを表示する位置の設定をしていきます。

位置の指定には『position』を使います。

position

まずは『position』について説明します。

『positionプロパティ』は、要素をどのような配置にするかを指定するものです。

• static
  このstaticが指定されているとどのように指定しても位置は変わりません(初期値)
• relative
  相対位置への配置。
• absolute
  絶対位置への配置。親要素にpositionプロパティのstaticの場合、親要素の左上が基準位置となり、static以外の値が指定されていない場合はウィンドウ(画面)の左上が基準位置となります。
• fixed
  絶対位置への配置ですが、要素は固定され、スクロールしても動かなくなります。

おそらく上の説明をみても「？」と思っている人が多いと思います。positionプロパティについてもっと詳しく知りたい方は以下でわかりやすく説明されていますので参考にしてください！

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

position: absolute、relative、fixed、staticの意味の実践的な使い方を分かりやすく図解します。

 https://saruwakakun.com/html-css/basic/relative-absolute-fix...

親要素と子要素

テキストを上のpositionプロパティを使って配置していきます。

画像上にテキストを表示させるために『position:relative;』(親要素)、『position:absolute;』(子要素)を使って指定します。

きらり

どこが親要素でどこが子要素？

結耶

わからないよね～。ちゃんと説明するしわからんい場合は、ソースをコピペして改造しちゃってくださいw

今回の場合の親要素と子要素はこのようになります。

テキストを配置してみよう

子要素position:absolute; に top | left | right | bottom を使って表示位置を指定します。
top | left | right | bottom はpx、em、%で指定します。

左上にテキストを表示

左上にテキストを表示

.box {
      margin:20px auto; 
      padding:0; 
      position:relative;
}

.box-text {
      position:absolute; 
      top:0; 
      left:0; 
      background:black; 
      color:white; 
      padding:10px;
}

中央にテキストを表示

中央にテキストを表示

.box {
    margin:20px auto;
    padding:0; 
    position:relative; 
}

.box-text {
    position:absolute; 
    left: 50%;  
    top: 50%;  
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background:black; 
    color:white; 
    padding:10px;
}

テキストを中央に表示させるにはちょっとコツがいるようです。

上記のCSSは以下の記事を参考にして9行目～13行目のソースを使わせてもらいました。

CSSで中央寄せする9つの方法（縦・横にセンタリング）

【図解】HTML&CSSで縦・横・ど真ん中にセンタリングする方法を総まとめしました。また「中央寄せで ...

 https://saruwakakun.com/html-css/basic/centering

右下にテキストを表示表示

左上にテキストを表示

.box {
      margin:20px auto; 
      padding:0; 
      position:relative;
}

.box-text {
      position:absolute; 
      bottom:0; 
      right:0; 
      background:black; 
      color:white; 
      padding:10px;
}

親要素の幅と高さの調整

上のCSSをコピペして「テキストが画像からはみ出てるよ～！」という方がいると思います。
テキストが親要素に対しての位置を指定しているため、親要素のボックスが画像より大きいとテキストがはみ出してしまうことになります。

テキストがはみ出さないように親要素(.box)横幅や縦幅を調整します。

width(横幅)とheight(高さ)を使う

横幅と縦幅の指定にはwidth(横幅)とheight(縦幅)を使いますが、親要素をwidth、heightで画像と同じ幅に指定すると、その値で固定されてしまいます。

上の画像は親要素を画像サイズに合わせてwidth:640px; height:201px;に指定してスマホで見たものです。
横幅が640px、縦が201pxで固定されているため画面に収まっていません。

最大幅を指定する

width、heightではスマホなどの画面が小さい端末では切れてしまうのでwidth、heightを以下のようにします。

width、heightにそれぞれ「max-」を付けると最大幅ということになります。
max-width、max-heightで指定すると画面が大きくなっても親要素のボックスが指定された数値以上に広がることがなくなります。

また、スマホなどの画面が小さい端末でもちゃんと画面に収まります。

.box {
    margin:20px auto;
    padding:0; 
    position:relative; 
    max-width:640px;    /*横の最大値(画像と同じ幅)*/
    max-height:201px;  /*縦の最大値(画像と同じ高さ)
}