CSSを使ったサイトデザインについて

質問

最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。

そこで疑問に思っているのは、画像の配置方法についてです。
画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。（当然、場合によって違うので答えはないのでしょうが）
たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。

それとも、一定の基準があるのでしょうか。

アドバイスお願いします。

回答No.2

abril · ベストアンサー

> 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。

質問者様のおっしゃる意味はそれぞれ、

・「HTML上で配置する」：HTMLファイル内で<img>タグでコーディングする
・「CSS上で配置する」：CSSファイル内でbackgroundプロパティで（背景画像として）指定する

という事と解釈して宜しいでしょうか？
もしそういう意味であれば、制作者の意図通りCSSが表示されない（クライアント側が、意図的にCSSを読み込まない又は独自のCSSを読み込む設定にしている／CSSが適用されない環境である、等）場合、前者であれば配置はともかく画像そのものは表示されるが、後者であれば画像が全く表示されない、という閲覧状況になります。
※前者の場合も、クライアント側が「画像を読み込まない」という設定になっていれば表示されませんが、altに適切な内容が指定してあれば代替テキストが表示されますから、閲覧者に某かの情報は伝える事ができます。

> gooでいえば左上のロゴマークを

サイトや社名のロゴ、というのは制作者にとっては最も閲覧者に届けたい重要な情報の1つと考えて差し支えないでしょう。であれば、前者での作成の方が考え方としては自然であると（個人的には）思います。勿論、質問者様のおっしゃる様に、ロゴの部分を背景画像として指定しないと隣接するブロックのレイアウトがうまく実現できない、というケースがないとも断言はできません（経験を積めばまあ大概は…回避可能だと思いますが）。しかしそういう場合にはCSSが表示されなくても情報を伝えられる様に対策（併合策みたいなものです）を施しておいた方が宜しいでしょう。

まずはHTML側に適切な論理構造ありきで、スタイルはそれに付随するものですので、それを頭に置いて構築して行けば自ずとケース毎に最適と思われるHTMLとCSSの組み合わせというのはイメージできる様になって行くと思います。

お礼

アドバイスありがとうございます。

補足

＞＞質問者様のおっしゃる意味はそれぞれ、

＞＞・「HTML上で配置する」：HTMLファイル内で<img>タグでコーディングする
＞＞・「CSS上で配置する」：CSSファイル内でbackgroundプロパティで（背景画像として）指定する

そういうことです。

＞＞CSSが表示されなくても情報を伝えられる様に対策（併合策みたいなものです）を施しておいた方が宜しいでしょう。

ＣＳＳを使ったデザインは結構難しですね。

回答No.1

dezimac

背景とかの単にデザイン的要素のはCSS、解説図、ロゴや写真といった意味があるものはHTMLのimgタグで。

gooとかのロゴマークはimgタグで入れていますね。
<h1><img src="/img/logo/gootop_logo.gif" alt="goo"></h1>

ロゴマークに関しては、Googleのようにimgタグ使わずに、CSSだけで表現しているサイトもありますけど。

お礼

アドバイスありがとうございます。