2016/10/1852 Shares

position:relativeとposition:absoluteで画像や文字を重ねてみよう

積み上げられた本

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

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

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

それでは、さっそく使い方を解説していきます!(ちなみに、上のアイキャッチも CSS で画像の上に文字を重ねています。)

position プロパティの概要は覚える必要なし!

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

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

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

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

今回使うのは「relative」と「absolute」ですが、ここでダラダラ解説してもあまり意味がないので、このさい面倒なことは忘れてしまいましょう! 概要なんて覚える必要なし!

もちろんきちんと理解した上で使いこなすのが理想ですが、表示されればいいのです。

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

これだけ覚えておこう!
画像や文字を重ねるときは relative + absolute

サンプルをご紹介しますので、コピペしていろいろ試してみれば何となくわかってくると思います。習うより慣れろ、ですね。

きっちり理解して使いたいなら、こちらの記事がわかりやすいです。

レスポンシブECサイトのレイアウトで使える!position:「absolute」「relative」の違いとは

画像と画像を重ねる方法

まず、CSS で画像と画像を重ねてみましょう。こんな感じにしてみたいと思います。

地球
ロボット

ベースとなる月の画像(300px × 300px)にピンクのロボットを置きました。

コードの基本形

HTML の基本形を見てみましょう。

クラス名はなんでもよいですが、わかりやすく positon の値にしてあります。

2 つの画像を囲んでいる DIV 要素に relative を指定し、重ねる画像(ここでは point.png を動かします)に absolute を指定するわけですね。

配置場所を何も指定しないとこのように画像が 2 つ並ぶだけなので、ピンクのロボットに立ち位置を教えてあげましょう。

地球
ロボット

absolute を使った位置指定

画像の位置を指定するには下のプロパティを使います。

どれかひとつでも良いですし、複数指定してもかまいません。

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

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

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

地球
ロボット

あれ、タブレットや PC だとロボットがベース画像にうまく重なっていませんね。

これは画像を囲っている DIV の幅を指定していないのが原因です。DIV にベースの画像と同じ幅 300px を指定しておきましょう。

地球
ロボット

これで大丈夫ですね。

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

地球
ロボット

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

画像と文字を重ねる方法

では次に、画像の上に文字を重ねてみましょう。基本的な考え方は画像+画像と同じです。

ということは、コードの基本形をこうすれば OK ですね。

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

このままだと面白くないので、ちょっと趣向を変えて <figure> タグを使ってみたいと思います。

figure タグとは

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

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

あまり厳密に考えなくて良いと思いますが、記事内で使う挿絵や図に使いましょう、ということです。<figcaption> で注釈(コメント)をつけられるので、この注釈を画像に重ねてみましょう。

参考figure-HTML5タグリファレンス

コードの基本形

コード自体はシンプルで、全体を <figure> で囲み、<figcaption> で画像の注釈をつけています。

CSS の配置指定も先ほどと変わらず、全体を囲む <figure> に relative を、動かす <figcaption> に absolute を指定します。

位置指定とfigcaptionの装飾

画像と同じく、注釈の位置を指定して動かしてあげましょう。下から 80px にしてみました。

積み上げられた本

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

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

積み上げられた本

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

バランスが悪いので幅を揃えて背景色は透過させてみましょう。<p> のフォントサイズや余白も調整します。

積み上げられた本

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

完成!

まとめ

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

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

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

それでは、また。