「style.css」ファイルはcssフォルダの中に保存されていることがわかります。
今回編集するWebサイトのファイル構成は、HTMLファイルとCSSファイルがそれぞれ独立して存在しています。この場合、CSSファイルを適用させるためには、HTMLファイルからCSSファイルを読み込む必要があります。
5. アクティビティ② ( 5 / 10 )
アクティビティ②
Webページをデザインしましょう。
このアクティビティではCSSの適用方法と画像の設定を行います。
(想定時間：10分)
アクティビティ②の学習内容
- 2-1.CSSファイルと保存場所を確認しましょう
- 2-2.HTMLファイルを編集し、CSSファイルを読み込みましょう
- 2-3.画像の読み込み設定をしましょう
2-1.CSSファイルと保存場所を確認しましょう
アクティビティ①で確認したWebページはフォントサイズやカラーや配置などを設定するスタイルが適用されていませんでした。
Webページでスタイルを適用させるには、CSSを記述してHTMLファイルに適用させる必要があります。
この課題では、CSSファイルはCSSフォルダのstyle.cssで記述されています。
もう一度、フォルダ構成を確認しましょう。
2-2. HTMLファイルを編集し、CSSファイルを読み込みましょう
HTMLファイルのheadタグの内容を編集します。
headタグは、Webページの属性情報や外部ファイルの読み込み指定の記述を行うところです。
headタグは次のようになっています。
ファイルの読み込みにはlinkタグを使います。
linkタグはrelで読み込むファイルの種類をhrefで読み込むファイルを指定します。
もう一度、上図の赤枠で囲まれたHTML文を確認すると
<!--<link="stylesheet" href="./css/style.css">-->
となっています。
linkタグの前後に
課題1 －－－linkタグのコメントを消す－－－
赤枠で囲まれているlinkタグのコメントを消して保存しましょう。
編集後は次のようになります。
保存をしたら、Webページを再表示して確認しましょう。
編集したWebページを確認するには、ブラウザの再読み込みボタンを押すか、index.htmlをダブルクリックしてください。
CSSが適用されると次のような表示になります。同じ結果になっているか確認しましょう。
課題がうまくできない場合は、「課題1完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題2を行いましょう。
参考： HTMLとCSSの関係を確認しましょう。
CSSファイルはHTMLのスタイルを記述するためのファイルです。
どのように関連付けを行っているのか確認しましょう。
次のデータはHTMLファイルとCSSファイルの一部を抜粋したものです。
HTMLとCSSの関係
ポ
イ
ン
ト
!
HTMLのタグには、id名やclass名を付けることができます。
CSSはHTMLファイルに記述されているタグやid名、クラス名にスタイルを定義することにより、Webページにデザインを適用します。
CSSファイルで記述するデザインの指定にはとても多くの種類があります。今回のレッスンではアクティビティに必要なものしか行っていません。その他の指定について興味がある場合はインターネットなどで検索して調べましょう。
2-3. 画像の読み込み設定をしましょう
Webページで表示する画像データの読み込み設定をします。
画像データはimagesフォルダに保存されています。
今回編集するWebページで利用する8種類、9箇所の画像（青の枠線）は次の通りです。
図 レイアウトと画像ファイル
画像を読み込みにはimgタグを使います。
imgタグの記述方法は次の通りです。
例えば、ヘッダーにロゴ画像を表示する場合は、次のようにHTMLファイルを編集します。
課題2 －－－画像の表示－－－
見本ページと「図 レイアウトと画像ファイル」を確認しながらHTMLファイルを編集し保存しましょう。
画像が入るimgタグのalt属性にはどの画像が入るかわかるように文字が入力されています。
例：<img src="" alt="②メインビジュアル">
どこに画像を入れてわからない場合は、imgタグを探してalt属性を確認しましょう。
ファイル名は次のデータを参考にしましょう。コピーして貼り付けると入力ミスを防ぐことができます。
- ①ロゴ画像 ./images/logo.png
- ②メインビジュアル画像 ./images/mainvisual.png
- ③アバウト画像 ./images/about.png
- ④キャラクター1画像 ./images/character1.png
- ⑤キャラクター2画像 ./images/character2.png
- ⑥キャラクター3画像 ./images/character3.png
- ⑦キャラクター4画像 ./images/character4.png
- ⑧プロフィール画像 ./images/profile.png
編集したWebページを確認するには、ブラウザの再読み込みボタンを押すか、index.htmlをダブルクリックしてください。
画像の読み込み設定を行うと、次のような表示になります。同じように画像が表示されているか確認しましょう。
課題がうまくできない場合は、「課題2完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題3を行いましょう。
画像が入ると一気にWebページっぽくなりましたね。
画像がうまく表示されない場合は、下記の点を確認してみましょう。
画像が表示されない主な原因
-
ファイル名が間違っている
-
ファイル名の入力位置が異なる
-
タグの一部を消してしまった
ちょっとした入力ミスで、表示されなくなります。
画像の表示ができない場合は、入力ミスがないか確認してみましょう。
