備忘録５

6/10

今回の演習では、HTMLで作成したプロフィールページにCSSで装飾を加えた。

まず、profディレクトリの中にprofile.html、imgディレクトリ、cssディレクトリを作成する作業があったが、最初はこの構造が理解しづらかった。資料には「prof」や「profile.html」と書かれていたため、VS Codeで新しいHTMLファイルを作成するのかと思い混乱した。また、ディレクトリとフォルダの違いもよく分かっておらず、何をどこに配置すればよいのか理解するまで時間がかかった。しかし実際にフォルダを作成し、その中にHTMLや画像、CSSファイルを整理して配置してみると、Webサイトのファイル構成について理解を深めることができた。

特に混乱したのは、profディレクトリ内のprofile.htmlを開いても編集した内容が反映されていなかったことである。確認してみると、別の場所にもう一つprofile.htmlが作成されており、そちらに編集内容が保存されていた。原因は完全には理解できていないが、資料で説明されていた絶対パス（フルパス）と相対パスの考え方が関係しているのではないかと思った。最初はCSSのリンクを「prof/css/～」のように記述していたが、これでは参照先がおかしくなっていたようで、後から「./css/～」という相対パスに修正したところ正常に表示されるようになった。今回の作業を通して、相対パスは現在のファイルを基準として目的のファイルを探すための記述方法であることを理解できた。

また、CSSの記述も難しく感じた。例えばbody要素の色を変更するとページ全体の文字色や背景色が変わることが分かり、特定の部分だけを変更するには別の指定方法が必要なのだと気付いた。さらに、画像を挿入する位置によって表内での表示位置が変化することも分かり、HTMLの構造を意識してコードを書く重要性を学んだ。

今回はHTMLだけでなく、CSSやディレクトリ構成、相対パスなど新しい内容が多く、理解するまで苦労した。しかし実際に試行錯誤しながら作業することで、Webページがどのような仕組みで構成されているのかを少し理解できたため、とても勉強になった。