CONTENTS
  1. HOME
  2. CSS
  3. CSS基礎
  4. 画像とレイアウトにスタイルを追加しよう

画像とレイアウトにスタイルを追加しよう

画像とレイアウトにスタイルを追加しよう

画像とキャプションのセットをCSSでスタイリングし、全体のレイアウトと視覚的な見せ方を学びます。
背景色・枠線・影などを使って、情報をカード風にまとめるデザインを体験します。

作成ファイル・保存場所

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

<head>
    <meta charset="UTF-8">
    <title>課題04</title>

</head>

<body>
    <header>
        <h1>お気に入りのカフェ紹介</h1>
    </header>
    <main>
        <figure>
            <img src="https://dummy.kobeya.com/?width=500&height=400&text=CafeImage" alt="カフェの外観を表すダミー画像">
            <figcaption>カフェの外観</figcaption>
        </figure>
        <figure>
            <img src="https://dummy.kobeya.com/?width=500&height=400&text=CafeImage" alt="店舗で提供しているコーヒーの写真">
            <figcaption>エスプレッソ</figcaption>
        </figure>
    </main>
    <footer>
        <p><small>&copy; 2025 CAFE WEB</small></p>
    </footer>
</body>

</html>

コーヒー画像などの相対位置に配置する写真が準備できる場合は、その写真を使用してもOKです。

覚えているかな？今回使用している要素<header> <main> <figure>に関しては、HTML基礎の課題08から課題12までを確認しましょう。忘れている方は、振り返りの復習をしましょう。

あわせて読みたい
セマンティックなHTML構造を作ってみよう（header/main/footer） 作成ファイル・保存場所 作成した html-basic フォルダの中に html08.html というファイル名で保存してください。 目的 HTML5以降で導入されたセマ...
あわせて読みたい
画像とキャプションをセットで扱ってみよう（figure / figcaption） 作成ファイル・保存場所 作成した html-basic フォルダの中に html12.html というファイル名で保存してください。 目的 HTML5で導入された &l...

指示

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

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

チェックポイント

  • 外部CSSファイルがHTMLで正しく読み込まれているか
  • figure 要素がカードのように装飾されているか
  • 背景や枠線、影などを使って視認性が上がっているか
  • text-alignの行揃えの理解
  • border-radiusとbox-shadow:の理解

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

margin と padding （復習）

プロパティよく使う単位説明
margin1em, 2rem, 10px要素の外側の余白。他の要素との間隔を作る
padding1em, 1rem, 5px要素の内側の余白。枠とテキストの間を調整する
単位：em相対サイズ親要素のフォントサイズを基準にした相対指定（ex. 親が16pxなら1em = 16px）
単位：remルート相対サイズルート（html要素）のフォントサイズを基準にした相対指定（通常16px）

今回の課題では 1em や 1rem などの相対単位を使って余白を調整しています。
em は 「今の親要素のサイズに対して何倍か」、rem は 「ルート(html)のサイズに対して何倍か」 を意味します。
どちらも 画面サイズやフォントサイズの変化に柔軟に対応できるため、レスポンシブデザインにも適しています。

text-align（テキストの行揃え）

テキストを左・中央・右に揃えるプロパティです。ブロック要素に指定します。

値説明
left左揃え（初期値）
center中央揃え
right右揃え

border-radius（角丸）

ボックスの角を丸くするプロパティ。単位は px または % を使います。

h1 {
  border-radius: 8px;
}
値の例効果
8px少し丸み
50%または50vh正円（円形）

box-shadow（影をつける）

ボックスに影をつけて立体感を出すプロパティです。

figure {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
値の順番内容
4px 4px横方向・縦方向の影のズレ
10pxぼかしの強さ（大きいと広がる）
rgba(0,0,0,0.3)色（半透明の黒）など

🛠 補足：開発ツールでCSSの状態を確認しよう

ブラウザ（Google Chromeなど）には「デベロッパーツール（検証ツール）」という便利な機能があります。右クリック → 「検証（Inspect）」を選ぶと、ページの構造や適用されているCSSが確認できます。

  • 選択した要素の margin / padding / border が色で視覚的に表示される
  • 画面右側で、実際にどのCSSが適用されているかを確認できる
  • 試しに値を変更して、リアルタイムでレイアウトの変化を見ることができる

今回のページを検証してみましょう。padding の内側に文字があること、border の太さ、margin でどれくらい離れているかなど、CSSがどう効いているかがよく分かります。

スタイルの指定内容

  1. body に指定するスタイル
    • フォントサイズ：16px
    • 行間：1.8
    • 書体： sans-serif
    • 背景色：#f9f9f9
    • 内側余白：20px
  2. header に指定するスタイル
    • 背景色：任意（例：#f0e6dc など落ち着いた色）
    • 内側余白：20px
    • 横幅：700px
    • 左右の外側余白：auto
    • 下余白：1em
    • border-radius: 50vh(角を大きく丸く) ：50%に変更して違いを比べてみましょう
  3. h1 に指定するスタイル
    • 文字サイズ：28px
    • 文字位置：中央揃え（text-align: center;）
  4. main に指定するスタイル
    • 背景色：#ffffff
    • 外枠：1px solid #ccc
    • 内側余白：20px
    • 横幅：700px
    • 左右の外側余白：auto
    • 上下の外余白：2em
  5. figure に指定するスタイル
    • 背景色：白
    • 影：box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    • 内側余白：1em
    • 下余白：2em
    • 中央揃え
  6. figcaption に指定するスタイル
    • フォントサイズ：0.9em
    • 文字位置：中央揃え（text-align: center;）
    • 色：任意（例：#555）

解答例（CSS）

コメントを入れて、HTMLのどの箇所のCSSかを明確にしましょう
/* --- リセット --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 全体設定 --- */
body {
    font-size: 16px;
    line-height: 1.8;
    font-family: sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
}

/* --- ヘッダーエリア --- */
header {
    background-color: #f0e6dc;
    padding: 20px;
    border-radius: 50vh;
    width: 700px;
    margin: 0 auto 1em;
}

/* --- タイトル --- */
h1 {
    font-size: 28px;
    text-align: center;
}

/* --- メインコンテンツエリア --- */
main {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 20px;
    width: 700px;
    margin: 2em auto;
}

/* --- カード風の figure --- */
figure {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 1em;
    margin-bottom: 2em;
    text-align: center;
}

/* --- キャプション（画像の説明） --- */
figcaption {
    font-size: 0.9em;
    text-align: center;
    color: #555;
    margin-top: 0.5em;
}

完成イメージ　表示例