MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！おしゃれなプロフィールカードデザイン11選

【HTML/CSS】コピペ！おしゃれなプロフィールカードデザイン11選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれなプロフィールカードデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ベーシック・カード型（王道のプロフィールカード）

ブログのサイドバーや記事下、またはポートフォリオサイトの自己紹介エリアでよく使われる、汎用性の高い名刺風のカードデザインです。

ここでは、以下のベーシック・カード型（王道のプロフィールカード）のデザイン例を記載しています。

ベーシック・カード型（王道のプロフィールカード）
  • センター寄せ・丸型アイコンカード
  • 横長レイアウト（左アイコン・右テキスト）
  • SNSアイコン横並びカード

実際のデザインプレビューとHTML＆CSSコードを記載しています。

センター寄せ・丸型アイコンカード

ブログのサイドバー（ウィジェットエリア）や記事の末尾など、あらゆる場所に配置しやすい最も王道で汎用性の高いデザインです。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア / ブロガー

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。

HTMLコード表示
<div class="cs-prof-center">
    <!-- ▼ アイコン画像 ▼ -->
    <figure class="cs-prof-center-img-wrap">
        <!-- 画像は必ず正方形（1:1）か、CSS側でobject-fitを指定して丸く切り抜きます -->
        <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-center-img">
    </figure>
    
    <!-- ▼ 名前と肩書き ▼ -->
    <div class="cs-prof-center-name">Webデザイン太郎</div>
    <span class="cs-prof-center-role">フロントエンドエンジニア / ブロガー</span>
    
    <!-- ▼ 自己紹介文 ▼ -->
    <p class="cs-prof-center-desc">
        約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。
    </p>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-center {
    width: 100%;
    max-width: 350px; /* サイドバーに収まりやすい幅 */
    margin: 0 auto 2em;
    padding: 32px 24px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* ふんわりとした自然な影 */
    text-align: center; /* 中身をすべて中央寄せにする */
    box-sizing: border-box;
}

/* =========================================
   丸型アイコン画像
========================================= */
.cs-prof-center-img-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px; /* 中央配置＆下部余白 */
    padding: 0;
    border-radius: 50%; /* 完璧な丸型にするコード */
    background-color: #f1f5f9; /* 画像が読み込まれる前の背景色 */
    
    /* アイコンの周りに少しだけ装飾の枠線をつける */
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    
    overflow: hidden; /* 丸枠からはみ出た部分を隠す */
}

.cs-prof-center-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 長方形の画像でも歪まずに中央を切り抜く */
    display: block;
}

/* =========================================
   テキストエリア（名前・肩書き・紹介文）
========================================= */
.cs-prof-center-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b; /* 真っ黒ではなく、少し青みがかったモダンなダークグレー */
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.cs-prof-center-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2589d0; /* アクセントカラー（青） */
    margin-bottom: 16px;
}

.cs-prof-center-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7; /* 読みやすい行間 */
    margin: 0;
    text-align: left; /* 長文の紹介文は左寄せの方が見やすいため、ここで上書き */
}

横長レイアウト（左アイコン・右テキスト）

ブログ記事の最後に配置される「この記事を書いた人」エリアや横幅を広く使えるメインコンテンツエリアでよく使われるデザインです。

プロフィール画像
フロントエンドエンジニア / ブロガー
Webデザイン太郎

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。

HTMLコード表示
<div class="cs-prof-horizontal">
    <!-- ▼ 左側：アイコン画像 ▼ -->
    <figure class="cs-prof-horizontal-img-wrap">
        <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-horizontal-img">
    </figure>
    
    <!-- ▼ 右側：テキスト情報 ▼ -->
    <div class="cs-prof-horizontal-body">
        <span class="cs-prof-horizontal-role">フロントエンドエンジニア / ブロガー</span>
        <div class="cs-prof-horizontal-name">Webデザイン太郎</div>
        <p class="cs-prof-horizontal-desc">
            約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。
        </p>
    </div>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠（PC：横並び設定）
========================================= */
.cs-prof-horizontal {
    width: 100%;
    max-width: 800px; /* 記事下のエリアに合わせて少し広めに確保 */
    margin: 0 auto 2em;
    padding: 24px 32px;
    background-color: #f8fafc; /* コンテンツと区別しやすい、ごく薄いグレー背景 */
    border-radius: 12px;
    
    /* Flexboxで中の要素（アイコンとテキスト）を横並びにする */
    display: flex;
    align-items: flex-start; /* 要素を上端で揃える */
    gap: 24px; /* アイコンとテキストの間の余白 */
    box-sizing: border-box;
}

/* =========================================
   左側：丸型アイコン画像
========================================= */
.cs-prof-horizontal-img-wrap {
    flex-shrink: 0; /* 右側のテキストが増えても、画像を絶対に潰さない */
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e2e8f0;
    border: 3px solid #ffffff; /* アイコンを際立たせる白い縁取り */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cs-prof-horizontal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   右側：テキストエリア
========================================= */
.cs-prof-horizontal-body {
    flex-grow: 1; /* 余った横幅をすべてテキストエリアとして使う */
}

.cs-prof-horizontal-role {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #2589d0; /* 肩書きを小さなバッジ風に装飾 */
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.cs-prof-horizontal-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.cs-prof-horizontal-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   レスポンシブ対応（スマホ表示時に縦積みに変形）
========================================= */
@media screen and (max-width: 640px) {
    .cs-prof-horizontal {
        flex-direction: column; /* 縦積みに変更 */
        align-items: center; /* 全体を中央寄せ */
        text-align: center; /* テキストも中央寄せ */
        padding: 24px 20px;
        gap: 16px; /* アイコンとテキストの余白を少し詰める */
    }
    
    .cs-prof-horizontal-img-wrap {
        width: 80px;
        height: 80px;
    }
    
    .cs-prof-horizontal-desc {
        text-align: left; /* 長文の紹介文は左寄せをキープする */
    }
}

SNSアイコン横並びカード

現代のプロフィール表示において、X（旧Twitter）やGitHub、InstagramなどのSNSアカウントへの導線は必須です。

このデザインでは、自己紹介文の下にSNSリンクのボタンを美しく等間隔に配置し、ホバー（マウスオーバー）した際にフワッと浮き上がるようなリッチなアクションを加えています。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア / ブロガー

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。

HTMLコード表示
<div class="cs-prof-sns">
    <!-- ▼ アイコン画像 ▼ -->
    <figure class="cs-prof-sns-img-wrap">
        <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-sns-img">
    </figure>
    
    <!-- ▼ テキスト情報 ▼ -->
    <div class="cs-prof-sns-name">Webデザイン太郎</div>
    <span class="cs-prof-sns-role">フロントエンドエンジニア / ブロガー</span>
    <p class="cs-prof-sns-desc">
        約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。
    </p>

    <!-- ▼ SNSリンクアイコン一覧 ▼ -->
    <ul class="cs-prof-sns-list">
        <!-- 1. X (Twitter) -->
        <li>
            <a href="#" class="cs-prof-sns-link" aria-label="X (Twitter)">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
            </a>
        </li>
        <!-- 2. GitHub -->
        <li>
            <a href="#" class="cs-prof-sns-link" aria-label="GitHub">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
            </a>
        </li>
        <!-- 3. Instagram -->
        <li>
            <a href="#" class="cs-prof-sns-link" aria-label="Instagram">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
            </a>
        </li>
    </ul>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-sns {
    width: 100%;
    max-width: 350px;
    margin: 0 auto 2em;
    padding: 32px 24px 24px; /* 下部はSNSアイコンが来るため少し狭く設定 */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: center;
    box-sizing: border-box;
}

/* =========================================
   丸型アイコン・テキスト
========================================= */
.cs-prof-sns-img-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    padding: 0;
    border-radius: 50%;
    background-color: #f1f5f9;
    overflow: hidden;
}

.cs-prof-sns-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-prof-sns-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.cs-prof-sns-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 16px;
}

.cs-prof-sns-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

/* =========================================
   SNSリンクアイコンのレイアウト
========================================= */
.cs-prof-sns-list {
    display: flex;
    justify-content: center; /* アイコン群を中央に配置 */
    gap: 16px; /* アイコンとアイコンの間の隙間を均等に開ける */
    list-style: none; /* デフォルトのリストマークを消去 */
    padding: 0;
    margin: 24px 0 0 0; /* 自己紹介文との間に余白を作る */
}

/* =========================================
   SNSボタンの装飾とホバーアニメーション
========================================= */
.cs-prof-sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* タップしやすい少し大きめのサイズ */
    height: 44px;
    background-color: #f1f5f9; /* 未ホバー時は淡いグレー */
    color: #64748b; /* アイコンの色もグレー */
    border-radius: 50%; /* 完全な丸型ボタンにする */
    text-decoration: none;
    transition: all 0.3s ease; /* ホバー時の変化を0.3秒かけて滑らかに */
}

.cs-prof-sns-link svg {
    width: 20px;
    height: 20px;
}

/* PC等でのホバー（マウスオーバー）時の変化 */
.cs-prof-sns-link:hover {
    background-color: #1e293b; /* 背景をダークグレーに */
    color: #ffffff; /* アイコンを白に */
    transform: translateY(-4px); /* 上に4pxフワッと浮き上がらせる */
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); /* 浮いた分の影を落とす */
}

モダン・装飾型（トレンドを取り入れたプロフィールデザイン）

ただの四角い枠ではなく、最新のCSSプロパティを活用して視覚的なインパクトを持たせた、デザイン性の高いプロフィールです。

ここでは、以下のモダン・装飾型（トレンドを取り入れたプロフィールデザイン）のデザイン例を記載しています。

モダン・装飾型（トレンドを取り入れたプロフィールデザイン）
  • カバー画像付きヘッダー型カード
  • グラスモーフィズム（すりガラス風）カード
  • 柔らかいニューモーフィズム風カード

実際のデザインプレビューとHTML＆CSSコードを記載しています。

カバー画像付きヘッダー型カード

X（旧Twitter）やFacebookのプロフィール画面でおなじみ、上部に横長の背景画像（カバー）を敷き、その境界線にプロフィールアイコンを重ねる視覚的インパクトの強いデザインです。

カバー画像
プロフィール画像
Webデザイン太郎
フロントエンドエンジニア / ブロガー

フロントエンド技術の解説や、モダンなWebサイト構築のノウハウを発信しています。最新のCSSレイアウトを活用した、保守性の高いコーディングが得意です。

HTMLコード表示
<div class="cs-prof-cover">
    <!-- ▼ 上部：カバー画像エリア ▼ -->
    <figure class="cs-prof-cover-header">
        <!-- サイトのテーマカラーに合った風景やテクスチャの画像を指定します -->
        <img src="https://picsum.photos/id/1043/600/200" alt="カバー画像" class="cs-prof-cover-bg">
    </figure>

    <!-- ▼ 下部：コンテンツエリア ▼ -->
    <div class="cs-prof-cover-body">
        
        <!-- 丸型アイコン（カバー画像に重ねる） -->
        <figure class="cs-prof-cover-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-cover-img">
        </figure>

        <!-- テキスト情報 -->
        <div class="cs-prof-cover-name">Webデザイン太郎</div>
        <span class="cs-prof-cover-role">フロントエンドエンジニア / ブロガー</span>
        <p class="cs-prof-cover-desc">
            フロントエンド技術の解説や、モダンなWebサイト構築のノウハウを発信しています。最新のCSSレイアウトを活用した、保守性の高いコーディングが得意です。
        </p>
    </div>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-cover {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2em;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    
    /* ▼ 角丸からはみ出るカバー画像を隠す ▼ */
    overflow: hidden; 
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* =========================================
   カバー画像エリア
========================================= */
.cs-prof-cover-header {
    width: 100%;
    height: 120px; /* カバー画像の高さを固定 */
    margin: 0;
    padding: 0;
    background-color: #cbd5e1; /* 画像読み込み前のプレースホルダー色 */
}

.cs-prof-cover-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   下部コンテンツエリア（テキスト等）
========================================= */
.cs-prof-cover-body {
    padding: 0 24px 24px;
    position: relative;
    text-align: center;
}

/* =========================================
   丸型アイコン画像（境界線に重ねる）
========================================= */
.cs-prof-cover-img-wrap {
    width: 88px;
    height: 88px;
    
    /* ▼ 魔法のコード：ネガティブマージンで上に引き上げる ▼ */
    /* アイコンの高さ(88px)の半分(44px)に、ボーダー分を加味して上にずらす */
    margin: -48px auto 12px; 
    
    padding: 0;
    position: relative;
    border-radius: 50%;
    background-color: #f1f5f9;
    
    /* カバー画像との境界をくっきりさせるための白い太枠 */
    border: 4px solid #ffffff; 
    box-sizing: border-box;
    overflow: hidden;
}

.cs-prof-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   テキストエリア（名前・肩書き・紹介文）
========================================= */
.cs-prof-cover-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.cs-prof-cover-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 16px;
}

.cs-prof-cover-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    text-align: left; /* 読みやすさ重視の左寄せ */
}

グラスモーフィズム（すりガラス風）カード

AppleのUIなどでも積極的に採用されている「グラスモーフィズム」は、背景を半透明のすりガラスのようにぼかし、要素を浮かび上がらせる最新のトレンドデザインです。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア / ブロガー

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインが得意です。

HTMLコード表示
<!-- ▼ グラス効果を確認するための背景エリア（デモ用） ▼ -->
<div class="cs-prof-glass-wrapper">
    
    <!-- ▼ すりガラス風プロフィールカード本体 ▼ -->
    <div class="cs-prof-glass-card">
        <figure class="cs-prof-glass-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-glass-img">
        </figure>
        
        <div class="cs-prof-glass-name">Webデザイン太郎</div>
        <span class="cs-prof-glass-role">フロントエンドエンジニア / ブロガー</span>
        
        <p class="cs-prof-glass-desc">
            約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインが得意です。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   背景エリア（ガラス効果を確認するためのデモ用）
   ※実環境でサイト自体に背景がある場合はこのラッパーは不要です
========================================= */
.cs-prof-glass-wrapper {
    width: 100%;
    margin: 0 auto 2em;
    padding: 40px 20px;
    
    /* 美しい斜めのグラデーション背景を設定 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-sizing: border-box;
}

/* =========================================
   すりガラス風プロフィールカード本体
========================================= */
.cs-prof-glass-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
    border-radius: 16px;
    
    /* ▼ 魔法のコード：すりガラス効果 ▼ */
    background: rgba(255, 255, 255, 0.15); /* 白を15%の透明度で敷く */
    backdrop-filter: blur(12px); /* 背後のグラデーションを12px分ぼかす */
    -webkit-backdrop-filter: blur(12px); /* Safari用のプレフィックス */
    
    /* ガラスの縁（エッジ）の光の反射を表現する半透明の白枠 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    
    /* ガラスが浮いているように見せるための柔らかな影 */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* =========================================
   丸型アイコン画像
========================================= */
.cs-prof-glass-img-wrap {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    
    /* アイコンの枠線も半透明にしてガラス感を統一 */
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.cs-prof-glass-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   テキストエリア（名前・肩書き・紹介文）
========================================= */
/* 背景が濃い色（暗め）のため、文字色は白を基調にして視認性を高めます */

.cs-prof-glass-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff; /* 白文字 */
    margin: 0 0 4px 0;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 文字が背景に埋もれないように影をつける */
}

.cs-prof-glass-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    /* 真っ白ではなく少し透けさせて階層を作る */
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 16px;
}

.cs-prof-glass-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

柔らかいニューモーフィズム風カード

ニューモーフィズム（Neumorphism）は、フラットデザインのシンプルさを保ちつつ、要素が背景から「押し出された」ような立体的で柔らかな質感を表現する近年人気のデザインスタイルです。

枠線（border）を一切使わず、光と影の計算だけでUIを構築するため、非常に洗練された印象を与えます。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア / ブロガー

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインが得意です。

HTMLコード表示
<!-- ▼ ニューモーフィズムを成立させるための背景エリア（デモ用） ▼ -->
<div class="cs-prof-neumorph-wrapper">
    
    <!-- ▼ ニューモーフィズム・プロフィールカード本体 ▼ -->
    <div class="cs-prof-neumorph-card">
        
        <!-- 丸型アイコン -->
        <figure class="cs-prof-neumorph-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-neumorph-img">
        </figure>
        
        <!-- テキスト情報 -->
        <div class="cs-prof-neumorph-name">Webデザイン太郎</div>
        <span class="cs-prof-neumorph-role">フロントエンドエンジニア / ブロガー</span>
        <p class="cs-prof-neumorph-desc">
            約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインが得意です。
        </p>
    </div>

</div>
CSSコード表示
/* =========================================
   背景エリア（デモ用）
========================================= */
.cs-prof-neumorph-wrapper {
    width: 100%;
    margin: 0 auto 2em;
    padding: 40px 20px;
    /* ニューモーフィズムの基本となる明るいグレー（少し青み） */
    background-color: #e0e5ec; 
    border-radius: 16px;
    box-sizing: border-box;
}

/* =========================================
   プロフィールカード本体
========================================= */
.cs-prof-neumorph-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
    border-radius: 20px;
    
    /* ▼ 背景色を親と完全に一致させる ▼ */
    background-color: #e0e5ec;
    
    /* ▼ 魔法のコード：光と影で作る立体感 ▼ */
    /* 右下には暗い影、左上には白い光（ハイライト）を落とす */
    box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
               -9px -9px 16px rgba(255, 255, 255, 0.6);
}

/* =========================================
   丸型アイコン画像
========================================= */
.cs-prof-neumorph-img-wrap {
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
    padding: 0;
    border-radius: 50%;
    
    /* アイコンも背景と同じ色にする */
    background-color: #e0e5ec;
    
    /* アイコン自体もポコッと浮き出させる */
    box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.6), 
               -6px -6px 12px rgba(255, 255, 255, 0.6);
               
    /* 枠線を使わず、内側に余白（padding）を取って縁取りを表現 */
    padding: 6px; 
    box-sizing: border-box;
}

.cs-prof-neumorph-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* 画像自体も丸く切り抜く */
    display: block;
}

/* =========================================
   テキストエリア
========================================= */
.cs-prof-neumorph-name {
    font-size: 1.3rem;
    font-weight: 800;
    /* 背景がグレーなので、少し青みがかった濃いグレーでコントラストを出す */
    color: #4d5d74; 
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.cs-prof-neumorph-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6a7c92; /* 名前より少し薄いグレー */
    margin-bottom: 20px;
}

.cs-prof-neumorph-desc {
    font-size: 0.95rem;
    color: #6a7c92;
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

省スペース・特殊レイアウト型（限られた領域向けのプロフィール）

ただの四角い枠ではなく、最新のCSSプロパティを活用して視覚的なインパクトを持たせた、デザイン性の高いプロフィールです。

ここでは、以下の省スペース・特殊レイアウト型（限られた領域向けのプロフィール）のデザイン例を記載しています。

省スペース・特殊レイアウト型（限られた領域向けのプロフィール）
  • アコーディオン開閉式プロフィール
  • バッジ・タグ付きスキルセット型

実際のデザインプレビューとHTML＆CSSコードを記載しています。

アコーディオン開閉式プロフィール

スマートフォンの記事下など、スペースが限られている場所に長文のプロフィールを置くと、画面が文字で埋め尽くされてしまいユーザーのストレスになります。

そこで、最初は「顔写真・名前・肩書き」だけを見せておき、興味を持ったユーザーが「詳細を見る」ボタンをタップすると、アニメーションと共に自己紹介文がスライドダウンして現れる設計です。

プロフィール画像
Webデザイン太郎
エンジニア / ブロガー

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。読者の目線に立った分かりやすいUI作りを心がけています。

HTMLコード表示
<div class="cs-prof-accordion">
    
    <!-- ▼ 常に表示されるヘッダー部分 ▼ -->
    <div class="cs-prof-accordion-header">
        <figure class="cs-prof-accordion-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-accordion-img">
        </figure>
        <div class="cs-prof-accordion-info">
            <div class="cs-prof-accordion-name">Webデザイン太郎</div>
            <span class="cs-prof-accordion-role">エンジニア / ブロガー</span>
        </div>
    </div>

    <!-- ▼ 魔法の仕掛け：開閉をコントロールする隠しチェックボックス ▼ -->
    <input type="checkbox" id="cs-prof-toggle" class="cs-prof-accordion-check">
    
    <!-- ▼ 開閉ボタン（ラベル） ▼ -->
    <label for="cs-prof-toggle" class="cs-prof-accordion-label"></label>

    <!-- ▼ スライドして現れる詳細プロフィール（隠しエリア） ▼ -->
    <div class="cs-prof-accordion-body">
        <div class="cs-prof-accordion-inner">
            <p class="cs-prof-accordion-desc">
                約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。コピペで使える美しく堅牢なレイアウト設計が得意です。読者の目線に立った分かりやすいUI作りを心がけています。
            </p>
        </div>
    </div>
    
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-accordion {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2em;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* 中身がはみ出ないようにする */
}

/* =========================================
   ヘッダー部分（アイコンと名前）
========================================= */
.cs-prof-accordion-header {
    display: flex;
    align-items: center;
    padding: 20px 24px 16px;
    gap: 16px;
}

.cs-prof-accordion-img-wrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 50%;
    background-color: #f1f5f9;
    overflow: hidden;
}

.cs-prof-accordion-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-prof-accordion-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.cs-prof-accordion-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}

/* =========================================
   チェックボックスの非表示（裏側の仕掛け）
========================================= */
.cs-prof-accordion-check {
    display: none; /* デフォルトのチェックボックスは完全に隠す */
}

/* =========================================
   開閉ボタン（ラベル）のデザイン
========================================= */
.cs-prof-accordion-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #2589d0;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.cs-prof-accordion-label:hover {
    background-color: #f1f5f9;
}

/* 未チェック時（閉じてる状態）のテキスト */
.cs-prof-accordion-label::before {
    content: '詳細プロフィールを見る';
    margin-right: 8px;
}

/* 下向きの矢印（CSSで描画） */
.cs-prof-accordion-label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #2589d0;
    border-bottom: 2px solid #2589d0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease; /* 矢印の回転アニメーション */
}

/* =========================================
   アコーディオン本体（スライドして現れる部分）
========================================= */
.cs-prof-accordion-body {
    /* 初期状態は高さ0にして隠す */
    max-height: 0; 
    overflow: hidden;
    /* max-heightの数値を変化させて「スライドダウン」を表現 */
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-prof-accordion-inner {
    padding: 0 24px 24px;
}

.cs-prof-accordion-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    padding-top: 16px;
    border-top: 1px dashed #cbd5e1; /* ヘッダーとの区切り線 */
}

/* =========================================
   チェックが入った時（開いた状態）の変化
========================================= */
/* 1. アコーディオン本体を広げる */
.cs-prof-accordion-check:checked ~ .cs-prof-accordion-body {
    max-height: 500px; /* 中身のテキストが確実に収まる十分な高さを指定 */
}

/* 2. ボタンのテキストを変更する */
.cs-prof-accordion-check:checked + .cs-prof-accordion-label::before {
    content: '閉じる';
}

/* 3. 矢印を上向きに回転させる */
.cs-prof-accordion-check:checked + .cs-prof-accordion-label::after {
    transform: translateY(2px) rotate(-135deg);
}

バッジ・タグ付きスキルセット型

クリエイターやエンジニアのポートフォリオ、または技術ブログのサイドバーにおいて「何ができるのか（どんな技術を持っているのか）」を瞬時に伝える実用的なデザインです。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア

長年のプログラミングサイト運営経験を活かし、現在はWebデザイン特化のサイトを運営中。堅牢で保守性の高いコーディングと、ユーザー視点のUI設計を得意としています。

保有スキル・使用技術
  • HTML5 / CSS3
  • TypeScript
  • WordPress
  • SWELL
  • Python
HTMLコード表示
<div class="cs-prof-skill">
    
    <!-- ▼ 1. 基本情報エリア ▼ -->
    <div class="cs-prof-skill-header">
        <figure class="cs-prof-skill-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-skill-img">
        </figure>
        <div class="cs-prof-skill-info">
            <div class="cs-prof-skill-name">Webデザイン太郎</div>
            <span class="cs-prof-skill-role">フロントエンドエンジニア</span>
        </div>
    </div>

    <!-- ▼ 2. 自己紹介テキスト ▼ -->
    <p class="cs-prof-skill-desc">
        長年のプログラミングサイト運営経験を活かし、現在はWebデザイン特化のサイトを運営中。堅牢で保守性の高いコーディングと、ユーザー視点のUI設計を得意としています。
    </p>

    <!-- ▼ 3. スキルバッジ（タグ）エリア ▼ -->
    <div class="cs-prof-skill-tags-wrap">
        <span class="cs-prof-skill-tags-title">保有スキル・使用技術</span>
        <ul class="cs-prof-skill-tags">
            <!-- 各スキルをリストで記述（色はCSSで個別に設定可能） -->
            <li class="cs-prof-skill-tag cs-tag-html">HTML5 / CSS3</li>
            <li class="cs-prof-skill-tag cs-tag-ts">TypeScript</li>
            <li class="cs-prof-skill-tag cs-tag-wp">WordPress</li>
            <li class="cs-prof-skill-tag cs-tag-swell">SWELL</li>
            <li class="cs-prof-skill-tag cs-tag-python">Python</li>
        </ul>
    </div>
    
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-skill {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 2em;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* =========================================
   基本情報エリア（アイコンと名前の横並び）
========================================= */
.cs-prof-skill-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.cs-prof-skill-img-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 50%;
    background-color: #f1f5f9;
    border: 2px solid #e2e8f0;
    overflow: hidden;
}

.cs-prof-skill-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-prof-skill-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.cs-prof-skill-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}

/* =========================================
   自己紹介テキスト
========================================= */
.cs-prof-skill-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* =========================================
   スキルバッジ（タグ）エリア
========================================= */
.cs-prof-skill-tags-wrap {
    padding-top: 16px;
    border-top: 1px dashed #cbd5e1; /* 上部のコンテンツとの区切り線 */
}

.cs-prof-skill-tags-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cs-prof-skill-tags {
    display: flex;
    flex-wrap: wrap; /* ▼幅が足りない場合は自動で改行させる▼ */
    gap: 8px; /* タグ同士の上下左右の隙間を均等に8px開ける */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   バッジの共通装飾（エディター風の美しいカラーリング）
========================================= */
.cs-prof-skill-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px; /* 両端が丸いピル（カプセル）型にする */
    background-color: #f1f5f9; /* デフォルトの背景色（薄いグレー） */
    color: #475569; /* デフォルトの文字色 */
    transition: transform 0.2s ease;
}

/* ホバー時に少し浮き上がるアクション */
.cs-prof-skill-tag:hover {
    transform: translateY(-2px);
}

/* ▼ 各スキルのブランドカラー（文字色を濃く、背景色を極薄にして視認性を確保） ▼ */
.cs-tag-html {
    color: #e34f26;
    background-color: rgba(227, 79, 38, 0.1);
}

.cs-tag-ts {
    color: #3178c6;
    background-color: rgba(49, 120, 198, 0.1);
}

.cs-tag-wp {
    color: #21759b;
    background-color: rgba(33, 117, 155, 0.1);
}

.cs-tag-swell {
    color: #4b5563;
    background-color: #f3f4f6; /* SWELLのモノトーンなイメージ */
    border: 1px solid #d1d5db; /* 枠線を付けて際立たせる */
}

.cs-tag-python {
    color: #3776ab;
    background-color: rgba(55, 118, 171, 0.1);
}

インタラクティブ・アニメーション型（動きで魅せる特殊ケース）

ユーザーのアクション（マウスホバーなど）に反応して形を変える、遊び心のある高度なプロフィールデザインです。

ここでは、以下のインタラクティブ・アニメーション型（動きで魅せる特殊ケース）のデザイン例を記載しています。

インタラクティブ・アニメーション型（動きで魅せる特殊ケース）
  • ホバーで裏返る（フリップ）カード
  • ホバーで詳細がスライドアップするカード
  • 境界線（ボーダー）アニメーションカード

実際のデザインプレビューとHTML＆CSSコードを記載しています。

ホバーで裏返る（フリップ）カード

マウスを乗せる（ホバーする）と、カード全体がクルッと3D回転して裏面が現れる、遊び心のあるデザインです。

表面にはアイコンと名前だけをシンプルに配置し、裏面に詳細な自己紹介文を隠しておくことで、ユーザーの「触ってみたい」という好奇心を刺激し、プロフィールを強く印象付けることができます。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア Hover to flip ⤵

Profile

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインと、保守性の高いコーディングが得意です。

Mouse out to return ⤴
HTMLコード表示
<div class="cs-prof-flip">
    <!-- ▼ 回転するカード本体 ▼ -->
    <div class="cs-prof-flip-inner">
        
        <!-- ==============================
             [表面] アイコンと名前
        ============================== -->
        <div class="cs-prof-flip-front">
            <figure class="cs-prof-flip-img-wrap">
                <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-flip-img">
            </figure>
            <div class="cs-prof-flip-name">Webデザイン太郎</div>
            <span class="cs-prof-flip-role">フロントエンドエンジニア</span>
            
            <!-- 裏面があることを伝えるための小さなアイコンやテキスト -->
            <span class="cs-prof-flip-hint">Hover to flip ⤵</span>
        </div>

        <!-- ==============================
             [裏面] 詳細なプロフィール
        ============================== -->
        <div class="cs-prof-flip-back">
            <h4 class="cs-prof-flip-back-title">Profile</h4>
            <p class="cs-prof-flip-desc">
                約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新トレンドを取り入れたUIデザインと、保守性の高いコーディングが得意です。
            </p>
            
            <!-- 表面に戻るヒント -->
            <span class="cs-prof-flip-hint">Mouse out to return ⤴</span>
        </div>
        
    </div>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠（3D空間の定義）
========================================= */
.cs-prof-flip {
    width: 100%;
    max-width: 320px;
    height: 360px; /* 回転させるため、高さを固定しておく必要があります */
    margin: 0 auto 2em;
    /* ▼ 3Dの奥行き（パース）を設定 ▼ */
    perspective: 1000px; 
}

/* =========================================
   回転するカード本体
========================================= */
.cs-prof-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    /* ▼ 回転アニメーションと3D構造の保持 ▼ */
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* マウスを乗せたらY軸（縦軸）を中心に180度回転させる */
.cs-prof-flip:hover .cs-prof-flip-inner {
    transform: rotateY(180deg);
}

/* =========================================
   表面と裏面の共通設定
========================================= */
.cs-prof-flip-front, 
.cs-prof-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ▼ 裏返った時に要素を非表示にする ▼ */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================================
   [表面] のデザイン
========================================= */
.cs-prof-flip-front {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

.cs-prof-flip-img-wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background-color: #f1f5f9;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.cs-prof-flip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-prof-flip-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.cs-prof-flip-role {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2589d0;
}

/* =========================================
   [裏面] のデザイン
========================================= */
.cs-prof-flip-back {
    /* 裏面はあらかじめ180度回転させて裏返しておく */
    transform: rotateY(180deg);
    
    /* 表面と区別するため、少し濃い色の背景にする */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    border: none;
}

.cs-prof-flip-back-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 16px 0;
    color: #38bdf8; /* アクセントカラーのライトブルー */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cs-prof-flip-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
    text-align: left;
}

/* =========================================
   操作を促すヒントテキスト（Hover to flip 等）
========================================= */
.cs-prof-flip-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: auto; /* コンテナの一番下に押しやる */
    font-weight: 600;
    opacity: 0.7;
}

ホバーで詳細がスライドアップするカード

クリエイターやエンジニアのポートフォリオサイトでよく見られる、洗練されたUIです。

通常時は美しい顔写真（または作品画像）と名前だけが見えており、マウスを乗せると画像が少し拡大しながら、下から黒い半透明の背景と共に詳細な自己紹介文がスッと現れます。

限られたスペースで画像を大きく見せつつ、情報量も担保できるのが最大のメリットです。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。
コピペで使える美しく堅牢なレイアウト設計が得意です。

HTMLコード表示
<div class="cs-prof-slideup">
    
    <!-- ▼ 背景となる画像 ▼ -->
    <img src="https://picsum.photos/id/1025/600/800" alt="プロフィール画像" class="cs-prof-slideup-img">
    
    <!-- ▼ スライドアップするオーバーレイ（黒い半透明の膜）とテキスト ▼ -->
    <div class="cs-prof-slideup-overlay">
        <div class="cs-prof-slideup-content">
            
            <!-- 常に表示されている名前と肩書き -->
            <div class="cs-prof-slideup-name">Webデザイン太郎</div>
            <span class="cs-prof-slideup-role">フロントエンドエンジニア</span>
            
            <!-- マウスホバーで下から現れる自己紹介文 -->
            <p class="cs-prof-slideup-desc">
                約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。<br>
                コピペで使える美しく堅牢なレイアウト設計が得意です。
            </p>
            
        </div>
    </div>
    
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠
========================================= */
.cs-prof-slideup {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 420px; /* ポートフォリオでよく使われる縦長の比率 */
    margin: 0 auto 2em;
    border-radius: 16px;
    
    /* 中の画像が拡大した時にはみ出ないようにする */
    overflow: hidden; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* =========================================
   背景画像（ホバーで少し拡大する）
========================================= */
.cs-prof-slideup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 画像の拡大を0.5秒かけて滑らかに行う */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-prof-slideup:hover .cs-prof-slideup-img {
    /* マウスを乗せると画像を1.08倍にズームさせる */
    transform: scale(1.08);
}

/* =========================================
   オーバーレイ（黒い半透明の膜）
========================================= */
.cs-prof-slideup-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* テキストを下部に配置 */
    padding: 32px 24px;
    box-sizing: border-box;
    
    /* 初期状態：下の方だけが黒いグラデーション */
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, transparent 50%);
    transition: background 0.5s ease;
}

.cs-prof-slideup:hover .cs-prof-slideup-overlay {
    /* マウスを乗せると、全体を覆う濃い半透明の黒に変更 */
    background: rgba(15, 23, 42, 0.85);
}

/* =========================================
   テキスト情報
========================================= */
.cs-prof-slideup-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
    /* 下からスライドする要素に押し上げられる際の動きを滑らかに */
    transition: transform 0.5s ease;
}

.cs-prof-slideup-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8; /* アクセントカラーのライトブルー */
    margin: 0;
    transition: transform 0.5s ease;
}

/* =========================================
   隠されている自己紹介文（ホバーで現れる）
========================================= */
.cs-prof-slideup-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
    
    /* ▼ 最初は高さ0、透明度0にして完全に隠す ▼ */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    
    /* 現れる際のアニメーション設定 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-prof-slideup:hover .cs-prof-slideup-desc {
    /* マウスを乗せると、高さを確保して透明度を1に戻す（スライドアップ） */
    max-height: 200px;
    opacity: 1;
    margin-top: 16px; /* 名前・肩書きとの間に余白を作る */
}

境界線（ボーダー）アニメーションカード

カードの周囲を「光の線」がぐるぐると自動で回り続ける、目を引くアイキャッチ特化型のデザインです。

ゲーミングデバイスのような近未来的な演出や、仮想通貨、最新のWeb3系サービスの紹介などでよく使われます。

JavaScriptを使わず、CSSのグラデーションと回転アニメーションだけでこの複雑な動きを実現しています。

プロフィール画像
Webデザイン太郎
フロントエンドエンジニア

約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新のCSSアニメーションを駆使した視線誘導が得意です。

HTMLコード表示
<div class="cs-prof-border-anim">
    <!-- ▼ 中身のコンテンツエリア（この要素でグラデーションの大部分を隠し、枠線だけを残す） ▼ -->
    <div class="cs-prof-border-content">
        
        <figure class="cs-prof-border-img-wrap">
            <img src="https://picsum.photos/id/1025/400/400" alt="プロフィール画像" class="cs-prof-border-img">
        </figure>
        
        <div class="cs-prof-border-name">Webデザイン太郎</div>
        <span class="cs-prof-border-role">フロントエンドエンジニア</span>
        
        <p class="cs-prof-border-desc">
            約8年間のプログラミングサイト運営を経て、現在はHTML/CSS、TypeScriptの解説や、SWELLを使ったモダンなサイト構築のノウハウを発信しています。最新のCSSアニメーションを駆使した視線誘導が得意です。
        </p>
        
    </div>
</div>
CSSコード表示
/* =========================================
   プロフィールカードの外枠（光る線の発生源）
========================================= */
.cs-prof-border-anim {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto 2em;
    border-radius: 16px;
    
    /* ▼ 回転する巨大なグラデーションのはみ出しを隠す ▼ */
    overflow: hidden; 
    
    /* カード全体の背景色（光っていない部分の線の色） */
    background-color: #1e293b; 
    
    /* コンテンツと外枠の間に隙間（=枠線の太さ）を作る */
    padding: 3px; 
    box-sizing: border-box;
}

/* =========================================
   回転する光のグラデーション（疑似要素で作成）
========================================= */
.cs-prof-border-anim::before {
    content: '';
    position: absolute;
    /* カードの中心に配置し、カードより十分大きなサイズにする */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    
    /* 扇状に色が変化するグラデーション（透明 → 水色 → ピンク → 透明） */
    background: conic-gradient(
        transparent, 
        rgba(56, 189, 248, 1), 
        rgba(236, 72, 153, 1), 
        transparent 30%
    );
    
    /* 4秒かけて1回転するアニメーションを無限ループ */
    animation: cs-border-spin 4s linear infinite;
    z-index: 1; /* コンテンツより背面に配置 */
}

/* 回転アニメーションのキーフレーム */
@keyframes cs-border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   中身のコンテンツエリア（光を隠す「蓋」の役割）
========================================= */
.cs-prof-border-content {
    position: relative;
    z-index: 2; /* 疑似要素のグラデーションより前面に配置 */
    background-color: #0f172a; /* ダークネイビーで塗りつぶす */
    border-radius: 14px; /* 外枠より少し小さい角丸にするのがコツ */
    padding: 32px 24px;
    text-align: center;
}

/* =========================================
   各要素のデザイン（ダークテーマ仕様）
========================================= */
.cs-prof-border-img-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: #1e293b;
    border: 2px solid #334155;
    overflow: hidden;
}

.cs-prof-border-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-prof-border-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #f8fafc; /* 白に近い色 */
    margin: 0 0 4px 0;
}

.cs-prof-border-role {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    /* 光の線と同じ水色系をアクセントに */
    color: #38bdf8; 
    margin-bottom: 16px;
}

.cs-prof-border-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

まとめ

ここでは本記事を分かりやすくまとめています。

本記事のまとめ
  • センター寄せ・丸型アイコンカード
    object-fit: coverで画像を正円に切り抜き、要素を中央揃えにした最も汎用的な基本スタイル。
  • 横長レイアウト
    PCではdisplay: flexで横並び、スマホではメディアクエリにより縦積みに自動可変するレスポンシブ設計。
  • SNSアイコン横並びカード
    インラインSVGを使用し、gapプロパティで等間隔に配置。ホバー時にtransform: translateYで浮遊感を追加。
  • カバー画像付きヘッダー型カード
    上部に背景画像を敷き、ネガティブマージン（margin-topのマイナス値）でアイコンを境界線に重ねるSNS風レイアウト。
  • グラスモーフィズム（すりガラス風）カード
    backdrop-filter: blur()と半透明の背景色・枠線を組み合わせ、背景を透過・ぼかすトレンドデザイン。
  • ニューモーフィズム風カード
    背景と同一のカラーコードを使用し、box-shadowの多重指定（明・暗）によって要素の凹凸を表現する枠線なしの設計。
  • アコーディオン開閉式
    CSSのチェックボックスハックを活用し、max-heightを変化させることでJavaScript不要のスライドダウン開閉を実装。
  • バッジ・タグ付きスキルセット型
    flex-wrap: wrapによる自動改行を活用し、ブランドカラーのrgba指定で視認性の高いピル型のタグを羅列。
  • ホバーで裏返る（フリップ）カード
    perspectiveとtransform-styleで3D空間を定義し、ホバー時にY軸回転（rotateY）させて裏面を表示。
  • 詳細がスライドアップするカード
    初期状態はmax-height: 0とopacity: 0で自己紹介を隠し、ホバー時に黒い半透明膜とともに下からテキストを出現させる。
  • 境界線（ボーダー）アニメーションカード
    背面にconic-gradientの巨大な円を配置して回転させ、不透明のコンテンツで蓋をすることで枠線のみが発光・回転しているように見せる錯視トリック。

よくある質問（FAQ）

プロフィール画像をCSSで綺麗な丸（正円）にするにはどうすればいいですか？

border-radius: 50%;とobject-fit: cover;を組み合わせます。

画像を丸く切り抜くための基本はborder-radius: 50%;を指定することです。

しかし、元画像が長方形の場合、そのまま指定すると綺麗な正円にならず、楕円形に歪んでしまいます。

画像の縦横のサイズ（例：width: 100px; height: 100px;）を指定した上で、object-fit: cover;を追加してください。

これにより、画像の縦横比を維持したまま、指定したサイズに合わせて自動で綺麗にトリミングされます。

スマホで見たときにプロフィールカードのレイアウトが崩れるのを防ぐには？

固定幅（px）を避け、max-widthとFlexboxの折り返し（flex-direction）を活用します。

PC向けにwidth: 600px;のように固定幅を指定すると、スマホ画面ではみ出してしまいます。

外枠にはwidth: 100%; max-width: 600px;のように指定し、画面幅に合わせて縮むように（レスポンシブに）設計してください。

また、PCで画像とテキストを横並びにしている場合、スマホでは幅が狭くなり見づらくなります。

メディアクエリ（@media screen and (max-width: 640px)等）を使用して、スマホ表示時のみFlexboxの向きをflex-direction: column;に変更し、縦積みに切り替えるのが最適な解決策です。

プロフィールカードを画面やエリアの「ど真ん中（中央）」に配置するには？

外枠の要素にmargin: 0 auto;を指定するか、親要素にFlexboxを使用します。

もっとも簡単な方法は、プロフィールカードの外枠の要素に対して、横幅（max-width等）を指定した上でmargin: 0 auto;を設定することです。

これで左右の余白が自動計算され、中央寄せになります。

もし画面の「上下左右」の完全な中央に配置したい場合は、カードを囲む親要素（body等）に対して以下の3行を指定します。

display: flex;
justify-content: center;（左右中央）
align-items: center;（上下中央）

背景が透けているような「すりガラス風」のデザインはどう作りますか？

backdrop-filter: blur();と半透明の背景色を組み合わせます。

近年トレンドの「グラスモーフィズム」と呼ばれるデザインです。

カードの要素に対して、background-color: rgba(255, 255, 255, 0.2);のように透明度を持たせた背景色を指定します。

その上で、backdrop-filter: blur(10px);を指定することで、カードの後ろにある背景画像や色がすりガラスのようにぼやけて透けて見えます。

（※Safariブラウザに対応させるため、-webkit-backdrop-filter: blur(10px);も併記することを推奨します）。

マウスを乗せた時（ホバー時）に、画像だけが少し拡大する動きはCSSだけで作れますか？

はい、transform: scale()とtransitionを使って簡単に実装できます。

画像の要素（または画像を囲む枠）にマウスを乗せた際のアクションとして、:hover疑似クラスに対してtransform: scale(1.1);（1.1倍に拡大）を指定します。

アニメーションを滑らかにするため、元の画像のCSSにtransition: transform 0.3s ease;（0.3秒かけて変化させる）を追加してください。

このとき、親要素（画像を囲む枠）にoverflow: hidden;を指定しておくと、枠のサイズはそのままに、枠の内側でだけ画像がズームするプロらしい美しい演出になります。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次