スポンサーリンク

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

2019年4月10日HTML・CSS

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

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

画像上にテキストを重ねる方法
スポンサーリンク

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

きらり

きらり

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

結耶

上をご覧下さい。サンプルも兼ねて記事タイトルを『画像の上にテキストを重ねて』みました♪
こんな感じのものを作ります。
HTML
<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』について説明します。

CSSposition: 値 ;

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

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

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

親要素と子要素

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

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

きらり

きらり

どこが親要素でどこが子要素?
結耶

結耶

わからないよね~。ちゃんと説明するしわからんい場合は、ソースをコピペして改造しちゃってくださいw
 .box  親要素(position:relative;)

画像(指定なし)

テキスト.box-text
子要素(position:absolute;)

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

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

子要素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行目のソースを使わせてもらいました。

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

左上にテキストを表示
.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を以下のようにします。

CSS横幅  max-width: 値 ;
縦幅  max-height: 値 ;

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

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

.box {
    margin:20px auto;
    padding:0; 
    position:relative; 
    max-width:640px;    /*横の最大値(画像と同じ幅)*/
    max-height:201px;  /*縦の最大値(画像と同じ高さ)
}
Point
画像と同じにしてください。
【例】 画像  width="640″ になっていたら max-width:640px;
画像  height="201″ となっていたら max-height:201px;

親要素の横幅をwidth:640px;、縦幅をheight:201px;で指定してみた!

※PC・スマホなどで確認してみてください。

子要素のテキストの調整

背景色を変える

サンプルではわかりやすくするために背景色を「黒」にしてあります。

背景色をなし(文字だけ)にする場合は『background:black;』を削除してください。

背景色を変更する場合は『black』をほかの色に変更してください。

背景色を透過する

背景色を透過することができます。
背景色を透過する場合は背景色の指定に16進数(#000000)やblackなどのカラー名ではなくrgbaを使います。

CSSbackground:rgba(R値,G値,B値,透過率);

RGBは、R(赤)・G(緑)・B(青)で色を表したものをいいます。
カラーコード表や画像編集ツールなどで一度は見たことあると思います。

このRGBを使って背景色と透過を設定します。

またこのbackground:rgba(値); を使うと背景だけを透過することができます。

※サンプルは黒で設定します。黒のRGBは R:0  B:0  G:0 です。

設定方法background:rgba(0,0,0,0.60);

RGBそれぞれの値を『,(カンマ)』で区切ります。
最後の「0.60」は『不透過率60%』という意味になります。逆にいえば40%透過するということです。

背景を40%透過してみた!

テキストの背景色が透過されて少し透けているのがわかると思います。

※RGBがわからない場合は以下のサイトなどで調べることができます。

横幅の指定

子要素の幅の指定にはwidthを使います。親要素の時に説明したようにpxやemで指定すると大きさが固定されてしまいます。
なのでpxやemよりパーセント(%)で指定する方がいいと思います。

画像いっぱいにする場合は『width:100%;にしてください。

横幅をいっぱいにしてみた!

テキスト(文章)を中央寄せ

今度は子要素のボックス内の文字を中央寄せにする方法です。

CSStext-align:center;

これで文字が中央寄せになります。右寄せにしたい場合は『center』を『right』に変更してください。

文字を中央寄せ
きらり

きらり

結耶、まだまだ説明あるの?
結耶

結耶

んー、文字サイズとか細々したことはあるけどね。
あとはそうまろめのコードを書くだけかな~w

HTML・CSS まとめ

ちょっといろいろ説明しましたが、「結局どうすればいいの?」と思っている方も多いですよね。
なのでここで総まとめのソースを書きたいと思います。

HTML
<div class="box">
    <img src="sample.jpg" width="640" height="427">>
<div class="box-text">これで完成です!</div>
</div>
CSS
/*画像上にテキストを重ねる*/
.box {
    margin:20px auto;
    padding:0;
    position:relative;
    max-width:640px;   /*横の最大幅(画像と同じに)*/
    max-height:427px;  /*縦の最大高さ(画像と同じに)*/
}

/*テキスト部分*/
.box-text {
    position:absolute;
    bottom:0;
    padding:10px;    /*内側の余白*/
    width:100%;    /*横幅*/
    background:rgba(220,20,60,0.60);  /*背景色(RGB)と不透過率*/
    color:white;    /*文字色*/
    text-align:center;    /*文字の位置*/
    font-size:20px;    /*文字サイズ*/
}

これで完成です!

最後に

今回は『画像上にテキストを重ねる方法』について書きました。

今回紹介した方法を使えば、画像にちょっとした説明文を書いたり、記事のタイトルにしたりできますよね。

ちょっとpositionプロパティが難しいかもしれませんが覚えるといろいろな位置指定に使えます。

ぜひ参考にしてみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM