HTMLとCSSで簡単なプロフィールカードを作りました。

簡単なプロフィールカードのシンプルなひな型です。メモしときます。

見本

この投稿をInstagramで見る

mitamura hiro(@mitamurahiro)がシェアした投稿

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プロフィールカード</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
  <style>
    .profile-card {
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 0;
      padding: 16px;
      font-family: sans-serif;
      background-color: #f9f9f9;
    }

    .profile-card img {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 12px;
    }

    .profile-card h2 {
      margin: 0 0 8px;
      font-size: 20px;
      color: #333;
    }

    .profile-card p {
      margin: 0 0 12px;
      font-size: 14px;
      color: #666;
    }

    .social-icons {
      display: flex;
      gap: 10px;
    }

    .social-icons a {
      color: #444;
      text-decoration: none;
      font-size: 18px;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #1da1f2; /* X(Twitter)っぽい色、他にも合わせられます */
    }
  </style>
</head>
<body>

  <div class="profile-card">
    <img src="https://picsum.photos/100" alt="プロフィール画像">
    <h2>山田 太郎</h2>
    <p>Webデベロッパー / デザイナー</p>
    <div class="social-icons">
      <a href="https://x.com/" target="_blank" aria-label="X"><i class="fab fa-twitter"></i></a>
      <a href="https://instagram.com/" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
      <a href="https://mastodon.social/" target="_blank" aria-label="Mastodon"><i class="fab fa-mastodon"></i></a>
      <a href="https://youtube.com/" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
    </div>
  </div>

</body>
</html>

Share This…