CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。
画像編集ツールで加工してもよいのですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。
それでは position:relative と position:absolute の使い方を見ていきましょう。
position プロパティの使い方基本
positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。
何となくイメージはできるものの、検索して解説を読んでもイマイチわからず…という状態ではないでしょうか。
position プロパティで使える値をおさらいしておきましょう。
| static | 配置方法を指定しない |
|---|---|
| relative | 相対位置への配置 |
| absolute | 絶対位置への配置 |
| fixed | スクロールしても固定される配置 |
| sticky | スクロールに追従して固定される配置 |
今回使うのは position:relative と position:absolute ですが、面倒なことは忘れてかまいません。
「画像や文字を重ねるときは relative ＋ absolute」ということだけ頭の片隅に入れておいてください。
「画像と画像を重ねる方法」「画像と文字を重ねる方法」の 2 パターンをサンプル付きでご紹介します。習うより慣れろで、コピペしていろいろ試していくうちに使いこなせるようになりますよ。
画像と画像を重ねる方法
CSS で画像と画像を重ねる方法から解説していきます。
完成形は以下のイメージ。
「月（300px × 300px）」と「ピンクのロボット」は別々の画像で、CSS で重ねています。
HTML コードの基本形
HTML の基本形はシンプルです。
<div class="relative">
<img src="./image/base.jpg" alt="" />
<img src="./image/point.png" alt="" class="absolute" />
</div>親要素 <div> の中に 2 つの子要素 <img> を入れています。
class 名はお好みでつけてください。ここではわかりやすく positon の値としました。
配置場所を何も指定しないと、画像が 2 つ並ぶだけで重なりません。
ピンクのロボットに CSS の position で立ち位置を教えてあげましょう。
CSS で position を指定する
親要素 <div> に relative を指定し、子要素 <img> のうち上に重ねる画像（ここでは point.png を動かします）に absolute を指定します。
.relative {
position: relative;
}
.absolute {
position: absolute;
}これで、ピンクのロボットは親要素 <div> の範囲内でしか動けなくなりました。
absolute で位置を指定する
つづいて、ピンクのロボットの位置を指定します。
absolute の位置指定は下のプロパティを使います。どれかひとつでもよいですし、複数指定してもかまいません。
| top | 上からの距離を指定 |
|---|---|
| right | 右からの距離を指定 |
| bottom | 下からの距離を指定 |
| left | 左からの距離を指定 |
サンプルのように右下を基準とするときは、「right」と「bottom」を指定しましょう。「右から 30px 」「下から 30px 」という指定になります。
.relative {
position: relative;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}でも、この指定だけでは、画面幅の広いタブレットや PC だとロボットがベース画像にうまく重なりません。親要素の幅を指定していないのが原因です。
親要素のサイズを指定する
親要素 <div> にベースの画像と同じ幅 300px を指定しておきましょう。以下が HTML と CSS の最終形となります。
<div class="relative">
<img src="./image/base.jpg" alt="" />
<img src="./image/point.png" alt="" class="absolute" />
</div>.relative {
position: relative;
width: 300px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}これで、ピンクのロボットは親要素の幅 300px 以内でしか動けなくなります。
要素を重ねるポイントは以下の 2 点です。
- ベースとなる親要素に relative を指定する
- 重ねたい子要素に absolute を指定する
どこを変えるとどうなるのか、値をいろいろ調整して試してみてください。
画像と文字を重ねる方法
では次に、CSS で画像と文字を重ねる方法を見ていきましょう。
基本的な考え方は画像＋画像と同じで、コードの基本形はこのようになります。
<div class="relative">
<img src="./image/base.jpg" alt="" />
<p class="absolute">ここに重ねる文字</p>
</div>absolute で動かす要素が <img> から <p> に変わっただけです。
このままでも使えますが、ここでは <figure> タグを使ってみたいと思います。
figure タグとは
<figure> は HTML5 から新たに追加されたタグで「図表である」という意味を持ちます。仕様を見ると “メインフローから参照されるうんたらかんたら” とあってよくわかりませんね…。
あまり厳密に考えなくてよいと思いますが、要するに 記事内で使う挿絵や図に使いましょう ということですね。
<figcaption> で注釈（コメント）をつけられるので、この注釈を画像に重ねてみたいと思います。
HTML コードの基本形
コード自体はシンプルで、親要素 <figure> の中に、<img> と <figcaption> を入れます。
<figure class="relative">
<img src="./image/base.jpg" alt="" />
<figcaption class="absolute"><p>CSS で画像と文字を重ねることができます！</p></figcaption>
</figure>CSS コードの基本形
CSS の配置指定も先ほどと変わらず、親要素 <figure> に relative を、画像の上に重ねる <figcaption> に absolute を指定します。
relative {
position: relative;
}
.absolute {
position: absolute;
}absolute で位置を指定する
画像＋画像と同じく、注釈の位置を指定して動かしてあげましょう。
<figure> にベース画像と同じ幅 600px を指定し、<figcaption> は下から 80px の位置とします。
.relative {
position: relative;
width: 600px;
}
.absolute {
position: absolute;
bottom: 80px;
}
上に重ねる文字を黒背景＋白文字にする
ただ重ねただけでは文字が読みづらいので、黒背景＋白文字に装飾します。
.relative {
position: relative;
width: 600px;
}
.absolute {
position: absolute;
bottom: 80px;
color: #fff;
background: #000;
}上に重ねる文字の背景を透過させて整える
バランスが悪いので幅を揃えて背景色は透過させてみましょう。<p> のフォントサイズや余白も調整します。
.relative {
position: relative;
width: 600px;
}
.absolute {
position: absolute;
bottom: 80px;
color: #fff;
background: rgba(0,0,0,.6);
width: 100%;
max-width: 600px;
padding: 1em 0;
}
.absolute p {
margin: 0;
padding: 0 0.8em;
font-size: 150%;
text-align: center;
}完成！
まとめ
以上、position:relative と position:absolute を使った最もシンプルな形をご紹介しました。
それぞれの画像やテキストにリンクをつけることもできますし、CSS で角度をつけたり透明度を変えたりするなどいろいろな応用ができると思います。
画像と文字の重ね合わせは関連記事一覧などでよく使われているので、基本形を参考にいろいろアレンジしてみてください。
ポチップ
