LTech

レッスン15: ポートフォリオページのヘッダーとナビゲーションをスタイリングしよう

これまで学んできたCSSの知識を使い、ヘッダーとナビゲーションをスタイリングします。

🎯 学習目標

  • ヘッダーとナビゲーションの効果的なデザイン方法を学ぶ
  • グラデーション背景を使ったヘッダーのスタイリング技術を習得する
  • Flexboxを使った横並びレイアウトを実装する
  • ナビゲーションメニューのリンクスタイリングとホバー効果を作成する
  • ロゴとナビゲーションを組み合わせたレイアウトの構築方法を理解する

📘 目次

  1. プロジェクト概要
  2. ステップ2：ヘッダーとナビゲーションをデザイン
  3. ヘッダーに背景色を設定しよう
  4. ロゴをデザインしよう
  5. ナビゲーションメニューをデザインしよう
  6. 理解度チェック
  7. 次のステップ

📚 レッスン

プロジェクト概要

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

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

ポートフォリオの見本

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

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

ステップ2：ヘッダーとナビゲーションをデザイン

ページの顔となるヘッダー部分をスタイリングします。

学習の準備をしよう

このレッスンでは、ポートフォリオサイトの基礎的なスタイリングを行います。コードエディタを使って、実際にコードを書きながら学習しましょう。

設定する内容

  • ヘッダーに背景色を設定
  • ロゴをデザインしよう
  • ナビゲーションメニューをデザインしよう
  • display: flexを使った中央揃えと左右のレイアウト調整
  • リンクのスタイリング（色、ホバー効果）

ヘッダーに背景色を設定しよう

まずはヘッダー全体に背景色を設定します。以下のCSSを追加してください。

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

ロゴをデザインしよう

ロゴは、ヘッダーの左側に配置されます。CSSでスタイルを整えましょう。

.logo {
    font-size: 1.5rem;
    font-weight: 700;
}

上記のCSSを追加することで、ロゴは以下のように表示されます。

  • 太文字で表示され、視認性が高い

完成したロゴの例

ナビゲーションメニューをデザインしよう

次に、ナビゲーションメニューを横並びにし、整えます。Flexboxを使って効率的にレイアウトを調整しましょう。

CSSで次の効果を追加します。

  • ナビゲーションメニューが横並びになる
  • リンクが白色で見やすくなり、ホバー時に視覚的なフィードバックがある
/* ナビゲーションメニューのスタイル */
nav ul {
    display: flex; /* リストアイテムを横並びに */
    list-style: none;
    gap: 1rem; /* 項目間のスペース */
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 24px;
    transition: all 0.3s ease; /* スムーズな背景色の変化 */
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* ホバー時に半透明の白色背景 */
}

最後にロゴとメニューを横並びにします。

/* ヘッダー内のコンテナを設定 */
header .container {
    display: flex;
    justify-content: space-between; /* ロゴとナビゲーションを左右に配置 */
    align-items: center; /* 中央揃え */
}

上記のCSSを追加することで、ヘッダーは以下のように表示されます。

完成したヘッダーの例（リンクにカーソルを合わせると効果が表示されます）

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

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

チェックポイント：ナビメニューが横並びに表示され、ヘッダーが整っていればOKです。

✅ 理解度チェック

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

1. グラデーション背景を設定する際に、最も適切なプロパティはどれですか？

2. ナビゲーションメニューを横並びにするために使用したプロパティはどれですか？

3. ナビゲーションリンクのホバー効果を実装するために使用した疑似クラスはどれですか？

📚 リファレンス

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

  • background: linear-gradient()：グラデーション背景の設定
  • display: flex：要素を横並びにするFlexboxレイアウト
  • justify-content: space-between：Flex要素を両端に配置
  • align-items: center：Flex要素を垂直方向に中央揃え
  • :hover疑似クラス：マウスホバー時のスタイル変更
  • transition：スタイル変更時のスムーズなアニメーション
  • box-shadow：要素に影をつける
  • gap：Flexアイテム間の間隔を設定

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

📘 次回予告

次回のレッスン16では、ポートフォリオサイトの自己紹介セクションをスタイリングします。

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

インラインエディタ