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

CSSでプロフィールカードを作成する方法をわかりやすく解説

Webサイトやポートフォリオでよく見かける「プロフィールカード」。CSSを使えば、写真・名前・肩書き・連絡先ボタンをまとめたおしゃれなカードを簡単に作成できます。本記事では、基本的なHTMLとCSSだけで実装できるプロフィールカードのサンプルコードを紹介します。

完成イメージ

今回作成するのは、以下の要素を持つシンプルなプロフィールカードです。

  • 上部に配置したプロフィール画像
  • 名前（見出し）
  • 肩書き（役職）
  • 所在地などの補足情報
  • 「Contact」ボタン

サンプルコード

以下がプロフィールカードの完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .profileCard {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-family: arial;
        background-color: rgb(190, 224, 224);
    }
    .Designation {
        color: rgb(26, 0, 51);
        font-weight: bold;
        font-size: 18px;
    }
    button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: rgb(23, 31, 102);
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }
    button:hover, a:hover {
        opacity: 0.7;
    }
</style>
</head>
<body>
<h2 style="text-align:center">ユーザープロフィールカードの例</h2>
<div class="profileCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="John" style="width:100%" />
<h1>John Doe</h1>
<p class="Designation">WebDeveloper</p>
<p>Michigan</p>
<p><button>Contact</button></p>
</div>
</body>
</html>

コードのポイント解説

1. カード全体のスタイリング（.profileCard）

box-shadow プロパティでカードに柔らかい影を付け、立体感を演出しています。max-width: 300px でカードの幅を制限し、margin: auto によって画面中央に配置しています。背景色は落ち着いた青緑系に設定しています。

2. 肩書き部分のデザイン（.Designation）

肩書きは太字・18pxのフォントサイズで強調し、濃い紺色を指定することで視認性を高めています。

3. ボタンのスタイリング

border: none と outline: 0 でボタンの枠線を消し、width: 100% でカード幅いっぱいに広げています。また、cursor: pointer を指定することで、マウスオーバー時にクリック可能であることが直感的にわかるようになっています。

4. ホバー時のエフェクト

:hover 疑似クラスで不透明度を0.7に下げることで、ボタンやリンクにカーソルを合わせた際にさりげないアニメーション効果を与えています。

表示結果

上記のコードを実行すると、中央に配置された影付きのカードに、プロフィール画像・名前・肩書き・所在地・コンタクトボタンが縦に並んだプロフィールカードが表示されます。ボタンにマウスを合わせると、透明度が変化してホバー効果が確認できます。

応用のヒント

さらにカスタマイズしたい場合は、以下のような工夫がおすすめです。

  • SNSアイコンやリンクを追加してソーシャルメディアへの導線を作る
  • border-radius を使って角丸のデザインにする
  • FlexboxやGridレイアウトと組み合わせて複数カードを並べる
  • ダークモード対応の配色バリエーションを用意する

CSSの基本プロパティだけでもここまで表現力のあるUIが作れるので、ぜひ自分のサイトに合わせてアレンジしてみてください。

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

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

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が