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

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

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

画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。

以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
    width: 100%;
}
div {
    position: relative;
    width: 100%;
    max-width: 400px;
}
div img {
    width: 100%;
    height: auto;
}
div button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(64, 21, 133);
    color: white;
    font-size: 20px;
    padding: 24px 36px;
    width: 220px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    font-weight: bolder;
    font-family: monospace,sans-serif,serif;
}
div button:hover {
    color:yellow;
}
</style>
</head>
<body>
<h1>Button on Image Example</h1>
<div>
<img src="https://i.picsum.photos/id/354/400/400.jpg">
<button class="btn">Button</button>
</div>
</body>
</html>

ポイント解説

  • position: relative / absolute … 親要素のdivを基準位置とし、その上にbuttonを絶対配置します。
  • top: 50%; left: 50%; transform: translate(-50%, -50%); … ボタン自身の大きさも考慮して中央に揃える、定番のセンタリング手法です。
  • :hover疑似クラス … マウスカーソルを乗せたときのスタイル変化を定義しており、ここでは文字色を黄色に変更しています。

実行結果

上記のコードを実行すると、画像の中央にボタンが配置されたページが表示されます。

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

ボタンにマウスカーソルを合わせると（ホバー時）、:hoverの設定により文字色が黄色へと変化します。

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

  1. CSSで検索ボタンを作成する方法｜サンプルコード付きで解説

    CSSを使えば、テキスト入力欄と検索アイコンボタンを組み合わせた、おしゃれで使いやすい検索フォームを簡単に作成できます。ここでは、Font Awesomeのアイコンを活用した検索ボタンの実装例を、実際のコードとともに紹介します。実装例（サンプルコード）以下は、CSSを使用して検索ボタンを作成するためのコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q