CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。
画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。
それでは position:relative と position:absolute の使い方を見ていきましょう。
Headline
position プロパティの使い方基本
positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。
なんとなくイメージはできるものの、検索して解説を読んでもイマイチわからず… という状態ではないでしょうか。
position プロパティで使える値をおさらいしておきましょう。
| static | 配置方法を指定しない |
|---|---|
| relative | 相対位置への配置 |
| absolute | 絶対位置への配置 |
| fixed | スクロールしても固定される絶対配置 |
今回使うのは position:relative と position:absolute ですが、面倒なことは忘れて OK です。
最低限、これだけ頭の片隅に入れておいてください。
「画像と画像を重ねる方法」「画像と文字を重ねる方法」の 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」を指定しました。
.relative {
position: relative;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
「右から 30px 」「下から 30px 」です。
この指定だけでは、画面幅の広いタブレットや PC だとロボットがベース画像にうまく重なりません。親要素 <div> の幅を指定していないのが原因です。
親要素のサイズを指定する
親要素 <div> にベースの画像と同じ幅 300px を指定しておきましょう。
.relative {
position: relative;
width: 300px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
これでピンクのロボットは、親要素の幅 300px 以内でしか動けなくなります。
ちなみに、ロボットを左上におくなら「left」と「top」で指定すると簡単です。
.relative {
position: relative;
width: 300px;
}
.absolute {
position: absolute;
left: 30px;
top: 30px;
}
どこを変えるとどうなるのか、値をいろいろ調整して試してみてください。
画像と文字を重ねる方法
では次に、画像と文字を重ねる方法を見ていきましょう。
基本的な考え方は画像＋画像と同じなので、コードの基本形はこのようになります。
<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 で角度をつけたり透明度を変えたりするなどいろいろな応用ができると思います。
画像と文字の重ね合わせは関連記事一覧などでよく使われているので、基本形を参考にいろいろアレンジしてみてください。
それでは、また。