CSSで"NEW"タブをつけよう！

商品画像とか、ブログの記事とかにNEWなどと小さいタブがついていることってありますよね。それをCSSでつけてみたいと思います。

商品画像を並べて、特定のクラス名が付いているものだけ、左上にNewと出るようにしてみます。

最後まで見ていただけたら嬉しいです🌞

完成見本

html

---

<section>

   <div class="item-container">

    <h2>⭐️Recommended Items⭐️</h2>

    <ul>

     <li class="new">

      <a href="#"><img src="img/item01.jpg" alt="" />Tシャツ001</a>

     </li>

     <li>

      <a href="#"><img src="img/item02.jpg" alt="" />Tシャツ002</a>

     </li>

     <li>

      <a href="#"><img src="img/item03.jpg" alt="" />Tシャツ003</a>

     </li>

    </ul>

   </div>

  </section>

---

⭐️画像はhtmlファイルと同じ階層のところにimgフォルダを作って、その中に、item01.jpgなどと名前をつけて入れておきます。

⭐️liタグにnewというクラス名が付いたらNEWというタグが左上に出るようにします。

⭐️aタグのhref内にはクリックしたら飛びたい先のURLを入れます。

CSS

---

body {

    margin: 0;

   }

   .item-container {

    width: calc(100% - 8rem);

    max-width: 900px;

    border: solid 10px yellowgreen;

    text-align: center;

    margin: 1rem auto;

    padding: 3rem;

   }

   .item-container h2 {

    letter-spacing: 0.2rem;

    margin-bottom: 3rem;

   }

   .item-container ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 3rem 1rem;

   }

   .item-container ul li {

    overflow: hidden;

   }

   .item-container ul li a {

    text-decoration: none;

    position: relative;

    display: block;

   }

   .item-container ul li a:hover {

    opacity: 0.7;

   }

   .item-container ul li img {

    max-width: 100%;

   }

   .item-container ul li.new a::after {

    content: 'NEW';

    font-size: 8px;

    font-weight: bold;

    background: purple;

    color: #fff;

    transform: rotate(-45deg);

    position: absolute;

    top: -0.5rem;

    left: -2.175rem;

    padding: 1rem 2rem 0.25rem;

   }

---

⭐️htmlファイル内にCSSを書きたいときは<style>と</style>の間に書きます。

▼最終的なhtmlファイルはこうなりました。今回はCSSもhtml内に書きました。

次回の記事では今回の作成途中でのポイントをお伝えしたいと思います🌷

htmlとCSSでページを作る際に参考にしていただければ幸いです🐤