PNGイラストとCSSで装飾しよう！

今回はイラストACから素材をダウンロードして色々装飾していきたいと思います。サイトのお飾りの参考にしてみてください⭐️

完成見本

https://　tsuyu0102.github.io/css-sample/floating-png/index.html

▼1200px幅

▼480px幅

⭐️上のお飾りは背景の右上、左上に固定されていて、

下の音符と星はぷかぷか浮いているようにアニメーションで動かしています。

イラストACから素材をダウンロード

イラストACの利用にはログイン（無料登録）が必要です。

▼完成見本のお飾りは、こちらの素材を使用しました。

https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewarded

PNGかAIだと背景が透明なのでおすすめです。

▼使うパーツごとに色をつけて、png形式で保存。imgフォルダに入れました。

html

---

<div class="container">

   <h2>NEW ITEM</h2>

   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。これは、Lorem Ipsum の一節を含む Letraset シートのリリースによって 1960 年代に普及し、さらに最近では Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング

    ソフトウェアによって普及しました。</p>

   <img src="img/left02.png" alt="" class="floating01" />

   <img src="img/right02.png" alt="" class="floating02" />

  </div>

---

CSS

---

<style>

   body {

    background: skyblue;

   }

   .container {

    position: relative;

    background: #fff;

    text-align: center;

    padding: 2rem 4rem;

   }

   .container:after {

    background: url(img/left.png) left top, url(img/right.png) right top;

    background-size: 160px, 160px;

    background-repeat: no-repeat;

    opacity: 0.6;

    content: '';

    display: block;

    width: 100%;

    height: 300px;

    position: absolute;

    top: 0;

    left: 0;

   }

   .container h2 {

    margin: 1rem 0 2rem;

    letter-spacing: 0.5rem;

   }

   .container p {

    line-height: 2rem;

   }

   .floating01,

   .floating02 {

    animation: floating 1s infinite alternate;

    position: absolute;

    max-width: 70px;

   }

   .floating01 {

    left: 1rem;

   }

   .floating02 {

    right: 1rem;

    animation-delay: 0.2s;

   }

   ＠keyframes floating {

    0% {

     bottom: 3px;

    }

    100% {

     bottom: -10px;

    }

   }

   ＠media (max-width: 480px) {

    .container {

     padding: 2rem;

    }

    .container:after {

     background-size: 120px, 120px;

    }

    .container h2 {

     margin: 2.5rem 0 1rem;

    }

    .floating01,

    .floating02 {

     max-width: 55px;

    }

   }

  </style>

---

⭐️アットマーク2箇所は半角のアットマークにしてください。

⭐️＠media(max-width:480px){} 内に記述した項目は、画面幅480px以下の時に使われるものです。

⭐️ .floating02 { animation-delay: 0.2s; }は、右下の星の動きを少し遅れて開始させています。左右で少しタイミングをずらしてぷかぷかさせています。

▼今回、CSSもhtml内に書いたので、このような形になりました。

---

いかがでしたか？もしよかったら参考にしてみてくださいね🎶