- カフェのお知らせページを作ろう
- この課題で身につけること
- 今回作るページ
- ページの構造
- 制作条件
- ファイルを準備しよう
- 制作の進め方
- HTMLを作ろう
- HTMLの大きな構造を確認しよう
- sectionには見出しを入れる
- 見出しの順番を確認しよう
- お知らせにリストを使う理由
- 日付にはtimeを使う
- CSSファイルを読み込もう
- ページ全体のCSSを書こう
- 共通する横幅を作ろう
- ヘッダーを作ろう
- メインエリアを作ろう
- カフェ紹介を整えよう
- お知らせエリアを作ろう
- お知らせ一覧を整えよう
- リンクをボタンのようにしよう
- フッターを作ろう
- 完成するCSS
- ボックスの実際の横幅に注意しよう
- 基本課題
- デザイン変更課題
- 余白調整課題
- 発展課題：営業案内を追加しよう
- 発展課題：お知らせを増やそう
- よくある失敗
- 確認問題
- 確認問題の解答
- 完成後のチェックリスト
- 今回覚えておきたいこと
カフェのお知らせページを作ろう
HTMLとCSSの基礎を学んだら、完成見本を確認しながら、実際にWebページを作ってみましょう。
今回制作するのは、架空のカフェ「MORI CAFE」のお知らせページです。
レスポンシブ対応は行わず、パソコンで表示するページを制作します。
この課題で身につけること
この課題では、次の内容を練習します。
- HTMLでページの構造を作る
- 見出し、文章、画像、一覧、リンクを正しく使う
- HTMLとCSSを別ファイルにする
- CSSで横幅を指定する
margin: 0 autoで要素を中央に配置するmarginとpaddingを使い分ける- 背景色を画面いっぱいに表示する
- 中身だけ横幅を制限する
- 画像の大きさを整える
- リンクをボタンのように装飾する
- 枠線、角丸、影を使う
今回作るページ
架空のカフェ「MORI CAFE」の紹介と、最新情報を掲載するページを作ります。
┌──────────────────────────────────────────┐
│ │
│ MORI CAFE │
│ 毎日の暮らしに、小さな休憩を。 │
│ │
├──────────────────────────────────────────┤
│ │
│ ┌──────────────────────┐ │
│ │ │ │
│ │ カフェの写真 │ │
│ │ │ │
│ └──────────────────────┘ │
│ │
│ MORI CAFEについて │
│ │
│ 木のぬくもりを感じながら、ゆっくりと │
│ 過ごせる小さなカフェです。 │
│ │
├──────────────────────────────────────────┤
│ │
│ お知らせ │
│ │
│ 2026.08.10 夏季限定メニューを開始 │
│ 2026.08.01 営業時間変更のお知らせ │
│ 2026.07.20 新しい豆が入荷しました │
│ │
│ メニューを見る │
│ │
├──────────────────────────────────────────┤
│ © MORI CAFE │
└──────────────────────────────────────────┘ページの構造
今回のページは、次の大きなまとまりで構成します。
body
│
├── header
│ └── お店の名前・キャッチコピー
│
├── main
│ │
│ ├── section
│ │ └── 写真・カフェの紹介
│ │
│ └── section
│ └── お知らせ一覧・リンク
│
└── footer
└── 著作権表記HTMLを書くときは、いきなり細かな文字や画像だけを考えるのではなく、最初にページ全体を大きなまとまりに分けます。
制作条件
完成見本を見るだけでなく、次の条件も確認しながら制作してください。
ページ全体
- 文字はゴシック体にする
- 基本の文字色は濃いグレーにする
- ブラウザが最初から持っている余白を削除する
- 背景色は薄いベージュにする
ヘッダー
- 背景色は濃い緑色にする
- 文字色は白にする
- お店の名前とキャッチコピーを中央揃えにする
- 上下に余白を付ける
- 背景色は画面いっぱいに広げる
- 中身の横幅は900pxにする
メインエリア
- 横幅を900pxにする
- ページの左右中央に配置する
- 上下に余白を作る
カフェ紹介
- カフェの画像を表示する
- 画像の横幅を900px、高さを400pxにする
- 画像の角を丸くする
- 画像を変形させずに表示する
- 紹介文を中央揃えにする
お知らせ
- 背景色を白にする
- 内側に40pxの余白を作る
- 角を丸くする
- 薄い影を付ける
- お知らせを3件掲載する
- 日付と内容を表示する
- 項目ごとに下線を付ける
リンク
- 背景色を緑色にする
- 文字色を白にする
- リンクの下線を消す
- 内側に余白を付ける
- 角を丸くする
フッター
- 背景色は濃いグレーにする
- 文字色は白にする
- 文字を中央揃えにする
- 上下に余白を付ける
ファイルを準備しよう
新しいフォルダを作成し、次のようにファイルを用意します。
mori-cafe
│
├── index.html
│
├── css
│ └── style.css
│
└── images
└── cafe.jpgファイルやフォルダの名前には、半角英数字を使用しましょう。
よい例
index.html
style.css
cafe.jpg避けたい例
カフェ.html
スタイル.css
カフェの写真.jpg日本語のファイル名でも表示できる場合はありますが、サーバーへ公開したときに問題が起こる可能性があります。
Web制作では、半角英数字のファイル名を使用する習慣を付けましょう。
制作の進め方
今回は、次の順番で制作します。
完成見本を確認する
↓
HTMLで情報を書く
↓
ページの大きな構造を作る
↓
全体の横幅を決める
↓
要素を中央に配置する
↓
marginとpaddingで余白を整える
↓
色・文字・角丸・影を整える初心者のうちは、最初から文字サイズや色などの細かなデザインを調整したくなるかもしれません。
しかし、まずはHTMLで情報を表示し、その後で大きな幅や配置を決めたほうが、ページを組み立てやすくなります。
HTMLを作ろう
index.htmlに次の内容を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MORI CAFE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<div class="inner">
<h1 class="site-title">MORI CAFE</h1>
<p class="site-message">
毎日の暮らしに、小さな休憩を。
</p>
</div>
</header>
<main class="main-content">
<section class="about">
<img
class="about-image"
src="images/cafe.jpg"
alt="木の家具が並ぶMORI CAFEの店内"
>
<h2 class="section-title">
MORI CAFEについて
</h2>
<p class="about-text">
MORI CAFEは、木のぬくもりを感じながら、<br>
ゆっくりと過ごせる小さなカフェです。<br>
丁寧に淹れたコーヒーと手作りのお菓子をお楽しみください。
</p>
</section>
<section class="news">
<h2 class="section-title">お知らせ</h2>
<ul class="news-list">
<li class="news-item">
<time datetime="2026-08-10">2026.08.10</time>
<p>夏季限定メニューを開始しました</p>
</li>
<li class="news-item">
<time datetime="2026-08-01">2026.08.01</time>
<p>営業時間変更のお知らせ</p>
</li>
<li class="news-item">
<time datetime="2026-07-20">2026.07.20</time>
<p>新しいコーヒー豆が入荷しました</p>
</li>
</ul>
<div class="menu-link-area">
<a class="menu-link" href="#">
メニューを見る
</a>
</div>
</section>
</main>
<footer class="site-footer">
<p><small>© MORI CAFE</small></p>
</footer>
</body>
</html>HTMLの大きな構造を確認しよう
今回のHTMLでは、ページをheader、main、footerに分けています。
<body>
<header>
ヘッダーの内容
</header>
<main>
ページの主な内容
</main>
<footer>
フッターの内容
</footer>
</body>それぞれには、次の役割があります。
| 要素 | 役割 |
|---|---|
header |
ページ上部の見出しや案内を表す |
main |
ページの中心となる内容を表す |
section |
見出しを持つ内容のまとまりを表す |
footer |
ページ下部の情報を表す |
見た目を作るためだけに、すべてをdivで囲む必要はありません。
内容に合ったHTML要素を選ぶことで、HTMLを読んだときにもページの構造が分かりやすくなります。
sectionには見出しを入れる
今回のmainには、2つのsectionがあります。
<main>
<section class="about">
<h2>MORI CAFEについて</h2>
</section>
<section class="news">
<h2>お知らせ</h2>
</section>
</main>それぞれのsectionには、その内容を表す見出しがあります。
main
│
├── section「MORI CAFEについて」
│
└── section「お知らせ」sectionは、ただ要素を囲むための箱ではありません。「何について書かれた部分なのか」を見出しで説明できるまとまりに使用します。
見出しを付けられない単なるレイアウト用の箱には、divを使用します。
見出しの順番を確認しよう
今回のページでは、見出しを次のように使用しています。
h1 MORI CAFE
│
├── h2 MORI CAFEについて
│
└── h2 お知らせh1はページ全体を表す最も重要な見出しです。
h2は、h1の内容を分けたそれぞれの章に使用します。
文字を大きくしたいという理由だけで、h1やh2を選ぶわけではありません。文字の大きさはCSSで変更し、HTMLでは内容の階層に合わせて見出しを選びます。
お知らせにリストを使う理由
複数のお知らせは、箇条書きできる情報の集まりです。
そのため、ulとliを使用します。
<ul class="news-list">
<li class="news-item">
1件目のお知らせ
</li>
<li class="news-item">
2件目のお知らせ
</li>
</ul>構造は次のようになります。
ul お知らせ一覧
│
├── li 1件目のお知らせ
├── li 2件目のお知らせ
└── li 3件目のお知らせ見た目として黒い丸を表示しない場合でも、情報の意味が一覧であればulとliを使えます。
黒い丸を表示するかどうかは、後からCSSで変更します。
日付にはtimeを使う
お知らせの日付にはtimeを使用しています。
<time datetime="2026-08-10">
2026.08.10
</time>画面に表示される日付は、タグの中に記述します。
2026.08.10datetime属性には、コンピューターが理解しやすい形式で日付を記述します。
2026-08-10見た目のためだけでなく、「これは日付である」という意味をHTMLで表しています。
CSSファイルを読み込もう
HTMLとCSSは別々のファイルにします。
HTMLのhead内に、次の記述があることを確認してください。
<link rel="stylesheet" href="css/style.css">今回のファイル構成では、style.cssはcssフォルダの中にあります。
index.html
│
└── css
└── style.cssそのため、読み込み先は次のようになります。
href="css/style.css"CSSを書いても見た目が変わらない場合は、最初にファイルの場所と読み込み先を確認しましょう。
ページ全体のCSSを書こう
css/style.cssに次のCSSを記述します。
body {
margin: 0;
background-color: #f3f0e8;
color: #333333;
font-family: Arial, "Helvetica Neue", sans-serif;
line-height: 1.8;
}margin: 0
ブラウザは、最初からbodyの周囲に少し余白を持っています。
ブラウザ
┌──────────────────────────────┐
│ 初期状態の余白 │
│ ┌────────────────────────┐ │
│ │ ページの内容 │ │
│ └────────────────────────┘ │
└──────────────────────────────┘今回は余白をCSSで管理するため、ブラウザが最初から持っている余白を削除します。
body {
margin: 0;
}この指定を忘れると、ヘッダーやフッターの周囲に意図しない白い余白ができることがあります。
背景色と文字色
background-color: #f3f0e8;
color: #333333;background-colorでページの背景色を指定します。
colorは文字色を指定するプロパティです。
bodyに文字色を指定すると、特別に別の色を指定しない限り、ページ内の子要素にもその文字色が引き継がれます。
行の高さ
line-height: 1.8;文章の行間を広げ、読みやすくします。
1.8は、文字サイズの約1.8倍の高さで1行を表示する指定です。
共通する横幅を作ろう
今回のページでは、ヘッダーの中身とメインエリアを900pxにします。
最初に、.innerへCSSを指定します。
.inner {
width: 900px;
margin: 0 auto;
}widthで横幅を決める
width: 900px;widthは要素の横幅を指定するプロパティです。
900px
←────────────────────→
┌────────────────────┐
│ .inner │
└────────────────────┘margin: 0 autoで中央にする
margin: 0 auto;これは、上下のmarginを0、左右のmarginをautoにする指定です。
margin: 上下 左右;左右の余白をautoにすると、ブラウザが余っている空間を左右に均等に分けます。
ブラウザの横幅
┌──────────────────────────────────────────┐
│ │
│ 左の余白 ┌──────────────────┐ 右の余白 │
│ auto │ 幅900pxの要素 │ auto │
│ └──────────────────┘ │
│ │
└──────────────────────────────────────────┘
左の余白 ＝ 右の余白その結果、幅900pxの要素が左右中央に配置されます。
横幅が必要な理由
ブロック要素は、横幅を指定しなければ、基本的に親要素の横幅まで広がります。
widthを指定していない要素
┌──────────────────────────────────────────┐
│ 要素が横いっぱいに広がっている │
└──────────────────────────────────────────┘すでに横いっぱいに広がっている要素には、左右に分けるための余った空間がありません。
そのため、中央に配置する要素には横幅を指定します。
.inner {
width: 900px;
margin: 0 auto;
}今回の重要な組み合わせです。
width
↓
要素の横幅を決める
↓
左右に余った空間ができる
↓
margin: 0 auto
↓
余った空間が左右均等になるヘッダーを作ろう
ヘッダーに次のCSSを指定します。
.site-header {
padding: 48px 0;
background-color: #40513b;
color: #ffffff;
text-align: center;
}
.site-title {
margin: 0;
font-size: 36px;
letter-spacing: 4px;
}
.site-message {
margin: 8px 0 0;
font-size: 16px;
}背景は画面いっぱい、中身は900px
HTMLでは、ヘッダーの中に.innerがあります。
<header class="site-header">
<div class="inner">
<h1>MORI CAFE</h1>
<p>毎日の暮らしに、小さな休憩を。</p>
</div>
</header>外側の.site-headerには横幅を指定していません。
そのため、ヘッダーの背景色は画面いっぱいに広がります。
内側の.innerには、900pxの横幅を指定しています。
.site-header：画面いっぱいの背景
┌──────────────────────────────────────────┐
│ 緑色の背景 │
│ │
│ ┌──────── .inner 900px ────────┐ │
│ │ MORI CAFE │ │
│ │ 毎日の暮らしに、小さな休憩を。 │ │
│ └──────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘実際のWebサイトでは、この二重構造をよく使用します。
外側の要素
背景色を画面いっぱいにする
↓
内側の要素
中身の横幅を制限して中央にする上下だけにpaddingを付ける
padding: 48px 0;この書き方では、上下に48px、左右に0の内側余白を付けます。
padding: 上下 左右;.site-header
┌──────────────────────────────┐
│ 上のpadding 48px │
│ │
│ MORI CAFE │
│ │
│ 下のpadding 48px │
└──────────────────────────────┘見出しの初期余白をなくす
h1には、ブラウザによって最初から上下のmarginが設定されています。
今回は自分で余白を管理するため、初期余白を削除します。
.site-title {
margin: 0;
}メインエリアを作ろう
メインエリアにも900pxの横幅を指定し、中央に配置します。
.main-content {
width: 900px;
margin: 0 auto;
padding: 64px 0;
}.innerと同じように、widthとmarginを組み合わせています。
width: 900px;
margin: 0 auto;padding: 64px 0で、メインエリアの上下に64pxの内側余白を作っています。
ヘッダー
──────────────
64pxの余白
カフェ紹介
64pxの余白
──────────────カフェ紹介を整えよう
.about {
margin-bottom: 64px;
text-align: center;
}
.about-image {
display: block;
width: 900px;
height: 400px;
object-fit: cover;
border-radius: 16px;
}
.section-title {
margin-top: 32px;
margin-bottom: 16px;
color: #40513b;
font-size: 28px;
text-align: center;
}
.about-text {
margin: 0;
}画像の大きさを指定する
.about-image {
width: 900px;
height: 400px;
}画像の表示範囲を、横900px、高さ400pxにします。
900px
←────────────────────────────→
┌────────────────────────────┐
│ │ ↑
│ カフェの写真 │ │ 400px
│ │ ↓
└────────────────────────────┘画像の変形を防ぐ
写真には、それぞれ元の縦横比があります。
横幅と高さを強制的に変更すると、写真が押しつぶされたように表示される場合があります。
元の画像
┌──────────────────────┐
│ │
└──────────────────────┘
変形した画像
┌──────────┐
│ │
│ │
│ │
└──────────┘そこで、次の指定を使います。
object-fit: cover;coverを指定すると、画像の縦横比を保ちながら、指定した表示範囲を埋めます。
表示範囲からはみ出した部分は切り取られます。
画像をブロック要素として表示する
display: block;imgは、初期状態では文章に近い性質を持っています。そのため、画像の下にわずかな空間ができる場合があります。
display: blockを指定すると、画像をブロック要素として扱えるため、配置や余白を管理しやすくなります。
カフェ紹介とお知らせの間を空ける
.about {
margin-bottom: 64px;
}margin-bottomは、要素の外側の下に余白を作ります。
カフェ紹介
┌──────────────────────────────┐
│ 写真・見出し・文章 │
└──────────────────────────────┘
↓
margin-bottom: 64px
↓
┌──────────────────────────────┐
│ お知らせ │
└──────────────────────────────┘お知らせエリアを作ろう
.news {
padding: 40px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(64, 81, 59, 0.12);
}
.news .section-title {
margin-top: 0;
}paddingで内側に余白を作る
padding: 40px;お知らせエリアの枠と内容の間に40pxの余白を作ります。
.news
┌────────────────────────────────┐
│ padding │
│ ┌──────────────────────┐ │
│ │ お知らせ │ │
│ │ │ │
│ │ 2026.08.10 内容 │ │
│ └──────────────────────┘ │
│ padding │
└────────────────────────────────┘paddingがない場合、文字が白いエリアの端に近づき、窮屈に見えてしまいます。
marginとpaddingの違い
margin
要素の外側に作る余白
┌────────────────────────┐
│ padding │
│ 要素の内側に作る余白 │
│ │
│ 実際の内容 │
│ │
└────────────────────────┘| プロパティ | 余白の場所 | 今回の使用例 |
|---|---|---|
margin |
要素の外側 | カフェ紹介とお知らせの間 |
padding |
要素の内側 | お知らせの枠と内容の間 |
余白を作りたいときは、「要素の外側を空けたいのか」「要素の内側を空けたいのか」を考えましょう。
お知らせ一覧を整えよう
.news-list {
margin: 0;
padding: 0;
list-style: none;
}
.news-item {
padding: 20px 0;
border-bottom: 1px solid #dddddd;
}
.news-item time {
color: #6d8068;
font-weight: bold;
}
.news-item p {
margin: 4px 0 0;
}リストの初期スタイルを変更する
ulには、ブラウザによって最初から余白と黒い丸が設定されています。
・2026.08.10 夏季限定メニュー
・2026.08.01 営業時間変更今回は黒い丸を使用しないため、次のCSSを指定します。
.news-list {
margin: 0;
padding: 0;
list-style: none;
}list-style: noneで黒い丸を非表示にできます。
ただし、HTMLでは一覧であることに変わりはありません。そのため、ulとliはそのまま使用します。
HTMLは情報の意味、CSSは見た目を担当します。
項目ごとに下線を付ける
.news-item {
border-bottom: 1px solid #dddddd;
}border-bottomは、要素の下側に線を表示するプロパティです。
指定内容は次の順番です。
border-bottom: 線の太さ 線の種類 線の色;今回の指定では、薄いグレーの1pxの実線を表示します。
2026.08.10
夏季限定メニューを開始しました
─────────────────────────────
2026.08.01
営業時間変更のお知らせ
─────────────────────────────項目の内側に余白を付ける
padding: 20px 0;お知らせ項目の上下に20pxの内側余白を作ります。
線と文字の間に余白ができ、読みやすくなります。
リンクをボタンのようにしよう
.menu-link-area {
margin-top: 32px;
text-align: center;
}
.menu-link {
display: inline-block;
padding: 12px 40px;
background-color: #40513b;
color: #ffffff;
text-decoration: none;
border-radius: 8px;
}リンクの役割は変わらない
HTMLでは、a要素を使用しています。
<a class="menu-link" href="#">
メニューを見る
</a>見た目はボタンですが、クリックすると別のページへ移動するものなので、a要素を使用します。
CSSで見た目をボタンのように変更しても、HTMLとしての役割はリンクのままです。
inline-blockに変更する
display: inline-block;aは初期状態ではインライン要素です。
inline-blockにすると、文章の中に並ぶ性質を残しながら、上下左右のpaddingを扱いやすくなります。
クリックしやすい範囲を作る
padding: 12px 40px;上下に12px、左右に40pxの内側余白を作ります。
左右40px
←────────────────→
┌────────────────┐
│ 上下12px │
│ メニューを見る │
│ 上下12px │
└────────────────┘背景色は文字だけでなく、paddingを含む範囲に表示されます。
文字の周囲までクリックできるため、使いやすいリンクになります。
リンクの下線を消す
text-decoration: none;通常のリンクに表示される下線を消します。
今回は背景色があり、リンクであることを判断できるため、下線を消しても問題ありません。
フッターを作ろう
.site-footer {
padding: 24px 0;
background-color: #333333;
color: #ffffff;
text-align: center;
}
.site-footer p {
margin: 0;
}フッターもヘッダーと同じように横幅を指定していません。
そのため、背景色が画面いっぱいに広がります。
┌──────────────────────────────────────────┐
│ © MORI CAFE │
└──────────────────────────────────────────┘
画面いっぱいの背景完成するCSS
css/style.cssの全体は、次のようになります。
body {
margin: 0;
background-color: #f3f0e8;
color: #333333;
font-family: Arial, "Helvetica Neue", sans-serif;
line-height: 1.8;
}
.inner {
width: 900px;
margin: 0 auto;
}
.site-header {
padding: 48px 0;
background-color: #40513b;
color: #ffffff;
text-align: center;
}
.site-title {
margin: 0;
font-size: 36px;
letter-spacing: 4px;
}
.site-message {
margin: 8px 0 0;
font-size: 16px;
}
.main-content {
width: 900px;
margin: 0 auto;
padding: 64px 0;
}
.about {
margin-bottom: 64px;
text-align: center;
}
.about-image {
display: block;
width: 900px;
height: 400px;
object-fit: cover;
border-radius: 16px;
}
.section-title {
margin-top: 32px;
margin-bottom: 16px;
color: #40513b;
font-size: 28px;
text-align: center;
}
.about-text {
margin: 0;
}
.news {
padding: 40px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(64, 81, 59, 0.12);
}
.news .section-title {
margin-top: 0;
}
.news-list {
margin: 0;
padding: 0;
list-style: none;
}
.news-item {
padding: 20px 0;
border-bottom: 1px solid #dddddd;
}
.news-item time {
color: #6d8068;
font-weight: bold;
}
.news-item p {
margin: 4px 0 0;
}
.menu-link-area {
margin-top: 32px;
text-align: center;
}
.menu-link {
display: inline-block;
padding: 12px 40px;
background-color: #40513b;
color: #ffffff;
text-decoration: none;
border-radius: 8px;
}
.site-footer {
padding: 24px 0;
background-color: #333333;
color: #ffffff;
text-align: center;
}
.site-footer p {
margin: 0;
}ボックスの実際の横幅に注意しよう
お知らせエリアには、次の指定があります。
.news {
padding: 40px;
}.newsには横幅を指定していませんが、親要素である.main-contentの内側に配置されています。
.main-contentの幅は900pxです。
初期状態のCSSでは、ブロック要素のwidthがautoの場合、paddingを含めて親要素の中に収まるように計算されます。
そのため、今回の.newsは.main-contentの幅からはみ出さず、900pxの中に収まります。
一方、次のように.newsにもwidth: 900pxを指定すると注意が必要です。
.news {
width: 900px;
padding: 40px;
}初期状態では、指定したwidthの外側にpaddingが追加されます。
左padding width 右padding
40px 900px 40px
←────────→←────────────→←────────→
合計980px今回の課題では、.newsにwidth: 900pxを指定する必要はありません。親要素の幅を利用して表示させます。
基本課題
ここからは、完成コードをそのまま写すのではなく、内容を自分で変更してみましょう。
次の情報を変更してください。
- カフェの名前
- キャッチコピー
- カフェの紹介文
- カフェの画像
- お知らせの日付
- お知らせの内容
- メニューへのリンク先
カフェの種類も自由に変更できます。
候補
喫茶店
パン屋
ケーキ店
花屋
雑貨店
書店
美容室
コワーキングスペース内容を変更しても、HTMLの基本構造はそのまま利用できます。
デザイン変更課題
次の条件になるようにCSSを変更してください。
- ヘッダーの背景色を紺色にする
- ページの背景色を薄いグレーにする
- お店の名前を40pxにする
- 画像の角丸を24pxにする
- お知らせの内側余白を48pxにする
- リンクの背景色をオレンジ色にする
- フッターの上下余白を32pxにする
使用するプロパティは次の中から探してみましょう。
background-color
font-size
border-radius
padding余白調整課題
次の条件になるように、marginまたはpaddingを変更してください。
- ヘッダーの上下の内側余白を64pxにする
- 画像と「MORI CAFEについて」の間を40pxにする
- 見出しと紹介文の間を24pxにする
- カフェ紹介とお知らせの間を80pxにする
- お知らせ一覧とリンクの間を40pxにする
変更するときは、余白が要素の内側か外側かを考えましょう。
枠の内側を広げたい
↓
padding
要素同士の間を広げたい
↓
margin発展課題：営業案内を追加しよう
カフェ紹介とお知らせの間に、営業案内のsectionを追加してください。
掲載する内容は次のとおりです。
営業案内
営業時間 10:00〜18:00
定休日 毎週火曜日
住所 東京都○○区○○1-2-3HTMLの例です。
<section class="information">
<h2 class="section-title">営業案内</h2>
<dl class="information-list">
<dt>営業時間</dt>
<dd>10:00〜18:00</dd>
<dt>定休日</dt>
<dd>毎週火曜日</dd>
<dt>住所</dt>
<dd>東京都○○区○○1-2-3</dd>
</dl>
</section>dlは、用語とその説明を組み合わせた一覧です。
dl
│
├── dt 営業時間
├── dd 10:00〜18:00
│
├── dt 定休日
├── dd 毎週火曜日
│
├── dt 住所
└── dd 東京都○○区○○1-2-3次の条件になるようにCSSを書いてください。
- 背景色を白にする
- 内側に40pxの余白を付ける
- 上下に64pxの外側余白を付ける
- 角を丸くする
dtの文字を太くするddの左余白を0にする
発展課題：お知らせを増やそう
お知らせを5件に増やしてください。
追加するときは、liの中にtimeとpを入れます。
<li class="news-item">
<time datetime="2026-07-10">2026.07.10</time>
<p>ここにお知らせの内容を入れます</p>
</li>追加後、すべてのお知らせに同じデザインが適用されることを確認してください。
同じclassを使用すると、CSSを何度も書かなくても共通のデザインを適用できます。
.news-itemのCSS
│
├── 1件目に適用
├── 2件目に適用
├── 3件目に適用
├── 4件目に適用
└── 5件目に適用よくある失敗
CSSが反映されない
HTMLでCSSを正しく読み込んでいるか確認します。
<link rel="stylesheet" href="css/style.css">次の点も確認してください。
cssフォルダの中にstyle.cssがあるか- ファイル名の大文字と小文字が合っているか
.cssという拡張子が付いているか- HTMLを保存しているか
- CSSを保存しているか
メインエリアが中央に配置されない
次の指定を確認してください。
.main-content {
width: 900px;
margin: 0 auto;
}特に、widthを指定しているか確認します。
margin: 0 autoだけを指定するのではなく、中央に配置する要素の横幅も決めましょう。
ヘッダーの背景が画面いっぱいにならない
.site-headerではなく、内側の.innerに背景色を指定していないか確認します。
画面いっぱいに背景色を広げたい場合：
.site-header {
background-color: #40513b;
}中身の横幅を制限したい場合：
.inner {
width: 900px;
margin: 0 auto;
}役割を分けることが重要です。
.site-header
背景を画面いっぱいにする
.inner
中身を幅900pxにして中央にする画像が表示されない
HTMLの画像パスを確認します。
<img src="images/cafe.jpg" alt="">次の点も確認してください。
imagesフォルダがあるか- フォルダ内に
cafe.jpgがあるか .jpgと.pngを間違えていないか- ファイル名に余分な空白がないか
- 大文字と小文字が一致しているか
画像が変形する
次の指定を確認してください。
.about-image {
width: 900px;
height: 400px;
object-fit: cover;
}object-fit: coverを使うと、画像の縦横比を保ちながら指定範囲を埋められます。
お知らせに黒い丸が表示される
次の指定を確認してください。
.news-list {
list-style: none;
}また、最初から付いている左側の余白も削除します。
.news-list {
margin: 0;
padding: 0;
list-style: none;
}見出しの上に不要な余白ができる
h1やh2、pには、ブラウザによって最初からmarginが設定されています。
自分で余白を管理する場合は、必要に応じてmarginを指定し直します。
.site-title {
margin: 0;
}.news .section-title {
margin-top: 0;
}確認問題
次の質問に答えてください。
- HTMLとCSSは、それぞれ何を担当していますか。
- ページの主要な内容には、どのHTML要素を使用しますか。
- 内容のまとまりを表す要素は何ですか。
- 複数のお知らせを一覧にするために使用した要素は何ですか。
- 日付を表すために使用した要素は何ですか。
- 要素の横幅を指定するCSSプロパティは何ですか。
margin: 0 autoには、どのような働きがありますか。margin: 0 autoで中央配置を確認するには、要素に何を指定する必要がありますか。marginとpaddingには、どのような違いがありますか。- 背景を画面いっぱいに広げ、中身だけを中央にするには、どのような構造が必要ですか。
- リストの黒い丸を消すプロパティは何ですか。
- 画像の縦横比を保ちながら表示範囲を埋める指定は何ですか。
- リンクの下線を消すプロパティは何ですか。
- 文字を中央揃えにするプロパティは何ですか。
確認問題の解答
- HTMLは情報の内容や構造、CSSは色、大きさ、余白、配置などの見た目を担当します。
mainを使用します。sectionを使用します。ulとliを使用します。timeを使用します。widthです。- 左右の余白を自動的に均等にします。
widthなどで要素の横幅を決めます。marginは要素の外側、paddingは要素の内側に余白を作ります。- 画面いっぱいの外側要素と、幅を制限した内側要素を用意します。
list-style: noneです。object-fit: coverです。text-decoration: noneです。text-align: centerです。
完成後のチェックリスト
制作が終わったら、次の項目を確認しましょう。
- HTMLとCSSを別々のファイルにしている
- CSSを
link要素で読み込んでいる header、main、section、footerを使用している- 見出しが
h1、h2の順番になっている - お知らせを
ulとliで記述している - 日付に
timeを使用している - 画像に内容の分かる
altを付けている - 横幅を指定してから
margin: 0 autoを使用している marginとpaddingを使い分けている- 背景を担当する外側と、横幅を担当する内側を分けている
- 画像が変形していない
- リンクが文字の周囲までクリックできる
- ファイルやフォルダの名前を半角英数字にしている
- HTMLの開始タグと終了タグが対応している
- インデントでHTMLの親子関係を分かりやすくしている
今回覚えておきたいこと
この課題で特に重要なのは、画面全体の背景と、中央に配置する中身を分ける考え方です。
<header class="site-header">
<div class="inner">
ヘッダーの中身
</div>
</header>.site-header {
background-color: #40513b;
}
.inner {
width: 900px;
margin: 0 auto;
}外側の.site-header
↓
背景を画面いっぱいに表示する
内側の.inner
↓
横幅を900pxに制限する
↓
margin: 0 autoで中央に配置するこの構造は、ヘッダーだけでなく、メインビジュアル、お知らせ、フッターなど、実際のWebサイト制作で何度も使用します。
margin: 0 autoという書き方だけを暗記するのではなく、次の流れで理解しましょう。
要素に横幅を指定する
↓
画面に余った空間ができる
↓
左右のmarginをautoにする
↓
余った空間が左右均等になる
↓
要素が中央に配置される完成見本と同じものを作るだけでなく、文章、画像、色、余白を変更し、自分のお店のページとして作り直すところまで挑戦してみましょう。
