CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像の上にボタンを配置する方法

Web制作では、画像の上にボタンを重ねて表示したい場面がよくあります。たとえば、バナー画像の中央に「詳しく見る」ボタンを置いたり、サムネイル画像に再生ボタンを重ねたりするケースです。CSSのpositionプロパティを使えば、簡単に実現できます。

画像の上にボタンを重ねる基本の仕組み

画像の上にボタンを配置するには、次の2つの指定がポイントになります。

  • 画像を包む親要素（コンテナ）にposition: relative;を指定する
  • ボタンにposition: absolute;を指定し、親要素を基準とした位置を決める

さらにtop: 50%・left: 50%とtransform: translate(-50%, -50%)を組み合わせれば、ボタンを画像のど真ん中に正確に配置できます。

サンプルコード

以下のコードを実行すると、画像の中央にボタンが表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
   position: relative;
   width: 100%;
   max-width: 250px;
}
.box img {
   width: 100%;
   height: auto;
}
.box .btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
   <img src="https://www.tutorialspoint.com/videotutorials/images/current_affairs_home.jpg" alt="Current Affairs">
   <button class="btn">Button</button>
</div>
</body>
</html>

コードの解説

.box（親要素）

position: relative;を指定することで、この要素が子要素であるボタンの位置基準となります。max-width: 250px;は画像の最大幅を制限し、レイアウトが大きくなりすぎないようにしています。

.box img（画像）

width: 100%; height: auto;により、親要素の幅に合わせて画像が自動的に拡大縮小されます。これでレスポンシブ対応も可能です。

.box .btn（ボタン）

position: absolute;で親要素を基準に絶対配置し、top: 50%とleft: 50%で親要素の中心へ移動します。ただしこのままではボタン自身のサイズぶんだけずれるため、transform: translate(-50%, -50%);でボタンの幅と高さの半分ぶんだけ戻すことで、完全な中央寄せを実現しています。

まとめ

画像の上にボタンを重ねる場合は、「親要素にrelative、子要素にabsolute」という組み合わせが基本です。中央配置したいときはtransform: translate(-50%, -50%)を使うと、ボタンのサイズに関係なく正確に中心に揃えられます。この手法はオーバーレイ表示やカード型UIなど、さまざまなデザインに応用できるので、ぜひ覚えておきましょう。

  1. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo