• 自己紹介セクションの視覚的な魅力を高めるCSSテクニックを習得する
• グラデーションと配色を使って印象的な背景を作成する
• 円形のプロフィール画像を効果的に表示する方法を学ぶ
• テキスト要素の配置と余白調整で読みやすさを向上させる

プロジェクト概要

今回は、これまで学んできたCSSの知識を全て活用して、架空のポートフォリオページを作成します。HTML構造はすでに用意されており、皆さんにはCSSを中心に設計・装飾していただきます。

ポートフォリオの見本

以下のリンクから、今回のポートフォリオページの見本を確認できます。実際のデザインイメージを掴むために参考にしてください。

ポートフォリオ見本を確認する

ステップ3：自己紹介セクションをスタイリング

メインビジュアルとプロフィール部分を魅力的にデザインします。

設定する内容

• セクション全体の中央揃えと背景の設定
• 写真（仮画像）のスタイリング
• 名前とキャッチフレーズの配置
• プロフィール文の余白と読みやすさの調整

セクション全体の中央揃えと背景の設定

まずは、自己紹介セクション全体のレイアウトを整え、背景を設定します。

.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 2rem 0;
}

効果

• 十分な上下の余白（padding）でセクションを目立たせる
• テキストは中央寄せにする
• グラデーションで奥行きを出す

写真（仮画像）のスタイリング

次に自己紹介セクションの中心となる写真（仮画像）をスタイリングしましょう。

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 2rem;
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-size: 3rem;
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

効果

• widthとheight：画像のサイズを150px×150pxに固定
• border-radius: 50%：四角形の要素を完全な円形に変形
• margin: 0 auto 2rem：上部の余白0、左右中央揃え、下部に2remの余白
• background: linear-gradient(45deg, #ff6b6b, #feca57)：暖色系のグラデーションで視覚的に魅力的な背景を作成
• border: 5px solid white：白い枠線で写真を際立たせる
• box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)：下方向に強めの影をつけて立体感を演出
• display: flexとalign-items: center、justify-content: center：中身を完全中央揃えにする（テキストや画像を中央に配置）
• font-size、color、font-weight：イニシャルなどのテキストを表示する場合のスタイリング

名前とキャッチフレーズの配置

次に名前とキャッチフレーズを魅力的に表示します。

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero .subtitle {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

効果

• 名前（h1）は大きめのフォントサイズと太字で存在感を出す
• キャッチフレーズ（.subtitle）はやや小さめにしてバランスをとる

プロフィール文の余白と読みやすさの調整

自己紹介文を読みやすく整えます。

.hero p {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    line-height: 1.8;
}

効果

• max-widthを設定して、長い行になりすぎないようにする（可読性向上）
• line-heightを広めに取り、読みやすさを確保
• 余白（padding）を設定して、小さな画面でも文字が端に張り付かないようにする

お疲れさまでした！以下のリンクから、今回の見本を確認できます。自分の書いた内容と見比べてみてください。

ポートフォリオ見本を確認する

このレッスンで使用した主要なCSSプロパティと概念：

• background: linear-gradient()：グラデーションを使った背景の作成
• border-radius：要素の角を丸める（50%で完全な円形に）
• box-shadow：要素に影をつけて立体感を演出
• display: flex：Flexboxレイアウトによる中央揃え
• text-align: center：テキストを中央に配置
• max-width：要素の最大幅を制限して可読性を向上
• line-height：行間を調整して読みやすさを確保

詳細については、CSSリファレンスをご覧ください。

次回のレッスン17では、ポートフォリオサイトのスキル紹介ボックスのスタイルを作成します。