この記事にはプロモーションが含まれています。

【Web制作シリーズ】CSSでポートフォリオサイトの見た目を整えよう！FlexboxとGrid

2025-08-042025-08-10

Web制作学習シリーズの第5回目です！

ケケンタ

HTMLはできたけど、見た目が全然整ってない…

きっと第4回目を終えた段階では、このような気持ちになったはず。

今回は、第4回で完成したHTML構造にCSSレイアウトを適用して、ポートフォリオサイトの大枠を整えます。FlexboxとGridを使って、基本的なレイアウトを作成し、見た目の土台を完成させます。

レイアウトの基本を理解して、見た目を整えよう！ このシリーズを通して、最終的には完全な自己紹介サイトが完成します。

この記事でできるようになること

FlexboxとGridの基本理解
基本的なレイアウトの作成
レスポンシブ対応の基礎
ポートフォリオサイトの大枠完成

この記事で完成するもの

基本的なレイアウトと詳細スタイリングが整ったポートフォリオサイト（見た目の完成）

シリーズの進行:
第4回でHTML構造を完成させ、シリーズ第5回目となる今回は、CSSでレイアウトと詳細スタイリングを適用します。これでポートフォリオサイトの見た目が完成！次回はJavaScriptによるインタラクティブ機能を追加して完成度を高めます！

シリーズ目次

前回の記事

【Web制作シリーズ】HTML構造を理解しよう！セマンティックタグとフォーム作成

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/12 08:44:59時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

FlexboxとGridの基本理解
基本的なレイアウトの作成
詳細なスタイリングの適用
レスポンシブ対応の基礎
ポートフォリオサイトの見た目完成

第4回のHTML構造を確認しよう

完成したHTML構造

第4回で完成したHTML構造を確認しましょう。これにCSSレイアウトを適用していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです。HTML、CSS、JavaScriptを使ったWeb制作の作品を紹介しています。">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS,JavaScript">
    <title>田中太郎 - Webデザイナー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ヘッダー -->
    <header>
        <nav class="navigation">
            <ul class="nav-menu">
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <!-- ホームセクション -->
        <section id="home">
            <h1>田中太郎</h1>
            <h2>Webデザイナー</h2>
            <p>美しいWebサイトを作ることを心がけています</p>
        </section>

        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>自己紹介</h2>
            <article>
                <h3>経歴</h3>
                <p>Web制作に興味を持ち、独学でHTMLとCSSを勉強しています。</p>
                <p>現在はJavaScriptも学習中で、インタラクティブなWebサイトの制作に挑戦しています。</p>
            </article>

            <aside>
                <h3>趣味</h3>
                <ul>
                    <li>写真撮影</li>
                    <li>読書</li>
                    <li>旅行</li>
                </ul>
            </aside>
        </section>

        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript（学習中）</li>
                <li>Photoshop</li>
            </ul>
        </section>

        <!-- 作品セクション -->
        <section id="works">
            <h2>作品</h2>
            <article>
                <h3>コーポレートサイト</h3>
                <p>企業のブランディングを重視したデザイン</p>
                <img src="work1.jpg" alt="コーポレートサイトのスクリーンショット">
            </article>

            <article>
                <h3>ECサイト</h3>
                <p>ユーザビリティを重視したショッピングサイト</p>
                <img src="work2.jpg" alt="ECサイトのスクリーンショット">
            </article>
        </section>

        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="/submit" method="POST">
                <div>
                    <label for="name">お名前：</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div>
                    <label for="email">メールアドレス：</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div>
                    <label for="category">お問い合わせ種別：</label>
                    <select id="category" name="category" required>
                        <option value="">選択してください</option>
                        <option value="project">プロジェクトの依頼</option>
                        <option value="question">技術的な質問</option>
                        <option value="other">その他</option>
                    </select>
                </div>

                <div>
                    <label for="message">メッセージ：</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>

                <button type="submit">送信</button>
            </form>
        </section>
    </main>

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

現在の状態

このHTMLは構造は完成していますが、CSSが適用されていないため、見た目が整っていません。今回の記事では、このHTMLにCSSレイアウトを適用して、見た目を整えます。

CSSレイアウトの基礎を理解しよう

実際にポートフォリオサイトにCSSを適用して詳細な見た目を整える前に、「CSSレイアウト」について学習しましょう。

ケケンタ

CSSレイアウトを理解することで横並び構造のWebサイトも作成できるようになります。最初は難しいと感じるかもしれませんが、必須スキルなので時間をかけてじっくり理解を深めていきましょう！

ボックスモデル

CSSレイアウトを理解するために、まずボックスモデルについて確認しましょう。

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box;
}

ボックスモデルの構成要素

Content: 実際の内容（width, height）
Padding: 内側の余白
Border: 境界線
Margin: 外側の余白

displayプロパティ

displayプロパティは、要素の表示方法を決める重要なプロパティです。

/* ブロック要素 */
.block {
    display: block;
}

/* インライン要素 */
.inline {
    display: inline;
}

/* インラインブロック */
.inline-block {
    display: inline-block;
}

/* Flexbox */
.flex {
    display: flex;
}

/* Grid */
.grid {
    display: grid;
}

HTMLの各タグにはdisplayが初期設定されています。例えば、pタグならblock、spanタグならinlineがデフォルト値として設定されています。

displayプロパティの違いを理解しよう

実際のHTMLでdisplayプロパティの違いを確認してみましょう。

<!-- サンプルHTML -->
<div class="container">
    <div class="box block">ブロック要素1</div>
    <div class="box block">ブロック要素2</div>

    <span class="box inline">インライン要素1</span>
    <span class="box inline">インライン要素2</span>

    <div class="box inline-block">インラインブロック1</div>
    <div class="box inline-block">インラインブロック2</div>

    <div class="flex-container">
        <div class="box">Flexアイテム1</div>
        <div class="box">Flexアイテム2</div>
        <div class="box">Flexアイテム3</div>
    </div>
</div>

/* 基本的なスタイル */
.container {
    margin: 20px;
    border: 2px solid #333;
    padding: 10px;
}

.box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 5px;
    border: 1px solid #0056b3;
}

/* displayプロパティの違い */
.block {
    display: block;
    /* ブロック要素：幅いっぱいに広がり、改行される */
}

.inline {
    display: inline;
    /* インライン要素：内容の幅だけ取り、横並びになる */
    /* width、height、margin-top/bottomは効かない */
}

.inline-block {
    display: inline-block;
    /* インラインブロック：横並びになりつつ、ブロック要素の特性も持つ */
}

/* Flexboxの例 */
.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    padding: 10px;
    margin-top: 20px;
}

.flex-container .box {
    background-color: #28a745;
    border-color: #1e7e34;
}

表示結果

ブロック要素1

ブロック要素2

インライン要素1 インライン要素2

インラインブロック1

インラインブロック2

Flexアイテム1

Flexアイテム2

Flexアイテム3

表示結果の違い

block: 要素が縦に積み重なる（改行される）
inline: 要素が横並びになるが、サイズ調整ができない
inline-block: 横並びになりつつ、サイズ調整も可能
flex: 子要素を柔軟に配置できる（横並びで均等配置）

この違いを理解することで、どのレイアウト手法を選ぶべきかがわかります。

従来のレイアウト手法（古い手法）

floatを使ったレイアウト（古い手法）

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

問題点

複雑で理解しにくい
レスポンシブ対応が困難
レイアウトが崩れやすい

Flexboxで基本レイアウトを作ろう

Flexboxとは

Flexboxは、要素を柔軟に配置するためのCSSレイアウト技術です。

ケケンタ

PC版では横並びだけど、スマホサイズでは縦並びにしたい、といったときに重宝します！

