６月３日(水)

・プロフィールのCSSを反映させるには、HTML側のclass名をCSSと完全に一致させる必要がある。特にプロフィール画像のセルにはp_imgを付ける必要があり、ここを間違えると画像の丸型表示や中央配置、影が反映されないので気をつけたい。

・プロフィール画像が表示されないときは、CSSではなくimgタグのsrcのパスを最初に確認する。画像ファイルの場所とHTMLファイルの場所を基準にして、相対パスが正しいか見る必要がある。

・NameやBlood Typeなどの項目名はth、実際の内容はtdに入れる。thとtdの役割を逆にすると、赤い項目欄や表の左右配置が崩れるので気をつけたい。

・table、tr、th、tdの閉じタグを忘れると、表全体の形が崩れる。特に右側にプロフィール画像を置く構成では、タグの閉じ忘れで画像の位置がずれやすいので注意する。

・CSSでbodyやtableを指定すると、ページ全体に大きく影響する。プロフィール専用のCSSをDrupal全体のCustom CSSに入れると、他の記事ページのデザインまで変わる可能性があるので、プロフィール用CSSはプロフィール専用のCSSファイルに入れる方が安全である。

・プロフィールのHTML文には、見た目の指定を直接書きすぎないようにする。色、余白、影、画像サイズなどはCSS側で管理し、HTML側では項目名、内容、画像の配置だけを書くようにすると後から修正しやすい。

・スマホ表示では横幅が足りなくなるため、パソコンではきれいに見えてもスマホでは表が崩れる可能性がある。プロフィール表を作った後は、スマホ幅でも確認する必要がある。

・プロフィールページの見た目が崩れたときは、CSSの数値をすぐ変えるのではなく、先にclass名、画像パス、thとtdの使い分け、閉じタグの順番を確認する。HTMLの構造が間違っていると、CSSを直しても解決しないことがある。