【CSS】バナーを画面の端っこにくっつけて表示！

楽天市場などで、画面の端っこにクーポンとかイベントバナーなどがくっついているショップを見たことがあるでしょうか？これもCSSで簡単に出来ますので一緒にやってみましょう！

見本

松屋 楽天市場店さんに付いていました。

https://　www.rakuten.co.jp/matsuya/

完成見本1️⃣

▼今回は画面の右端につけたいと思います。

最初に画像を用意して下さい。

松屋さんのように縦長でも、上記のように横長でもOK。

html1️⃣

---

<a class="fixed-coupon" href="★リンクURL★">

   <img src="img/coupon.gif" alt="10%OFFクーポン" />

 </a>

---

⭐️aタグのhrefには、クリックしたら飛ぶページのURLを入れる。

⭐️imgタグのsrcには、画像の場所を入れる。

⭐️imgのaltには、画像の説明を入れる。

CSS1️⃣

CSSはこれだけ！

---

.fixed-coupon {

    position: fixed;

    top: 100px;

    right: 0;

}

.fixed-coupon:hover {

    opacity: 0.8;

}

---

完成見本2️⃣

少しだけ見えていて、マウスホバーするとする〜っと表示されるバナー見たことありますか？次はそれをやってみたいと思います！

▼少しだけ見えている

↓

▼マウスを置くとする〜っと現れる！

今回の画像はこのようなサイズになっています。

ですのでCSSは下記のようになります。htmlは1️⃣と同じです。

CSS2️⃣

---

.fixed-coupon {

    position: fixed;

    top: 100px;

    right: 0;

    transform: translateX(330px);

    transition: 0.5s ease-in-out;

   }

   .fixed-coupon:hover {

    transform: translateX(0);

   }

---

いかがでしたか？出来ましたか？

今回は以上になります。お疲れ様でした⭐️

---

もしよろしければこちらのサービスもご覧いただけたら嬉しいです🌷