INDEX
目次
前の章に戻る【コーディング実践演習2】Webサイト「うちの金魚たち」をコーディングしよう
本演習は、HTML/CSS入門編 17章までの学習を終えた時点で取り組んでいただくものです。 以下のダウンロードリンクから問題データをダウンロードしてファイルを開き、指示に従ってページを作成してください。
問題データダウンロードリンク
作業の準備
- 「start」フォルダ内のindex.htmlとcssフォルダ内のreset.cssとstyle.cssをエディターで開きます。
- ブラウザプレビューします。
■ start/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>うちの金魚たち | HOME</title> </head> <body> ウメちゃん タロちゃん ヒメちゃん ごあいさつ このサイトでは、我が家に生息する3匹の金魚たちを紹介します！ 全員が飼い主（私）の顔をよく覚えており、私の姿を見つけるとすぐに近寄って来ます！ ▲ページトップへ Copyright © uchikin All Rights Reserved. </body> </html>
index.html
■ start/css/reset.css（シンプル&ミニマムリセット）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button,
input,
textarea,
select {
font: inherit;
}reset.css（シンプル&ミニマムリセット）
■ start/css/style.css
@charset "UTF-8";
style.css
■ ブラウザプレビュー
完成イメージを確認しよう
- 今回取り組んでいただく【コーディング実践演習2】では、完成イメージに沿って合計4ページのWebサイトを作成していただきます。
- 指示された手順に従って作業してください。
- まずは各ページの完成イメージを確認しましょう。
【動画収録】完成したWebサイト
各ページの完成イメージ
index.html
ume.html
taro.html
hime.html
【STEP1】index.htmlを構造化しよう
- Webページ制作はHTMLマークアップからスタートします。
- 右のHTML構造図とブラウザプレビューを参照しながら、index.htmlを以下の手順で適切にマークアップしてください。
■ index.htmlのHTML構造図
■ ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP1】の解答
■ 手順1〜2の解答
<h1>
<a href="index.html">
<img src="images/site-logo.svg" alt="うちの金魚たち">
</a>
</h1>【STEP1】手順1〜2の解答
【画面収録】手順1〜2の解答
■ ブラウザプレビュー
■ 手順3〜5の解答
<nav>
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>【STEP1】手順3〜5の解答
【画面収録】手順3〜5の解答
■ ブラウザプレビュー
■ 手順6の解答
<header>
<h1>
<a href="index.html">
<img src="images/site-logo.svg" alt="うちの金魚たち">
</a>
</h1>
<nav>
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>
</header>【STEP1】手順6の解答
【画面収録】手順6の解答
■ HTML5の主なセマンティック要素一覧（再掲）
※セマンティック要素については「HTML/CSS入門編 10章 Flexboxを学ぼう」の「セマンティック要素とは」節を参照してください。
|
タグ
|
意味・用途
|
|---|---|
|
<header>
|
ページやセクションのヘッダー部分
通常はロゴやタイトル、ナビゲーションが含まれる |
|
<nav>
|
ナビゲーションメニュー（主要なリンクの集まり）
|
|
<section>
|
セクション（テーマごとのまとまり）
|
|
<article>
|
独立したコンテンツとしての記事（ブログ記事やニュース記事など）
|
|
<aside>
|
補足情報（サイドバーなど）
|
|
<main>
|
ページの主要なコンテンツ部分
|
|
<footer>
|
フッター（コピーライトやサイト情報など）
|
|
<figure>
|
画像・図表などのコンテンツを含む要素
|
|
<figcaption>
|
<figure>のキャプション（説明文）
|
|
<mark>
|
強調したいテキスト
|
|
<time>
|
日付・時間の表記
|
■ 手順7の解答
<div> <img src="images/mainvisual.png" alt=""> </div>
【STEP1】手順7の解答
【画面収録】手順7の解答
■ 手順8〜9の解答
<main>
<h2>ごあいさつ</h2>
<p>
このサイトでは、我が家に生息する3匹の金魚たちを紹介します！<br />
全員が飼い主（私）の顔をよく覚えており、私の姿を見つけるとすぐに近寄って来ます！
</p>
</main>【STEP1】手順8〜9の解答
【画面収録】手順8〜9の解答
■ 手順10の解答
<body>
<a id="pagetop"></a>
<header>
・・・中略・・・
<p>
<a href="#pagetop">▲ページトップへ</a>
</p>【STEP1】手順10の解答
ジャンプさせたい先の要素に直接idを付与することも可能です。
※こちらの方が現在では一般的に使われる方法なので、余裕のある人はこちらの方法を使えるようにしておきましょう！
※こちらの方が現在では一般的に使われる方法なので、余裕のある人はこちらの方法を使えるようにしておきましょう！
<body id="pagetop">
<header>
・・・中略・・・
<p>
<a href="#pagetop">▲ページトップへ</a>
</p>【STEP1】手順10の解答（別解）
【画面収録】手順10の解答
■ 手順11の解答
<footer> <p>Copyright © uchikin All Rights Reserved.</p> </footer>
【STEP1】手順11の解答
これでindex.htmlのHTMLマークアップが完了しました。
【画面収録】手順11の解答
■ HTMLマークアップが完了したindex.htmlのブラウザプレビュー
【STEP2】CSSファイルを関連付けしよう
- 続いて、CSSコーディング工程に進みます。
- CSSフォルダ内のreset.cssとstyle.cssを正しい順番でindex.htmlと関連付けしてください。
- ブラウザプレビューをして余白やリストのマーカーが消去されたことを確認しましょう。
- 2つのCSSファイルを関連付けたら、スタイリングに使うstyle.cssをエディターで開いておきましょう。
ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP2】の解答
<head> <meta charset="UTF-8" /> <title>うちの金魚たち | HOME</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head>
【STEP2】の解答
【画面収録】STEP2の解答
【STEP3】Webフォントを指定しよう
- HTMLの構造化が完了しましたので、CSSコーディングに入ります。
- まずはページ全体に使用するフォントの指定を行います。
- 次のGoogle Fontsをbody要素に設定してください。
- 使用フォント：Kaisei Opti
※文字サイズや太さは各要素に個別に指定しますので、body要素にはフォントの種類のみを指定してください。
■ ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP3】の解答
<head> <meta charset="UTF-8" /> <title>うちの金魚たち | HOME</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap" rel="stylesheet"> </head>
【STEP3】の解答 HTML
body {
font-family: "Kaisei Opti", serif;
}【STEP3】の解答 CSS
【画面収録】GoogleFontsを指定する
【STEP4】背景画像を指定しよう
- ページに背景画像を指定します。
- 以下の設定でbody要素に背景画像を指定してください。
|
プロパティ
|
値
|
|---|---|
|
背景画像の指定（リピート）
|
imagesフォルダ内のbg-uroko.pngまでのファイルパス
|
|
背景画像を固定表示するかスクロールさせるか
|
固定
|
bg-uroko.png
ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP4】の解答
body {
background-image: url(../images/bg-uroko.png);
background-attachment: fixed;
}【STEP4】背景画像を指定する1
また、ショートハンドプロパティのbackgroundを使い、以下のように記述してもOKです。
body {
background: url(../images/bg-uroko.png) fixed;
}【STEP4】背景画像を指定する2
【画面収録】背景画像を指定する
【STEP5】タイトルロゴをスタイリングしよう
- CSSコーディングは、基本的にHTML中の要素を上から順番にスタイリングしていくという流れがスムーズに制作できます。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<h1>
<a href="index.html">
<img src="images/site-logo.svg" alt="うちの金魚たち">
</a>
</h1>HTML
- 次はタイトルロゴのスタイリングを行います。
-
以下の設定でタイトルロゴのimg要素にCSSプロパティを指定してください。
- img要素にはclass名をつけ、classセレクタを使いCSSを記述してください。
- imgタグにつけるclass名はtitle-logoとしてください。
■ タイトルロゴのCSS指定
|
プロパティ
|
値
|
|---|---|
|
幅
|
380px
|
|
マージン
|
中央配置（上マージン：70px 下マージン：80px）
|
■ ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP5】の解答
<img src="images/site-logo.svg" alt="うちの金魚たち" class="title-logo">
【STEP5】タイトルロゴをスタイリングする HTML
.title-logo {
width: 380px;
margin: 70px auto 80px;
}【STEP5】タイトルロゴをスタイリングする CSS
【画面収録】タイトルロゴをスタイリングする
【STEP6】ナビゲーションをスタイリングしよう
ナビゲーションのレイアウト指定をしよう
- 続いて、ナビゲーションのスタイリングを行います。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<nav>
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>HTML
- まずはFlexboxによるレイアウトを以下の指示に従い設定してください。
- navタグにclass名をつけ、ul、a要素のスタイリングは子孫セレクタを使用してください。
- navタグにつけるclass名はgnavとしてください。
■ ナビゲーションのレイアウト指定
|
プロパティ
|
値
|
|---|---|
|
フレックスボックス
|
有効（li要素を横並びにする）
|
|
水平方向の揃え
|
中央揃え
|
|
子要素同士の間隔
|
118px
|
|
下マージン
|
94px
|
■ ブラウザプレビュー（レイアウト指定）
a要素（リンクテキスト）のスタイリング指定をしよう
レイアウトの指定が完了しましたら、a要素の初期表示のスタイリングを以下の設定で行ってください。
■ a要素（リンクテキスト）の初期表示のスタイリング指定
|
プロパティ
|
値
|
|---|---|
|
背景色
|
#E11B1E（赤）
|
|
幅
|
130px
|
|
高さ
|
30px
|
|
文字色
|
#ffffff（白）
|
|
文字サイズ
|
22px
|
|
文字の太さ
|
400
|
|
文字の装飾
|
下線なし
|
|
ボックスの角丸
|
22px
|
|
Flexbox
|
有効
|
|
子要素の縦方向の揃え
|
中央揃え
|
|
子要素の横方向の揃え
|
中央揃え
|
■ a要素（リンクテキスト）のマウスホバー時のスタイリング指定
|
プロパティ
|
値
|
|---|---|
|
背景色
|
#ffffff（白）
|
|
文字色
|
#E11B1E（赤）
|
|
枠線
|
太さ：2px 種類：実線 色：#E11B1E（赤）
|
■ ブラウザプレビュー（a要素の初期表示のスタイリング）
■ ブラウザプレビュー（a要素のマウスホバー時のスタイリング）
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP6】の解答
ナビゲーションのレイアウト指定をしよう 解答
<nav class="gnav">
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>【STEP6】ナビゲーションのレイアウト指定 HTML
.gnav ul {
display: flex;
justify-content: center;
gap: 118px;
margin-bottom: 94px;
}【STEP6】ナビゲーションのレイアウト指定 CSS
【画面収録】ナビゲーションのレイアウト指定
a要素（リンクテキスト）のスタイリング指定をしよう 解答
■ a要素（リンクテキスト）の初期表示のスタイリング指定 解答
.gnav a {
background-color: #E11B1E;
color: #ffffff;
width: 130px;
height: 30px;
font-size: 22px;
font-weight: 400;
text-decoration: none;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
}【STEP6】a要素（リンクテキスト）のスタイリング指定 CSS
■ a要素（リンクテキスト）のマウスホバー時のスタイリング指定 解答
.gnav a:hover {
background-color: #ffffff;
color: #E11B1E;
border: 2px solid #E11B1E;
}【STEP6】a要素（リンクテキスト）のマウスホバー時のスタイリング指定 CSS
【画面収録】a要素（リンクテキスト）の初期表示のスタイリング指定
【画面収録】a要素（リンクテキスト）のマウスホバー時のスタイリング指定
【STEP7】メインビジュアルをスタイリングしよう
- メインビジュアル部分を作成します。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<div> <img src="images/mainvisual.png" alt=""> </div>
HTML
-
以下の設定でメインビジュアルのimg要素にCSSプロパティを指定してください。
- imgタグにclass名をつけ、classセレクタでCSSを記述してください。
- imgタグにつけるclass名はmainvisualとしてください。
■ メインビジュアルのCSS指定
プロパティ |
値 |
|---|---|
マージン |
中央配置 上マージン：0 下マージン：100px |
角丸の指定 |
100% |
ブラウザプレビュー（メインビジュアルのスタイリング）
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP7】の解答
<div> <img src="images/mainvisual.png" alt="" class="mainvisual"> </div>
【STEP7】メインビジュアルのスタイリング指定 HTML
.mainvisual {
margin: 0 auto 100px;
border-radius: 100%;
}【STEP7】メインビジュアルのスタイリング指定 CSS
【画面収録】メインビジュアルのスタイリング
【STEP8】メインコンテンツをスタイリングしよう
- メインコンテンツ部分のスタイリングを行います。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<main>
<h2>ごあいさつ</h2>
<p>
このサイトでは、我が家に生息する3匹の金魚たちを紹介します！<br />
全員が飼い主（私）の顔をよく覚えており、私の姿を見つけるとすぐに近寄って来ます！
</p>
</main>HTML
- メインコンテンツはmain要素、h2要素、p要素から成り立っています。
- 各要素を以下の設定でスタイリングしてください。
- その際、まずmainタグにclass名をつけ、classセレクタでCSSを記述します。h2、p要素は子孫セレクタを使いスタイリングしてください。
- mainタグのclass名はmain-contentsとしてください。
■ main要素のCSS指定
プロパティ |
値 |
|---|---|
背景色 |
#C2ECFF（水色） |
幅 |
85%（ブラウザ幅に応じて可変） |
マージン |
中央配置 上マージン：0 下マージン：85px |
パディング |
上下：50px 左右：100px |
角丸の指定 |
50px |
ボックスの影 |
横：0 縦：0 ぼかし幅：15px 色：#cccccc（グレー） |
■ h2要素のCSS指定
プロパティ |
値 |
|---|---|
文字色 |
#111111（濃いグレー） |
行揃え |
中央揃え |
文字サイズ |
35px |
文字の太さ |
400 |
枠線 |
下ボーダー 太さ：2px 種類：実線 色：#EDF9FF（薄水色） |
パディング |
下パディング：24px |
マージン |
下マージン：24px |
■ p要素のCSS指定
プロパティ |
値 |
|---|---|
文字色 |
#111111（濃いグレー） |
文字サイズ |
20px |
文字の太さ |
400 |
行間 |
200% |
ブラウザプレビュー（メインコンテンツのスタイリング）
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP8】の解答
<main class="main-contents">
<h2>ごあいさつ</h2>
<p>
このサイトでは、我が家に生息する3匹の金魚たちを紹介します！<br />
全員が飼い主（私）の顔をよく覚えており、私の姿を見つけるとすぐに近寄って来ます！
</p>
</main>【STEP8】メインコンテンツのスタイリング指定 HTML
.main-contents {
background-color: #c2ecff;
width: 85%;
margin: 0 auto 85px;
padding: 50px 100px;
border-radius: 50px;
box-shadow: 0 0 15px #cccccc;
}
.main-contents h2 {
color: #111111;
text-align: center;
font-size: 35px;
font-weight: 400;
border-bottom: 2px solid #edf9ff;
padding-bottom: 24px;
margin-bottom: 24px;
}
.main-contents p {
color: #111111;
font-size: 20px;
font-weight: 400;
line-height: 200%;
}【STEP8】メインコンテンツのスタイリング指定 CSS
【画面収録】main要素のCSS指定
【画面収録】h2要素のCSS指定
【画面収録】p要素のCSS指定
【STEP9】ページ内リンクテキストをスタイリングしよう
- メインコンテンツとフッターの間にあるページ内リンクテキスト「▲ページトップへ」をスタイリングします。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<p> <a href="#pagetop">▲ページトップへ</a> </p>
HTML
- 以下の手順でまずは、リンクテキストを右揃えにしましょう。
- 次に、子孫セレクタを使い、a要素にスタイリング指定をします。
■ a要素を装飾する
プロパティ |
値 |
|---|---|
文字色 |
#E11B1E（赤） |
文字サイズ |
20px |
文字の太さ |
400 |
文字の装飾 |
下線なし |
- a要素にマウスホバーしたときのスタイル指定は以下の通りです。
■ a要素にマウスホバーしたときのCSS指定
プロパティ |
値 |
|---|---|
文字の装飾 |
下線（アンダーライン）を表示する |
ブラウザプレビュー（初期表示）
ブラウザプレビュー（マウスホバー時）
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP9】の解答
<p class="pagetop"> <a href="#pagetop">▲ページトップへ</a> </p>
【STEP9】ページ内リンクテキストのスタイリング指定 HTML
■ リンクテキストを右揃えにする 解答1（text-align）
.pagetop {
text-align: right;
margin-right: 60px;
}【STEP9】リンクテキストを右揃えにする 解答1
■ リンクテキストを右揃えにする 解答2（Flexbox）
.pagetop {
display: flex;
justify-content: flex-end;
margin-right: 60px;
}【STEP9】リンクテキストを右揃えにする 解答2
■ a要素を装飾する
.pagetop a {
color: #E11B1E;
font-size: 20px;
font-weight: 400;
text-decoration: none;
}
.pagetop a:hover {
text-decoration: underline;
}【STEP9】a要素を装飾する
【画面収録】リンクテキストを右揃えにする
【画面収録】a要素を装飾する
【STEP10】フッターをスタイリングしよう
- フッターのスタイリングをします。
- 下記のHTMLのマークアップ部分にCSSを適用します。
<footer> <p>Copyright © uchikin All Rights Reserved.</p> </footer>
HTML
- footer要素とp要素に以下のCSSを適用してください。
■ footer要素
プロパティ |
値 |
|---|---|
高さ |
160px |
Flexbox |
有効 |
子要素の水平方向の揃え |
中央 |
子要素の垂直方向の揃え |
中央 |
■ p要素（子孫セレクタで指定）
プロパティ |
値 |
|---|---|
文字の色 |
#ffffff（白） |
文字サイズ |
16px |
文字の太さ |
400 |
■ ブラウザプレビュー
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP10】の解答
<footer> <p>Copyright © uchikin All Rights Reserved.</p> </footer>
【STEP10】フッターのスタイリング指定 HTML
footer {
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}
footer p {
color: #ffffff;
font-size: 16px;
font-weight: 400;
}【STEP10】フッターのスタイリング指定 CSS
■ footer要素のスタイリング
■ p要素のスタイリング
■ footer要素に背景色（緑）を指定した場合のブラウザプレビュー
ここまででindex.html（トップページ）が完成しました。
続いて、下層ページのコーディングを行いましょう。
続いて、下層ページのコーディングを行いましょう。
【STEP11】下層ページを作成しよう
- 以下の各ページの完成イメージを見ればわかるとおり、トップページと下層ページには共通部分が多くあります。
- 具体的には、ロゴとナビゲーションを含むヘッダー領域と、メインコンテンツ（テキストの内容は異なる）、ページトップリンク、フッターが全ページ共通の要素です。
- トップページと下層ページの異なる点は、メインビジュアルが下層ページにはなく、その代わりにページタイトルの見出しと金魚のプロフィール写真がヘッダーとメインコンテンツの間に追加されます。
- 下層ページのレイアウトフォーマットは3ページとも共通ですので、1ページできれば、あとは複製してプロフィール写真とテキストの差し替えのみで作成することができます。
- このような場合、index.htmlの複製を元に下層ページをコーディングすれば、効率よくページを量産していくことができます。
index.html
ume.html
taro.html
hime.html
それでは、以下の指示に従い、まずは「ウメちゃん」ページを作成してください。
「ウメちゃん」ページ（ume.html）をコーディングしよう
- 以下は下層ページ（「ウメちゃん」ページ）を作成する手順です。
- 右図「下層ページのHTML構造図」のように、情報構造を下層ページに適したものに変更します。
■ 下層ページのHTML構造図
1. index.htmlを「名前をつけて保存」する
- index.htmlを「ファイル」メニューから「名前をつけて保存…」で、ume.htmlとして同階層に複製します。
- index.htmlは閉じられ、ume.htmlがエディターで開かれます。
【画面収録】index.htmlを「名前をつけて保存」する
2. titleタグのテキストを書き換える
- titleタグのテキストはそのページ固有のタイトルに書き換えます。
- 以下のタイトルに差し替えてください。
<title>ウメちゃん | うちの金魚たち</title>
title
【画面収録】 titleタグのテキストを書き換える
3. 情報構造の見直しを行う
- トップページにあるもので下層ページで不要なものはメインビジュアル（mainvisual.png）です。
- 下層ページで新たに追加される要素は、ページタイトルの見出しと金魚のプロフィール写真です。
下層ページの情報構造を検討し、以下のように変更します。
■ index.htmlからの変更点
- タイトルロゴ画像のimgタグを囲んでいるh1タグを下層ページではdivタグに変更する。
- mainvisual.pngをphoto-ume.jpgに差し替え、imgタグのclass名を別の名前に変える。
- メインコンテンツの見出しと段落テキストを差し替える。
- 各ページの原稿は、うちの金魚たちテキスト.txtからコピー&ペーストしてください。
■ ume.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ウメちゃん | うちの金魚たち</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap" rel="stylesheet"> </head> <body> <a id="pagetop"></a> <header> <div> <a href="index.html"> <img src="images/site-logo.svg" alt="うちの金魚たち" class="title-logo"> </a> </div> <nav class="gnav"> <ul> <li><a href="ume.html">ウメちゃん</a></li> <li><a href="taro.html">タロちゃん</a></li> <li><a href="hime.html">ヒメちゃん</a></li> </ul> </nav> </header> <h1>ウメちゃん</h1> <div> <img src="images/photo-ume.jpg" alt="ウメちゃんの写真"> </div> <main class="main-contents"> <h2>ウメちゃんの紹介</h2> <p> あたまに梅干しのような模様があることからウメちゃんと名づけられました。 昼間は水槽内の中層をつねに行ったり来たり、見まわりを続けています。 </p> </main> <p class="pagetop"> <a href="#pagetop">▲ページトップへ</a> </p> <footer> <p>Copyright © uchikin All Rights Reserved.</p> </footer> </body> </html>
■ ume.html
【画面収録】 タイトルロゴをdivタグでマークアップする
【画面収録】 ページタイトルの見出し（h1）とプロフィール写真（img）を追加する
【画面収録】 メインコンテンツの見出しと段落テキストを差し替える
ブラウザプレビュー
4. 追加したHTML要素をCSSでスタイリングする
- 新たに追加したh1要素とimg要素にCSSを適用します。
- 次のようにclass属性を追加してください。
要素名 |
class名 |
|---|---|
h1 |
page-title |
img |
profile-photo |
■ ume.html
<h1 class="page-title">ウメちゃん</h1> <div> <img src="images/photo-ume.jpg" alt="ウメちゃんの写真" class="profile-photo"> </div>
■ ume.html
それぞれの要素に以下のスタイリング指定を行なってください。
■ h1要素（classセレクタで指定）
プロパティ |
値 |
|---|---|
文字色 |
#E11B1E（赤） |
水平方向の行揃え |
中央 |
文字サイズ |
40px |
文字の太さ |
400 |
下マージン |
60px |
■ img要素（classセレクタで指定）
プロパティ |
値 |
|---|---|
角丸の指定 |
30px |
マージン |
中央配置 上マージン：0 下マージン：100px |
■ ブラウザプレビュー 「ウメちゃん」ページ完成
コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP11】の解答
<h1 class="page-title">ウメちゃん</h1> <div> <img src="images/photo-ume.jpg" alt="ウメちゃんの写真" class="profile-photo"> </div>
【STEP11】下層ページのスタイリング指定 HTML
/* 下層ページ共通 */
.page-title {
color: #e11b1e;
text-align: center;
font-size: 40px;
font-weight: 400;
margin-bottom: 60px;
}
.profile-photo {
border-radius: 30px;
margin: 0 auto 100px;
}【STEP11】下層ページのスタイリング指定 CSS
【画面収録】h1要素とimg要素にCSSを適用する
これで「ウメちゃん」ページ（ume.html）が完成しました。
続くSTEP12では、このページを元に他の下層ページ（「タロちゃん」ページと「ヒメちゃん」ページ）も作成していきます。
続くSTEP12では、このページを元に他の下層ページ（「タロちゃん」ページと「ヒメちゃん」ページ）も作成していきます。
【STEP12】他の下層ページも作成しよう
- 合計3ページある下層ページの情報構造とレイアウトフォーマットや装飾は全て同じです。
- 【STEP11】で完成したume.htmlを複製して、taro.htmlとhime.htmlを作成していきます。
- 以下の手順に従い、残りの2ページを作成してください。
■ ブラウザプレビュー 「タロちゃん」ページ完成
ブラウザプレビュー 「ヒメちゃん」ページ完成
ページの作成が終わりましたら、以下の解答を確認して答え合わせをしましょう。
【STEP12】の解答
「タロちゃん」ページの作成
taro.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タロちゃん | うちの金魚たち</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap" rel="stylesheet">
</head>
<body>
<a id="pagetop"></a>
<header>
<div>
<a href="index.html">
<img src="images/site-logo.svg" alt="うちの金魚たち" class="title-logo">
</a>
</div>
<nav class="gnav">
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>
</header>
<h1 class="page-title">タロちゃん</h1>
<div>
<img src="images/photo-taro.png" alt="タロちゃんの写真" class="profile-photo">
</div>
<main class="main-contents">
<h2>タロちゃんの紹介</h2>
<p>
奇抜な髪型をした人のようなタロちゃんはめんどくさがりで、お食事タイムのときしか泳ぐことをしません。普段は水底でお休みしています。
</p>
</main>
<p class="pagetop">
<a href="#pagetop">▲ページトップへ</a>
</p>
<footer>
<p>Copyright © uchikin All Rights Reserved.</p>
</footer>
</body>
</html>【STEP12】「タロちゃん」ページの作成
【画面収録】「タロちゃん」ページの作成
「ヒメちゃん」ページの作成
hime.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヒメちゃん | うちの金魚たち</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap" rel="stylesheet">
</head>
<body>
<a id="pagetop"></a>
<header>
<div>
<a href="index.html">
<img src="images/site-logo.svg" alt="うちの金魚たち" class="title-logo">
</a>
</div>
<nav class="gnav">
<ul>
<li><a href="ume.html">ウメちゃん</a></li>
<li><a href="taro.html">タロちゃん</a></li>
<li><a href="hime.html">ヒメちゃん</a></li>
</ul>
</nav>
</header>
<h1 class="page-title">ヒメちゃん</h1>
<div>
<img src="images/photo-hime.png" alt="ヒメちゃんの写真" class="profile-photo">
</div>
<main class="main-contents">
<h2>ヒメちゃんの紹介</h2>
<p>
紅白の更紗模様が美しいヒメちゃんはオランダシシガシラという品種の金魚です。
乾燥させたイトミミズをなによりも好んで召し上がります。
</p>
</main>
<p class="pagetop">
<a href="#pagetop">▲ページトップへ</a>
</p>
<footer>
<p>Copyright © uchikin All Rights Reserved.</p>
</footer>
</body>
</html>【STEP12】「ヒメちゃん」ページの作成
【画面収録】「ヒメちゃん」ページの作成
これで「HTML/CSS入門編 コーディング実践演習2」の解説を終わります。