• ポートフォリオページの全体的なベーススタイルを設定する方法を理解する
• リセットCSSの役割と実装方法を習得する
• フォントファミリーやカラーなどの基本スタイルを適切に設定できる
• コンテナの最大幅とセンタリングの設定方法を学ぶ
• 適切な余白設計で読みやすいWebページを作成できる

プロジェクト概要

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

ステップ1：全体のベーススタイルを整える

まずは、ページ全体の基本的なスタイルを設定します。このステップでは、サイト全体の統一感を出すための土台を作ります。

設定する内容

• リセットCSS: ブラウザのデフォルトスタイルをリセットする
• bodyの背景色と文字色: サイト全体のベースカラーを設定する
• フォントファミリーの設定: 読みやすいフォントを指定する
• コンテナの最大幅とセンタリング: コンテンツの最大幅を設定し中央揃えにする
• 基本的な余白の調整: 適切な余白を設定してコンテンツを見やすくする

リセットCSSを設定しよう

リセットCSSとは、ブラウザごとに異なるデフォルトのスタイル設定をリセットして、どのブラウザでも同じ見た目になるようにするためのCSSコードです。

なぜリセットCSSが必要なのか？

各ブラウザ（Chrome、Firefox、Safari、Edgeなど）はそれぞれ独自のデフォルトスタイルを持っています。例えば、

• 見出し（h1〜h6）のフォントサイズや余白
• リスト（ul、ol）のマーカースタイルや余白
• 段落（p）の余白
• フォームコントロールの見た目

これらの違いは、同じHTMLコードでもブラウザによって表示が微妙に異なる原因となります。リセットCSSを使用すると、このブラウザ間の違いをなくし、デザインの一貫性を保つことができます。

リセットCSSの基本的なアプローチ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

この最もシンプルなリセットCSSは、以下の効果があります。

• margin: 0; padding: 0; - すべての要素の外部および内部の余白をゼロにリセット
• box-sizing: border-box; - 要素の幅と高さの計算方法を変更し、paddingとborderを含めるようにします

bodyの背景色と文字色の設定

サイト全体のベースカラーを設定します。背景色と文字色は、サイト全体の印象を決める重要な要素です。

背景色と文字色の設定方法

body {
    background-color: #f8f9fa; /* 明るいグレー */
    color: #333333; /* 暗いグレー */
}

このように、bodyセレクタを使用して、ページ全体の背景色と文字色を一度に設定できます。これがサイト全体のベースカラーとなります。

フォントファミリーの設定

Webサイトの印象や読みやすさに大きく影響するフォントファミリーを適切に設定しましょう。フォントの選択は、サイトの雰囲気や内容に合わせて慎重に行う必要があります。

フォントファミリーの設定方法

body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

font-familyプロパティでは、複数のフォントをカンマ区切りで指定します。ブラウザは左から順に利用可能なフォントを適用します。最後にジェネリックフォントファミリー（sans-serif、serifなど）を指定するのが良い習慣です。

line-heightの設定

フォントを設定する際には、line-height（行の高さ）も合わせて設定するとより読みやすくなります。一般的には、1.5〜1.8程度の値が読みやすいとされています。

コンテナの最大幅とセンタリング

コンテンツの最大幅を設定し、中央に配置することで、読みやすく整ったレイアウトを実現します。

コンテナの設定方法

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

この設定には以下の効果があります。

• max-width: 1200px; - コンテンツの最大幅を1200pxに制限します。画面がこれより広い場合でも、コンテンツは1200pxを超えないようになります。
• margin: 0 auto; - 上下のマージンは0、左右のマージンは自動（auto）に設定します。これにより、コンテナが水平方向の中央に配置されます。
• padding: 0 20px; - コンテナの内側に左右20pxの余白を設けます。これにより、コンテンツが画面の端にぴったりくっつかないようにします。

基本的な余白の調整

コンテンツの読みやすさを向上させるために、適切な余白を設定します。余白は、要素同士の間隔を調整し、視覚的な階層を作るために重要です。

余白の設定方法

/* 見出しの余白設定 */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* 段落の余白設定 */
p {
    margin-bottom: 1rem;
}

/* セクション間の余白設定 */
section {
    padding: 2rem 0;
}

余白設計のベストプラクティス

• 一貫性のある数値：8px、16px、24pxなど、一定の倍数で余白を設定すると、デザインに統一感が生まれます。
• 相対単位の活用：emやremなどの相対単位を使うと、フォントサイズに応じて余白が自動調整されます。

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

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

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

• box-sizing: border-box：paddingとborderを要素の幅と高さに含める設定
• margin, padding：要素の外側と内側の余白を調整するプロパティ
• background-color, color：背景色と文字色を設定するプロパティ
• font-family：フォントファミリーを指定するプロパティ
• line-height：行の高さを設定するプロパティ
• max-width：要素の最大幅を制限するプロパティ
• margin: 0 auto：要素を水平方向に中央揃えにする方法

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

次回のレッスン15では、ポートフォリオサイトのヘッダーとナビゲーションをデザインを作成します。