- サイトの上部にナビゲーションメニュー（
<nav>）を設置する Flexboxを使って<h1>と<nav>を横並びにする- ページ内リンクを使ってセクションへの移動を行えるようにする
- ページ内リンク（
href="#id"）で、ジャンプ先にスクロール移動できるようにする - CSSの
scroll-behaviorを使ってなめらかなスクロールを実現する - 画面右下に「上へ戻る」ボタンを設置し、絶対位置で固定表示するテクニック!
作成ファイル・保存場所
css-basicフォルダの中に以下の2つのファイルを用意してください：- HTMLファイル：
11.htmlHTMLファイルはコピーして使用可
- HTMLファイル：
- CSSファイル：
style11.css- meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">を<head>に追加してください
- meta:
htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML課題11</title>
<link rel="stylesheet" href="style11.css">
</head>
<body id="top">
<!-- サイトのヘッダーとナビゲーション -->
<header>
<div class="header-top">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#services">サービス紹介</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<figure class="kv">
<img src="https://dummy.kobeya.com/?width=960&height=300&text=KV" alt="キービジュアル">
</figure>
<!-- メインコンテンツ -->
<main>
<section>
<h2 id="services">サービス紹介</h2>
<p>ここでは提供しているサービスを簡単に紹介します。ここでは提供しているサービスを簡単に紹介します。ここでは提供しているサービスを簡単に紹介します。ここでは提供しているサービスを簡単に紹介します。ここでは提供しているサービスを簡単に紹介します。
</p>
<img src="https://dummy.kobeya.com/?width=960&height=500&text=Service+Image" alt="サービス紹介イメージ">
</section>
<section>
<h2 id="access">アクセス</h2>
<p>ここでは会社の地図を掲載しています。ここでは会社の地図を掲載しています ここでは会社の地図を掲載しています ここでは会社の地図を掲載しています ここでは会社の地図を掲載しています
ここでは会社の地図を掲載しています </p>
<img src="https://dummy.kobeya.com/?width=960&height=500&text=Map+Image" alt="マップ">
</section>
<section>
<h2 id="contact">お問い合わせ</h2>
<p>ご不明点などはお問い合わせください。</p>
<img src="https://dummy.kobeya.com/?width=960&height=600&text=Contact+Image" alt="お問い合わせイメージ">
</section>
</main>
<!-- サイト全体のフッター -->
<footer>
<div class="backtoTop"><a href="#top">上へ戻る</a></div>
<p><small>© 2025 MySite</small></p>
</footer>
</body>
</html>
チェックポイント
h1とnavがスマホで縦並び／PCで横並びに切り替わっているかnav ulが Flex によって横に整列しているか- ページ内リンクで各セクションにジャンプできるか
scroll-behavior: smoothによりスムースな移動になっているか- 「上へ戻る」ボタンが常に右下に固定表示されているか
- それぞれのスタイル指定がシンプルに書かれているか
今回使うCSSプロパティのポイント
scroll-behavior
| プロパティ・値 | 説明 |
|---|---|
scroll-behavior: smooth; | ページ内リンクのスクロールをなめらかにする指定。ユーザー体験が向上します。 |
scroll-behavior: auto; | （初期値）通常の一瞬でジャンプするスクロール動作。 |
html 要素に指定すると、ページ全体に効果が適用されます。
position プロパティ
| 値 | 説明 |
|---|---|
static | 初期値。文書の流れどおりに配置される。位置指定プロパティは無効。 |
relative | 元の位置を基準にずらす。微調整や absolute の基準点として使用。 |
absolute | 親要素（relativeなど）を基準にして絶対配置。重ね配置に便利。 |
fixed | 画面の指定位置に固定。スクロールしても動かない。ナビやボタンで使用。 |
位置指定プロパティ（positionとセットで使用）
| プロパティ | 説明 |
|---|---|
top: | 上からの距離を指定 |
bottom: | 下からの距離を指定 |
left: | 左からの距離を指定 |
right: | 右からの距離を指定 |
transition
| プロパティ | 説明 |
|---|---|
transition: | 要素の状態が変わるときにアニメーションのように変化させる指定。 |
transition: background-color 0.3s; | 背景色が変わるときに、0.3秒かけてなめらかに変化させる。 |
.back-button {
background-color: #666;
transition: background-color 0.3s;
}
.back-button:hover {
background-color: #333;
}
このように設定すると、ホバー時に背景色がパッと切り替わるのではなく、スーッと変化します
指示
以下の条件に従って、CSSファイルを作成・適用してください。
html11.htmlに<header>内でh1とnavを横並びにレイアウトしてください<nav>の中に<ul><li><a></a></li></ul>構造でメニューを作成してください<main>に複数の<section>を用意し、それぞれにidを指定して、ページ内リンクのジャンプ先にしてくださいscroll-behavior: smooth;を指定して、スクロールアニメーションを有効にしてくださいfooterに「上へ戻る」ボタンを作成し、画面右下に固定表示してください- ボタンはページ上部に戻るように、
<body id="top">+<a href="#top">を活用してください - 画像や段落などを追加して、ページを縦長にし、スクロールの動作確認ができるようにしてください
スタイルの指定内容（style11.css）
- リセット＆基本設定
* { box-sizing: border-box; }html { font-size: 100%; scroll-behavior: smooth; }body:sans-serif,font-size: 0.875rem, 背景色など
.header-topに Flex を指定display: flex;- スマホでは縦並び →
@media(min-width: 768px)でflex-direction: rowに切り替え justify-content: space-between;でh1とnavを両端に配置
nav ulを横並びに整えるdisplay: flex; gap: 1rem; list-style: none;aのカラーやホバー演出（text-decoration: underline）任意で追加
- キービジュアル（
<figure class="kv">）- 横幅いっぱいに画像を表示：
width: 100%;
- 横幅いっぱいに画像を表示：
- メインコンテンツとセクション
- セクションごとに
idを指定（例：#services,#access,#contact） - タイトル
h2に左線＋余白 - コンテンツを縦長にするために画像やテキストを追加
- セクションごとに
- フッターに「上へ戻る」ボタンを設置
.backtoTop aにposition: fixed,bottom:,right:を指定- ボタンを円形で目立つようにスタイリング（
border-radius,box-shadow） href="#top"によって最上部へ戻る動作を実現
応用ポイント（任意で挑戦！）
- メニュー項目の数やリンク先を増やしてみる
- ボタンの色や角丸を調整して、オリジナルの「戻るボタン」をデザインする
表示例（画面イメージ）
解答例（CSS）
/* --- リセットと基本 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 100%;
}
body {
font-family: "メイリオ", sans-serif;
font-size: 0.875rem;
line-height: 1.7;
background-color: #fefefe;
}
/* --- ヘッダー部分（h1 + nav を横並び）--- */
header {
background-color: #f2f2f2;
padding: 1rem 2rem;
border-bottom: 2px solid #ddd;
}
.header-top {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
/* 省略はできますが、明示的に重複記載 */
@media(min-width:768px) {
.header-top {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
h1 {
font-size: 1.5rem;
color: #333;
}
/* --- ナビゲーションメニュー --- */
nav ul {
display: flex;
gap: 1rem;
list-style: none;
}
nav a {
text-decoration: none;
color: #007acc;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.kv img {
width: 100%;
}
/* --- メインコンテンツ --- */
main {
max-width: 960px;
width: calc(100% - 2rem);
margin: 2rem auto;
}
section {
margin-bottom: 4rem;
}
h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
border-left: 5px solid #ccc;
padding-left: 0.5rem;
color: #444;
}
section p {
margin-bottom: 1rem;
}
section img {
width: 100%;
height: auto;
display: block;
margin-top: 1rem;
}
/* --- フッター --- */
footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 2rem 1rem;
position: relative;
}
/* --- 上へ戻るボタン（固定） --- */
.backtoTop a {
position: fixed;
right: 2rem;
bottom: 1.5rem;
background-color: #38a0e6;
color: #fff;
padding: 0.6rem 1.2rem;
border-radius: 999px;
font-size: 0.875rem;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
z-index: 1000;
transition: background-color 0.3s;
text-decoration: none;
}
.backtoTop a:hover {
background-color: #074063;
}