アクティビティ②

(想定時間：10分)

Webページを確認しよう

Google Chrome使用して、以下のURLにアクセスして、Webページがどのように表示されているか確認してください。

このページは、学習教材用サイトです。

https://it0310.starjuku.info/sample/#（スターAI・情報塾）

ここで紹介する写真は、MacOSで撮ったスクリーンショットです。

他のOSだと多少見た目は違うかもしれませんが、操作はほとんど一緒ですので、安心してください。

HTMLやCSSの確認をしよう

Web開発者用の機能で、HTMLやCSSの確認ができます。GoogleChromeでは、次の手順でデベロッパーツールを利用できます。
「右上の三点メニュー」→「その他のツール」→「デベロッパーツール」の順にクリックしてください。

画面の右側に、デベロッパーツールが表示され、HTMLやCSSの確認ができます。

HTMLやCSSの編集方法を確認しよう

デベロッパーツール左上の「ページ内の要素を選択して検査」をクリックしてください。

Webページの、HTMLを確認したい部分をクリックしてください。
デベロッパーツールに、該当部分のHTMLとCSSが表示されます。

ここでHTMLやCSSを修正すると、修正内容がWebページに反映されます。
例えば、編集前の画像がこちら

以下の通り編集すると、

・HTMLの修正

・CSSに追加

このように表示されます。

Webページを編集しよう

以下の指示に従って、「完成例」を参考に編集し、編集したWebページのスクリーンショットを提出してください。

完成例

課題

スターAI・情報塾のサイトから、以下の画像の部分を探してください。
https://it0310.starjuku.info/sample/#（スターAI・情報塾）

①の部分のHTMLのテキストを編集し、「松ぼっくり」に変更しましょう。
また、CSSから文字の色(color)を「purple」に変更し、文字のサイズ(font-size)を30pxに変更しましょう。

②の部分のテキストを、自由に変更しましょう。完成例と同じ文章でも構いません。

③の部分の画像を変更しましょう。
画像は<img>タグで表示されます。タグ内の「src="ここ"」この部分を、以下のURLに変更してください。

変更するURL「https://it0310.starjuku.info/data/img/it03-02-a1-4tri.png」

完成した部分をスクリーンショットで撮り、提出してください。
スクリーンショットは、修正した箇所のみ撮影したものでも、全体を撮影したものでもどちらでも構いません。