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

CSSを使ってクーポンを作成する方法【サンプルコード付き】

CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。

クーポン作成のサンプルコード

以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    img {
        width: 100%;
    }
    .couponContainer {
        border: 5px dashed #bbb;
        width: 80%;
        border-radius: 15px;
        margin: 0 auto;
        max-width: 600px;
    }
    .detailContainer {
        padding: 2px 16px;
        background-color: #d4d4d4;
    }
    .promo {
        background: rgb(104, 104, 104);
        color: white;
        padding: 10px;
    }
    .expiryDate {
        color: red;
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="couponContainer">
<div class="detailContainer">
<h3>Food Inc ©</h3>
</div>
<img src="https://images.pexels.com/photos/376464/pexels-photo376464.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="detailContainer" style="background-color:white">
<h2>Worlds Best Pancakes</h2>
</div>
<div class="detailContainer">
<p>
Use code <span class="promo">Free24</span> to get 24% off on your next
dish
</p>
<p class="expiryDate">Expires in 20 days</p>
</div>
</div>
</body>
</html>

コードのポイント

  • .couponContainer： クーポン全体を包むコンテナです。border: 5px dashed #bbb; で破線の枠を描画し、border-radius で角を丸めて柔らかい印象にしています。
  • .detailContainer： 店舗名や説明文などの情報エリアです。背景色を変えることで、セクションごとの区切りが分かりやすくなります。
  • .promo： 割引コードを目立たせるためのスタイルです。グレーの背景に白文字を組み合わせて強調しています。
  • .expiryDate： 有効期限を赤字かつ太字で表示し、ユーザーに締め切りを意識させるデザインです。

表示結果

上記のコードを実行すると、次のようなクーポンがブラウザに表示されます。

CSSを使ってクーポンを作成する方法【サンプルコード付き】

このように、CSSの基本的なプロパティを組み合わせるだけで、画像・テキスト・コード表示を備えた実用的なクーポンを作成できます。色やフォント、余白を調整すれば、自社サイトのデザインに合わせたオリジナルクーポンにも簡単にカスタマイズできますので、ぜひ試してみてください。

  1. CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

    Webサイトやアプリのデザインにおいて、カード型のUIはプロフィール紹介や商品一覧など、さまざまな場面で活用される定番のレイアウトです。CSSを使えば、画像とテキストを組み合わせた洗練されたカードを簡単に作成できます。 この記事では、box-shadow（影）や :hover（ホバー時の変化）を組み合わせて、立体感のあるカードを実装する方法を解説します。 カード作成のサンプルコード 以下のコードは、画像と肩書き情報を持つシンプルなカードの例です。 <!DOCTYPE html> <html> <head> <meta name=viewport con

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>