LTech

レッスン13：ポートフォリオページを作ろう！プロジェクト概要とHTML構造

これまで学んできたCSSの知識を活用し、ポートフォリオページの作成を始めます。まずは基本となる考え方を学びましょう。

🎯 学習目標

  • ポートフォリオサイト制作の基本的な考え方を理解する
  • 一貫性のあるデザインの重要性とその実現方法を学ぶ
  • カラーパレットとフォント設定の基本を理解する
  • ベーススタイルの役割と設定方法を習得する
  • 実務で役立つCSS設計のポイントを理解する

📘 目次

  1. プロジェクト概要
  2. 学習の準備をしよう
  3. はじめてのCSS設計のポイント
  4. 実際の開発現場で使えるテクニック
  5. 理解度チェック

📚 レッスン

プロジェクト概要

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

今回のプロジェクトの特徴
これは「塗り絵形式」の実践課題です。HTMLの骨組みは用意されているので、CSSで装飾を加えながら完成させていきます。実際の制作現場でもよく使われる手法です。

使用する技術

  • ボックスモデル：padding、margin、borderを使った要素の配置
  • 色とフォント：統一感のある色使いとフォント設定
  • Flexbox：柔軟なレイアウト作成
  • レスポンシブデザイン：様々な画面サイズに対応
  • ホバー効果：インタラクティブな装飾

学習の準備をしよう

1. ポートフォリオの見本を確認しよう

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

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

2. 提供されるHTML

以下がベースのHTMLです。こちらを元にCSSをコーディングしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Portfolio</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">Portfolio</div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero" id="home">
        <div class="container">
            <div class="profile-image">TT</div>
            <h1>田中 太郎</h1>
            <div class="subtitle">Web Developer</div>
            <p>HTML、CSS、JavaScriptを使ったWebサイト制作に情熱を注いでいます。<br>
                ユーザーにとって使いやすく、美しいWebサイトを作ることを目標に日々学習を続けています。</p>
        </div>
    </section>

    <section class="skills" id="skills">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-box">
                    <div class="skill-icon">H</div>
                    <h3>HTML</h3>
                    <p>セマンティックなマークアップを心がけ、アクセシブルで構造化されたWebページを作成します。SEOにも配慮したコーディングを実践しています。</p>
                </div>
                <div class="skill-box">
                    <div class="skill-icon">C</div>
                    <h3>CSS</h3>
                    <p>レスポンシブデザインとFlexboxを活用し、どんなデバイスでも美しく表示されるレイアウトを構築します。アニメーションも取り入れています。</p>
                </div>
                <div class="skill-box">
                    <div class="skill-icon">J</div>
                    <h3>JavaScript</h3>
                    <p>基本的なプログラミングを学習中。ユーザーとのインタラクションを豊かにする動的な機能の実装に挑戦しています。</p>
                </div>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <div class="container">
            <h2>Contact</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">お名前</label>
                    <input type="text" id="name" name="name" required placeholder="山田太郎">
                </div>
                <div class="form-group">
                    <label for="email">メールアドレス</label>
                    <input type="email" id="email" name="email" required placeholder="example@email.com">
                </div>
                <div class="form-group">
                    <label for="message">メッセージ</label>
                    <textarea id="message" name="message" rows="6" required
                        placeholder="お気軽にメッセージをお送りください..."></textarea>
                </div>
                <button type="submit" class="submit-btn">メッセージを送信</button>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>© 2024 田中 太郎. All rights reserved.</p>
            <div class="social-links">
                <a href="#" title="GitHub">G</a>
                <a href="#" title="X">X</a>
                <a href="#" title="LinkedIn">L</a>
            </div>
        </div>
    </footer>
</body>
</html>

はじめてのCSS設計のポイント

ポートフォリオサイトを作る上で大切なのは、一貫性のあるデザインです。以下のポイントを意識しましょう。

  1. まず全体のベーススタイルを決める（色・フォント・余白のルール）
  2. 共通要素（ヘッダー・フッターなど）のスタイルを設定する
  3. 個別セクション（プロフィール・スキルなど）のスタイルを追加する

カラーパレット

カラーパレットとは、Webサイトやデザインで使用する色の組み合わせのことです。一貫性のあるデザインを作るために選定された複数の色をまとめたものです。

今回使うカラーパレットは次の通りです。

メインカラー
#f8f9fa
背景色（薄いグレー）
#333
文字色（ダークグレー）
#2c3e50
アクセントカラー（ダークブルー）
サブカラー
#ffffff
コンテンツ背景（白）
linear-gradient(135deg, #667eea 0%, #764ba2 100%)
グラデーション（ヘッダー・ヒーロー用）
#dddddd
ボーダー色（グレー）
デザインのポイント: カラーパレットを一貫して使用することで、統一感のあるプロフェッショナルなデザインになります。上記のカラーコードをそのままコピーして使えるので、色の選択に迷わず進めることができます。

フォント設定

フォントはページの印象を決める重要な要素です。今回はゴシック体フォントを使いましょう。

基本フォントファミリー
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
フォントサイズ

フォントサイズは次のルールに従います。

要素 サイズ スタイル例
見出し(h1) 2.5rem (40px相当) 見出し
サブ見出し(h2) 2rem (32px相当) サブ見出し
小見出し(h3) 1.5rem (24px相当) 小見出し
本文 1rem (16px相当) 本文テキスト
補足テキスト 0.9rem (14px相当) 補足テキスト
フォントウェイト（太さ）の使い分け
  • 見出し：font-weight: 700; (太字)
  • 強調テキスト：font-weight: 600; (セミボールド)

余白のルール

一貫性のある余白設定は、プロフェッショナルなデザインの鍵です。以下の余白ルールを適用しましょう。

余白の基本単位

8pxを基本単位として、それを倍数で使うことで統一感のあるレイアウトを作ります。

用途 サイズ 使用例
小さい余白 8px または 0.5rem アイコンと文字の間、リスト項目内の余白
標準余白 16px または 1rem 段落間、セクション内の要素間
大きい余白 24px または 1.5rem カード間、コンテンツブロック間
セクション余白 48px または 2rem メインセクション間
余白設定のベストプラクティス
  • サイト全体で同じパターンに従う
  • 8pxの倍数（8px, 16px, 24px, 32px）を使用する
  • pxの代わりにremを使う場合があります。その場合は、8px→0.5rem、16px→1rem、24px→1.5rem、23px→2remと読み替えてください

実際の開発現場で使えるテクニック

CSSをコーディングする際には以下のポイントを意識しましょう。

💼 プロTips
  • 一貫性のあるスペーシング：8px、16px、24pxなど、規則的な数値を使う
  • カラーパレットの統一：3〜5色程度に抑えて統一感を出す
  • フォントサイズの階層：見出しと本文で明確な差をつける
  • ホバー効果の統一：サイト全体で同じような反応にする
  • 余白の使い方：十分な余白で読みやすさを確保する

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. ポートフォリオページ制作で最初に行うべきステップはどれですか？

2. ベーススタイルを整えるときに最も重要なのはどれですか？

3. ポートフォリオサイト制作で「一貫性のあるデザイン」を実現するために最も効果的な方法はどれですか？

📚 リファレンス

このレッスンで学んだ主要な概念：

  • カラーパレット：統一感のあるデザインのための色の組み合わせ
  • フォント階層：見出しから本文までの一貫したサイズ設定
  • 一貫性のあるデザイン：統一された要素による専門的な印象の作成
  • ベーススタイル：Webサイト全体の基盤となる共通スタイル
  • CSS設計の考え方：計画的で保守性の高いコードの作成方法

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

📘 次回予告

次回のレッスン14では、ポートフォリオサイトのベーススタイルを作成します。

« 前のレッスンへ戻る レッスン14へ進む »

インラインエディタ