<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <title>test</title> <style> body{margin:0; font-family:sans-serif; color:#123456; background:linear-gradient(180deg,#efffff,#ffffff,#efffff,#eeffff); background-repeat:no-repeat; opacity:0; animation:フェードイン 2s ease-in forwards;} @keyframes フェードイン{from{opacity:0;} to{opacity:1;}} header{background:#456789; color:#ffffff; padding:16px; font-size:24px; text-align:center;} main{padding:16px;} </style> </head> <body> <header>test</header> <main> <div> <h2>カード</h2> <p>説明</p> </div> </main> </body> </html>