Flexboxの特徴

1次元のレイアウト（行または列）
要素のサイズを自動調整
簡単な中央揃え
レスポンシブ対応が容易

Flexboxの基本概念

.container {
    display: flex;
    flex-direction: row; /* 横並び（デフォルト） */
    justify-content: center; /* 主軸方向の配置 */
    align-items: center; /* 交差軸方向の配置 */
    flex-wrap: wrap; /* 折り返し */
}

Flexboxの軸

主軸（Main Axis）: flex-directionで決まる方向
交差軸（Cross Axis）: 主軸に垂直な方向

主要なFlexboxプロパティ

flex-direction（主軸の方向）

.flex-row {
    flex-direction: row; /* 左から右（デフォルト） */
}

.flex-column {
    flex-direction: column; /* 上から下 */
}

.flex-row-reverse {
    flex-direction: row-reverse; /* 右から左 */
}

.flex-column-reverse {
    flex-direction: column-reverse; /* 下から上 */
}

justify-content（主軸方向の配置）

.flex-start {
    justify-content: flex-start; /* 開始位置 */
}

.flex-end {
    justify-content: flex-end; /* 終了位置 */
}

.center {
    justify-content: center; /* 中央 */
}

.space-between {
    justify-content: space-between; /* 両端揃え */
}

.space-around {
    justify-content: space-around; /* 均等配置 */
}

.space-evenly {
    justify-content: space-evenly; /* 完全均等配置 */
}

align-items（交差軸方向の配置）

.stretch {
    align-items: stretch; /* 伸縮（デフォルト） */
}

.flex-start {
    align-items: flex-start; /* 開始位置 */
}

.flex-end {
    align-items: flex-end; /* 終了位置 */
}

.center {
    align-items: center; /* 中央 */
}

.baseline {
    align-items: baseline; /* ベースライン */
}

実践例：ナビゲーションメニュー

表示内容

<nav class="navigation">
    <ul class="nav-menu">
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">自己紹介</a></li>
        <li><a href="#works">作品</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
    </ul>
</nav>

.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

実践例：カードレイアウト

表示内容

HTML5

CSS3

JavaScript

<div class="card-container">
    <div class="card">
        <h3>HTML5</h3>
        <p>セマンティックなマークアップ</p>
    </div>
    <div class="card">
        <h3>CSS3</h3>
        <p>モダンなスタイリング</p>
    </div>
    <div class="card">
        <h3>JavaScript</h3>
        <p>インタラクティブな機能</p>
    </div>
</div>

.card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

Gridでセクション配置を整えよう

Gridとは

Gridは、2次元のレイアウトを作成するためのCSSレイアウト技術です。

Gridの特徴

2次元のレイアウト（行と列）
複雑なレイアウトが簡単
レスポンシブ対応が容易
要素の配置が自由

ケケンタ

Excelやスプレッドシートのようなマス目（＝グリッド）を用意して、その上に要素をパズル間隔で配置できるため、HTMLの順序に縛られない柔軟な配置が可能です。

Gridの基本概念

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列 */
    grid-template-rows: auto auto; /* 2行 */
    gap: 20px; /* グリッド間の余白 */
}

Gridの構成要素

Grid Container: グリッドの親要素
Grid Item: グリッドの子要素
Grid Line: グリッドの境界線
Grid Track: グリッドの行または列
Grid Cell: グリッドのセル
Grid Area: グリッドの領域

主要なGridプロパティ

grid-template-columns（列の定義）

/* 固定幅 */
.grid-1 {
    grid-template-columns: 200px 200px 200px;
}

/* フラクション単位 */
.grid-2 {
    grid-template-columns: 1fr 2fr 1fr;
}

/* パーセント */
.grid-3 {
    grid-template-columns: 33% 33% 34%;
}

/* repeat関数 */
.grid-4 {
    grid-template-columns: repeat(3, 1fr);
}

