5回目の備忘録

1. 実習の目的 
単なるマークアップ言語の演習にとどまらず、Web標準に準拠した構造化と、CSSによるデザインモジュール検証を目的としてプロフィールページを制作した。

2. 私の失敗と解決過程

• 問題点1: テーブルの余白設定のエラー
  • テーブルの行間に余白を作ろうとCSSで margin を指定したが、デザインが反映されなかった。
  • 原因と解決: テーブルは通常のボックスモデルと異なり、border-collapse: separate; と border-spacing を使用する必要があることを学び、修正した。
• 問題点2: プロフィール画像の比率の崩れ
  • アイコンを丸型にするため border-radius: 50% を適用したが、元画像の縦横比が崩れて歪んでしまった。
  • 原因と解決: <img> タグに object-fit: cover; を追加することで、画像の比率を維持したまま綺麗に切り抜くことができた。

3. モジュール検証と考察

データ構造の正確性を高めるため、<th> 要素に scope="row" を指定し、スクリーンリーダーなどのアクセシビリティに配慮した。また、外部CSSリンク（<link href="..." rel="stylesheet" />）を用いて構造とデザインを分離し、正常に読み込まれるかモジュール検証を行った。

失敗を隠さず備忘録に記録することで、CSSの挙動をより深く理解する良いきっかけとなった。