第6回　プロフィールページ制作とCSS調整

今回の講義では、Drupalを用いたサイト制作を進めながら、HTMLとCSSによってページの構造やデザインを整える方法について学んだ。Webページを作成する際には、文章や画像をただ配置するだけではなく、見出し、段落、画像、リンクなどを適切に使い、利用者にとって見やすい構成にすることが重要だと分かった。また、CSSを用いることで、色、余白、文字の大きさ、画像の配置などを調整でき、サイト全体の印象を統一できることを理解した。

今回の作業では、プロフィールページの制作を進めた。まず、自分のサイトの雰囲気に合うように、AIを利用して個人イメージ画像を作成し、その画像をプロフィール部分に挿入した。さらに、講義課題の内容に沿って、VS Codeを使いながらHTMLコードを作成し、名前、趣味、星座などの自己紹介情報を整理して表示できるようにした。その後、CSSを用いて背景色や文字色、画像のサイズ、余白などを調整し、ページ全体がかわいらしく統一感のある印象になるよう工夫した。

難しかった点は、HTMLで作成した内容にCSSを正しく反映させることである。特に、画像のサイズや配置を調整する際に、思ったより大きく表示されたり、文章とのバランスが崩れたりしたため、何度もブラウザで確認しながら修正を行った。また、VS Codeで編集したファイルを保存し、ブラウザで表示を確認する流れにもまだ十分慣れていなかったため、作業に時間がかかった。

今回の作業を通して、プロフィールページを作成するには、HTMLで情報を整理する力だけでなく、CSSで見やすくデザインする力も必要だと感じた。次回は、ページ全体のレイアウトをさらに整え、画像や文章の配置をより自然に見えるよう改善していきたい。