/* minmax関数 */
.grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

grid-template-rows（行の定義）

.grid-container {
    grid-template-rows: 100px 200px auto;
}

gap（グリッド間の余白）

.grid-container {
    gap: 20px; /* 行と列の両方 */
    row-gap: 20px; /* 行のみ */
    column-gap: 30px; /* 列のみ */
}

Gridエリアの定義

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

実践例：ポートフォリオグリッド

表示内容

コーポレートサイト

ECサイト

ランディングページ

ブログサイト

<div class="portfolio-grid">
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=1" alt="コーポレートサイトのサンプル画像">
        <h3>コーポレートサイト</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=2" alt="ECサイトのサンプル画像">
        <h3>ECサイト</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=3" alt="ランディングページのサンプル画像">
        <h3>ランディングページ</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=4" alt="ブログサイトのサンプル画像">
        <h3>ブログサイト</h3>
    </div>
</div>

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.portfolio-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.portfolio-item h3 {
    padding: 15px;
    margin: 0;
    text-align: center;
}

本節で登場している画像はPicsumというWebサービスを利用して表示しています。Picsumとは、Web開発やデザインで使用するためのサンプル画像を提供する無料のWebサービスです。このように、Webサイト制作では、便利なWebサービスがたくさんあるため、活用することでコーディングがとてもはかどります！

ここまでのFlexboxやGridレイアウトの内容が難しいと感じたら、書籍やWebサービス、プログラミングスクールを活用してみることをおすすめします。

書籍であれば「図解でわかる！FlexboxとGrid Layout 技術の泉シリーズ（Amazonへ遷移します）」、プログラミングスクールであれば「忍者CODE」がWeb業界最安値で利用ハードルが低いためおすすめです。

忍者CODEについて詳しく見てみる

ポートフォリオサイトの見た目完成

本章では、いよいよポートフォリオサイトの見た目を完成させていきます。

ケケンタ

本章ではかなりの量のCSSを追記します。はじめはめちゃくちゃ難しいと感じると思いますが、一行一行しっかり読み解いていくことで確実に力になるはずです。全体を一度に理解しようとせず、「この一行を消したらどうなる？」といったような形で、少しずつ各プロパティの動作について理解を深めていくことをおすすめします！

基本的なCSSの適用

まずは第4回で完成したHTML構造に、基本的なCSSレイアウトを適用して、ポートフォリオサイトの各セクションを整えましょう。

画像の用意をスキップしたい方は、「作品セクション」のHTMLを以下のように置き換えておきましょう。

<!-- 作品セクション -->
<section id="works">
    <h2>作品</h2>
    <article>
        <h3>コーポレートサイト</h3>
        <p>企業のブランディングを重視したデザイン</p>
        <img src="https://picsum.photos/1280/300?random=1" alt="コーポレートサイトのスクリーンショット">
    </article>
    
    <article>
        <h3>ECサイト</h3>
        <p>ユーザビリティを重視したショッピングサイト</p>
        <img src="https://picsum.photos/1280/300?random=2" alt="ECサイトのスクリーンショット">
    </article>
</section>

6.3 各要素への詳細スタイリング

ヘッダー

/* ヘッダーの詳細スタイリング */
header {
    top: 0;
    left: 50%;
    z-index: 1000;
    position: fixed;
    transform: translateX(-50%);
    margin-bottom: 30px;
    width: 100%;
}

.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 1200px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-menu a:active {
    transform: translateY(0);
}

ホームセクション

/* ホームセクションの詳細スタイリング */
#home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

#home h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out;
}

#home h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease-out 0.2s both;
}

#home p {
    animation: fadeInUp 1s ease-out 0.4s both;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

自己紹介セクション

/* 自己紹介セクションの詳細スタイリング */
#about {
    background: white;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

#about h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 10px;
}

#about h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #2c5aa0;
}

