CONTENTS
  1. HOME
  2. CSS
  3. CSS基礎
  4. 趣味紹介ページに外部CSSを追加しよう

趣味紹介ページに外部CSSを追加しよう

趣味紹介ページに外部CSSを追加しよう

外部CSSファイルを使ってスタイルを分離し、ページ全体の文字スタイル・余白（padding / margin）・背景色の基本を理解する。また、リセットCSSを導入してブラウザごとの初期スタイルの違いを整える方法を学びます。

作成ファイル・保存場所

  • css-basic フォルダの中に以下の2つのファイルを用意してください：
    • HTMLファイル：02.htmlHTMLファイルはコピーして使用可。
    • CSSファイル：style02.css（今回新たに作成）
02.htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>課題02</title>
    <link rel="stylesheet" href="style02.css">

</head>

<body>
    <h1>私の趣味紹介</h1>

    <h2>音楽を聴くこと</h2>
    <p>特に <em>クラシック音楽</em> や <i>映画音楽</i> をよく聴きます。</p>

    <h2>カフェ巡り</h2>
    <h3>お気に入りのカフェ</h3>
    <p>地元の <i>隠れ家的カフェ</i> を探すのが好きです。</p>

    <h2>読書</h2>
    <p>ビジネス書や <em>自己啓発本</em> をよく読みます。</p>
</body>

</html>

指示

以下の手順で、02.html に style02.css を読み込んで、スタイルを適用してください。

  1. <head> に以下の1行を追加して、外部CSSを読み込む： <link rel="stylesheet" href="style02.css">
  2. style02.css ファイルに以下のスタイルを追加してください
  3. 「任意」と書かれている箇所は自分の好きな色でOKです。
  4. 簡易的なリセットCSSを設定しておきましょう。

チェックポイント

  • 外部CSSファイルがHTMLに正しく読み込まれているか
  • * { margin: 0; padding: 0; } のようなリセットCSSの効果が見られるか
  • margin と padding の違いを理解できているか
  • 見出し間の余白や段落のスペーシングが整っているか

今回使うCSSプロパティのポイント

margin（マージン） と padding（パディング） はどちらも「余白」ですが、意味と役割が異なります。

用語意味余白の位置よく使う場面
margin要素の外側の余白他の要素との間隔を調整する要素間のスペースを空けたい時
padding要素の内側の余白要素内のコンテンツとの間隔調整枠と中の文字の間を広げたい時

margin / padding の指定方法いろいろ

記述方法値の数説明例
margin: 10px;1つ上下左右すべてに同じ値が適用される上下左右すべて10px
margin: 10px 20px;2つ上下＝1つ目、左右＝2つ目上下10px、左右20px
margin: 10px 20px 30px;3つ上＝1つ目、左右＝2つ目、下＝3つ目上10px、左右20px、下30px
margin: 10px 20px 30px 40px;4つ上・右・下・左 の順に適用される上10px、右20px、下30px、左40px

また、個別に方向を指定して余白を設定することもできます

プロパティ説明例
margin-top
padding-top		上方向の余白margin-top: 1em;
margin-right
padding-right		右方向の余白padding-right: 16px;
margin-bottom
padding-bottom		下方向の余白margin-bottom: 20px;
margin-left
padding-left		左方向の余白padding-left: 1rem;

CSSでは、値の個数に応じて自動的に方向が割り当てられるため、ショートハンドを使うと効率よくスタイルを記述できます。ただし、わかりにくい時は個別指定（margin-top など）を使ってもOKです。

補足：リセットCSSとは？

ブラウザには最初から「標準スタイル」（ユーザーエージェントスタイルシート）が適用されています。たとえば、段落（<p>）には上下に余白があり、<ul> には左のインデントがあります。

しかし、デザインをCSSで自由にコントロールしたい時、この「標準スタイル」が邪魔になることがあります。

固定ページを表示

そこで使うのが リセットCSS や ノーマライズCSS です。ただし今回は「簡易リセット」を使います。

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

これは「全ての要素に対して、marginとpaddingを0に」「box-sizingを border-box にする」指定です。
これにより、余白のズレを防ぎ、レイアウトが崩れにくくなるというメリットがあります。

またリセットCSSについては以下のような選択肢もあります

どちらも「どのようにリセット・整えるか」の方針が異なりますので、プロジェクトに応じて選びましょう。

リセットCSSってなんですか？モダンCSS（参考記事）Fukuokamiyako PC

スタイルの指定内容

  1. <body> に指定するスタイル
  2. <h1> に指定するスタイル
    • 文字色：任意
    • 内側余白: 0.5文字分
    • 背景色:任意
  3. <h2> に指定するスタイル
    • 文字色：任意
    • 下余白: 0.5文字分
  4. <h3> に指定するスタイル
    • 文字色：任意
    • 下余白: 0.5文字分
  5. <p> に指定するスタイル
    • 文字色：任意
    • 下余白: 2文字分

解答例（CSS）

/* --- リセットCSS（全体に共通） --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 本文全体のスタイル設定 --- */
body {
    font-size: 16px;
    line-height: 1.8;
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #f5f5f5;
    padding: 20px;
   /* margin: 0; */
}

/* --- 見出し（h1） --- */
h1 {
    color: #004080;
    margin-bottom: 1em;
    background-color: #f0f0b3;
    padding: 0.5rem;
}

/* --- 見出し（h2） --- */
h2 {
    color: #006600;
    margin-bottom: 0.5em;
}

h3 {
    color: #004080;
    margin-bottom: 0.5em;
}

/* --- 段落 --- */
p {
    color: #444444;
    margin-bottom: 2em;
}

HTML要素内に指定してある　インラインレベルボックスのem. i要素に文字の色や背景の色を設定してみましょう。

完成イメージ