2019/07/04288 Shares

CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法

CSSで文字や画像を重ねてみよう

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。

画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。

それでは position:relativeposition:absolute の使い方を見ていきましょう。

position プロパティの使い方基本

positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。

なんとなくイメージはできるものの、検索して解説を読んでもイマイチわからず… という状態ではないでしょうか。

position プロパティで使える値をおさらいしておきましょう。

static 配置方法を指定しない
relative 相対位置への配置
absolute 絶対位置への配置
fixed スクロールしても固定される絶対配置

今回使うのは position:relativeposition:absolute ですが、面倒なことは忘れて OK です。

最低限、これだけ頭の片隅に入れておいてください。

POINT

画像や文字を重ねるときは relative + absolute を使う

「画像と画像を重ねる方法」「画像と文字を重ねる方法」の 2 パターンをサンプル付きでご紹介しますので、コピペしていろいろ試していくうちに何となく理解できてくると思います。

習うより慣れろ、ですね。

画像と画像を重ねる方法

CSS で画像と画像を重ねる方法から解説していきます。

完成形は下のイメージ。

地球ロボット

「月(300px × 300px)」と「ピンクのロボット」は別々の画像で、CSS で重ねています。

HTML コードの基本形

HTML の基本形はシンプルです。

親要素 <div> の中に 2 つの子要素 <img> を入れています。

class 名はお好みでつけてください。ここではわかりやすく positon の値としました。

配置場所を何も指定しないと、下のように画像が縦に 2 つ並ぶだけです。

地球
ロボット

ピンクのロボットに CSS の position で立ち位置を教えてあげましょう。

CSS で position を指定する

親要素 <div> に relative を指定し、子要素 <img> のうち上に重ねる画像(ここでは point.png を動かします)に absolute を指定します。

これで、ピンクのロボットは親要素 <div> の範囲内でしか動けなくなりました。

absolute で位置を指定する

つづいて、ピンクのロボットの位置を指定します。

absolute の位置指定は下のプロパティを使います。どれかひとつでもよいですし、複数指定してもかまいません。

top 上からの距離を指定
right 右からの距離を指定
bottom 下からの距離を指定
left 左からの距離を指定

今回は右下に置きたいので、「right」と「bottom」を指定しました。

「右から 30px 」「下から 30px 」です。

地球ロボット

この指定だけでは、画面幅の広いタブレットや PC だとロボットがベース画像にうまく重なりません。親要素 <div> の幅を指定していないのが原因です。

親要素のサイズを指定する

親要素 <div> にベースの画像と同じ幅 300px を指定しておきましょう。

これでピンクのロボットは、親要素の幅 300px 以内でしか動けなくなります。

地球ロボット

ちなみに、ロボットを左上におくなら「left」と「top」で指定すると簡単です。

地球ロボット

どこを変えるとどうなるのか、値をいろいろ調整して試してみてください。

画像と文字を重ねる方法

では次に、画像と文字を重ねる方法を見ていきましょう。

基本的な考え方は画像+画像と同じなので、コードの基本形はこのようになります。

absolute で動かす要素が <img> から <p> に変わっただけです。

このままでも使えますが、ここでは <figure> タグを使ってみたいと思います。

figure タグとは

<figure> は HTML5 から新たに追加されたタグで「図表である」という意味を持ちます。

仕様を見ると “メインフローから参照されるうんたらかんたら” とあってよくわかりません…。

 figure-HTML5タグリファレンス

あまり厳密に考えなくてよいと思いますが、要するに 記事内で使う挿絵や図に使いましょう ということですね。

<figcaption> で注釈(コメント)をつけられるので、この注釈を画像に重ねてみたいと思います。

HTML コードの基本形

コード自体はシンプルで、親要素 <figure> の中に、<img><figcaption> を入れます。

CSS コードの基本形

CSS の配置指定も先ほどと変わらず、親要素 <figure> に relative を、画像の上に重ねる <figcaption> に absolute を指定します。

absolute で位置を指定する

画像+画像と同じく、注釈の位置を指定して動かしてあげましょう。

<figure> にベース画像と同じ幅 600px を指定し、<figcaption> は下から 80px の位置とします。

積み上げられた本

CSS で画像と文字を重ねることができます!

上に重ねる文字を黒背景+白文字にする

ただ重ねただけでは文字が読みづらいので、黒背景+白文字に装飾します。

積み上げられた本

CSS で画像と文字を重ねることができます!

上に重ねる文字の背景を透過させて整える

バランスが悪いので幅を揃えて背景色は透過させてみましょう。

<p> のフォントサイズや余白も調整します。

積み上げられた本

CSS で画像と文字を重ねることができます!

完成!

まとめ

以上、position:relative position:absolute を使った最もシンプルな形をご紹介しました。

それぞれの画像やテキストにリンクをつけることもできますし、CSS で角度をつけたり透明度を変えたりするなどいろいろな応用ができると思います。

画像と文字の重ね合わせは関連記事一覧などでよく使われているので、基本形を参考にいろいろアレンジしてみてください。

それでは、また。