#about article {
    margin-bottom: 2rem;
}

#about article h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#about article p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

#about aside {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    border-left: 4px solid #2c5aa0;
    position: relative;
    overflow: hidden;
}

#about aside::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #2c5aa0, #4a90e2);
}

#about aside h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
}

#about aside ul {
    list-style: none;
    padding: 0;
}

#about aside li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.about-sidebar li:last-child {
    border-bottom: none;
}

スキルセクション

/* スキルセクションの詳細スタイリング */
#skills {
    background: #f8f9fa;
}

#skills h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#skills ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#skills li {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 500;
    color: #2c5aa0;
    transition: all 0.3s ease;
}

#skills li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #2c5aa0, #4a90e2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#skills li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

#skills li:hover::before {
    transform: scaleX(1);
}

作品セクション

/* 作品セクションの詳細スタイリング */
#works {
    background: white;
}

#works h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#works article {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

#works article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

#works article h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    padding: 1rem;
    margin: 0;
}

#works article p {
    color: #666;
    line-height: 1.6;
    padding: 0 1rem 1rem;
}

#works article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#works article:hover img {
    transform: scale(1.05);
}

.work-item h3 {
    padding: 1rem;
    margin: 0;
    color: #2c5aa0;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.work-item p {
    padding: 0 1rem 1rem;
    color: #666;
    line-height: 1.6;
}

お問い合わせフォーム

/* お問い合わせフォームの詳細スタイリング */
#contact {
    background: #f8f9fa;
}

#contact h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#contact form {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#contact form div {
    margin-bottom: 1.5rem;
}

#contact form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

#contact form input,
#contact form textarea,
#contact form select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#contact form input:focus,
#contact form textarea:focus,
#contact form select:focus {
    outline: none;
    border-color: #2c5aa0;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}

#contact form button {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#contact form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#contact form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

#contact form button:hover::before {
    left: 100%;
}

フッター

/* フッターの詳細スタイリング */
footer {
    background: #2c5aa0;
    color: white;
    padding: 2rem;
    text-align: center;
}

footer nav {
    margin-top: 1rem;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

footer nav a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.footer-nav a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.footer-nav a:hover::after {
    width: 100%;
}

基本的なレイアウトの効果

上記のCSSを適用することで、以下の効果が得られます。

ヘッダー: 固定ヘッダーでナビゲーションが横並びに配置
ホームセクション: フルスクリーンで中央揃えのレイアウト
自己紹介セクション: 2カラムのグリッドレイアウト
スキルセクション: レスポンシブなカードグリッド
作品セクション: レスポンシブな画像グリッド
お問い合わせフォーム: 中央揃えのフォームレイアウト

現在の完成度

この時点で、ポートフォリオサイトの基本的な見た目が完成します。レイアウトの大枠に加えて、各要素に詳細なスタイリングが適用され、プロフェッショナルな見た目になります。

次回の第6回では、さらにセクションを充実させ、JavaScriptによるインタラクティブな機能を追加することで、完成度を高めていきます。

実践課題

課題：新しいセクションの追加とCSS適用

要件：
第4回で作成したHTML（現時点の最新HTML）に、新しいセクション「ブログ」を追加し、それに適切なCSSを適用してください。

追加するHTML

<!-- ブログセクション -->
<section id="blog">
    <h2>ブログ</h2>
    <article>
        <h3>Web制作の学習記録</h3>
        <p>HTMLとCSSの学習を通じて、Web制作の基礎を身につけました。</p>
        <time datetime="2024-12-01">2024年12月1日</time>
    </article>

    <article>
        <h3>レスポンシブデザインの重要性</h3>
        <p>モバイルファーストの考え方で、あらゆるデバイスに対応したWebサイトを作成する方法を学びました。</p>
        <time datetime="2024-12-15">2024年12月15日</time>
    </article>
</section>

成果物のコンセプト（例）