見本を表示して正しくできているか見比べましょう。
課題がうまくできない場合は、「課題7完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題8を行いましょう。
学習内容は多いですが、一つ一つの課題での修正内容は多くありません。頑張って課題をクリアしましょう。
8. アクティビティ④ ( 8 / 10 )
アクティビティ④
Webページを完成させましょう。
このアクティビティではCSSを適用して見た目を整えます。
(想定時間：35分)
アクティビティ①の学習内容
- 4-1.キャラクター(character)のデザインを完成させましょう
- 4-2.CSSが反映されない理由を考え、キャラクターの再修正を行いましょう
- 4-3.キャラクター画像の表示位置の修正を行い、デザインを完成させましょう
4-1.キャラクター(character)のデザインを完成させましょう
見本とどこが違うかを確認します。
縦並びの画像を横に並べますが、すべてを横ではなく、2つの画像をまとめた単位で横並びにしているところに注意してください。
修正内容を確認したら、その修正箇所がHTMLファイルとCSSファイルでどの部分なのかを確認します。
HTMLファイル
CSSファイル
キャラクターも横並びにするためにプロパティdisplayを「block」から「flex」に変更します。
課題7 －－－キャラクター画像を横並びにする－－－
キャラクターを表すCSSファイルのプロパティdisplayを「flex」に変更し保存しましょう。
今回は横並びになっていないことがわかります。
なぜ、「display: flex;」を指定したのに横並びになっていないか考えましょう。
4-2.CSSが反映されない理由を考え、キャラクターの再修正を行いましょう
反映されない原因を知るために、HTMLファイルとCSSファイルの関係から確認しましょう。
HTMLファイルとCSSファイルの関係を確認しましょう。
HTMLファイルとCSSファイルのスタイルの指定は、タグやid名、class名で関連付けられています。
正しくできているアバウト(about)を例に確認します。
CSSで「#about」で指定されているスタイルはHTMLで「id="about"」で囲まれたタグの中のすべてに適用されます。
HTMLのid名やクラス名とCSSファイルのセレクタが一致しているかどうかが重要です。キャラクターを作成しているHTMLとCSSを確認しましょう。
編集したCSSの確認
編集したCSSでのキャラクター(セレクタ名：#character)の部分を確認すると次のようになっています。
セレクタはスペースで複数指定した場合、「左のセレクタの中にある」というような親子構造を指します。
CSSのセレクタ指定が「#character .flex」となっているので、
idにcharacterと書かれたタグブロックの中で、クラス名にflexと書かれたタグの中のスタイル指定
という意味になります。
編集したHTMLの確認
編集したHTMLを確認すると次のようになっています。
CSSでは「idにcharacterがついたタグブロックの中にあるclassがflexのタグ」にスタイルを指定していましたが、HTMLではid名は指定していますがclass名は指定していません。
そのため、CSSで「display: flex;」を指定してもスタイルが適用されません。
CSSが適用されるようにHTMLファイルを修正しましょう。
課題8 －－－CSSが適用されるようにHTMLファイルにクラス名を指定しましょう。－－－
HTMLファイルのキャラクターを表すタグのclass名を「flex」に変更し保存しましょう。
見本を表示して正しくできているか見比べましょう。
課題がうまくできない場合は、「課題8完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題9を行いましょう。
キャラクター画像が横に並んで表示されましたね。
でも、よく見るとまだ修正するところがあります。
横並びに修正したWebページと見本のWebページを見比べるとキャラクター画像の位置が見本通りでない箇所があることがわかります。
見本のキャラクター画像は、左側画像が右側画像より低い位置で表示されています。
4-3.キャラクター画像の表示位置の修正を行い、デザインを完成させましょう
見本と比べ左の画像が下がっていることがわかります。
左の画像を下げるためには左の画像にだけ、上に余白を付ける必要があります。
左の画像を下げる方法
ある要素を下げるためには、要素の上に余白を付ける必要があります。
上に余白を100px分、付けるためのスタイル
margin-top: 100px;
「margin」とは余白のことです。「top」は上を表します。「margin-top」で「上の余白」を表します。
このスタイルを左側のキャラクター画像をまとめているCSSに指定します。
課題9 －－－キャラクター画像の表示位置を修正しよう－－－
キャラクターの左画像をまとめているクラス#character .flex .leftを表すセレクタのスタイルに「margin-top: 100px;」を設定し保存しましょう。
見本を表示して正しくできているか見比べましょう。
課題がうまくできない場合は、「課題9完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って次のアクティビティを行いましょう。
これで、見本と同じになったと思います。同じHTMLでもCSSでスタイルを付けることにより、カッコ良いWebページが作成できます。ここまで作業したファイルを提出しましょう。
作成したHTMLファイルを提出しましょう
選択されていません
対応形式：.html
作成したCSSファイルを提出しましょう
選択されていません
対応形式：.css
※この再現版では提出は行いません（送信先は未接続です）
