HTMLで動くレシート風ホームページを作った話

Last updated at 2024-10-15Posted at 2024-10-15

ある日、レシートを見て思いました。

「レシートってかあいいな……」

という訳でレシートみたいなレトロでかあいいホームページ作ってみました❕❕♡
序でになんか寂しかったので動かしました（

↓すごくすごく頼りにしてるサイト
https://liveweave.com/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nya_page</title>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f7f7f7;
            font-family: 'Press Start 2P', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden; /* アニメーション中にページがスクロールしないようにする */
        }

        @keyframes moveUpDown {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px); /* 上に20px移動 */
            }
            100% {
                transform: translateY(0); /* 元に戻る */
            }
        }

        .receipt {
            background-color: white;
            width: 300px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            animation: moveUpDown 2s ease-in-out infinite; /* アニメーションを適用 */
        }

        .receipt-header {
            text-align: center;
            border-bottom: 1px dashed black;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        .receipt-content {
            font-size: 12px;
        }

        .receipt-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .total {
            font-weight: bold;
            border-top: 1px solid black;
            padding-top: 10px;
        }

        .receipt-footer {
            text-align: center;
            border-top: 1px dashed black;
            padding-top: 10px;
            margin-top: 10px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="receipt">
        <div class="receipt-header">
            <h2>UTUNYA</h2>
            <p>Last updated　2024/10/15</p>
        </div>
        <div class="receipt-content">
            <div class="receipt-item">
                <span>birthday</span>
                <span>2009/10/01</span>
            </div>
            <div class="receipt-item">
                <span>age</span>
                <span>15</span>
            </div>
            <div class="receipt-item">
                <span>gender</span>
                <span>girl</span>
            </div>
            <div class="receipt-item">
                <span>like</span>
                <span>cheap sweets</span>
            </div>
            <div class="receipt-item">
                <span>dislike</span>
                <span>bitter things</span>
            </div>
            <div class="total receipt-item">
                <span>total</span>
                <span>¥1945</span>
            </div>
        </div>
        <div class="receipt-footer">
            <p>Thank you for your purchase!!</p>
        </div>
    </div>
</body>
</html>

初心者なのでいろんなサイトを参考にして書きました。初心者なので。

以上❕❕

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up