こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

xhtmlでの画像サイズ指定について質問です。

xhtmlでの画像サイズ指定について質問です。

htmlでは、例えば800×800の画像でも、スタイルシートのクラス指定(下記は外部にcssを記述)などで
(中略)
<link rel="stylesheet" href="size.css" type="text/css" media="screen" />
(中略)
<img src="cat.jpg" class="wid180he50" alt="猫" />

外部ファイルで・・・
.wid180he50 {width=180px ; height=50px ;}


とすれば180×50で表示されますが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

のxhtmlでは無効となっているようで、そのままの800×800で表示されてしまいます。
どのように記述すれば180×50で表示されますでしょうか?

投稿日時 - 2010-06-15 18:34:08

QNo.5970779

すぐに回答ほしいです

質問者が選んだベストアンサー

htmlでは、例えば800×800の画像でも、スタイルシートのクラス指定(下記は外部にcssを記述)などで
(中略)
<link rel="stylesheet" href="size.css" type="text/css" media="screen" />
(中略)
<img src="cat.jpg" class="wid180he50" alt="猫" />

 これおかしい。
HTML(大文字で書く)では、
<link rel="stylesheet" href="size.css" type="text/css" media="screen">
(中略)
<img src="cat.jpg" class="wid180he50" alt="猫">

XHTMLでは、
<link rel="stylesheet" href="size.css" type="text/css" media="screen" />
(中略)
<img src="cat.jpg" class="wid180he50" alt="猫" />

です。

XHTMLもHTMLの違いではなく、同じCSSを使うならCSSはHTMLの文法に従います。たとえば、XHTMLでは要素名は小文字ですが、HTMLでは区別しませんね。そのためCSSもそのルールに従います。

 ただ、この場合は、CSSが間違っているため、ブラウザが解釈できないだけです。

.wid180he50{
  width:180px;
  height: 50px;
}

と書かなければなりません。

 なお印刷を想定されているなら、高解像度の画像をスタイルシートやHTMLでブラウザ画面上では小さく表示する手法を使いますが、その場合でも 300dpi÷ 96dpi程度の3倍程度に抑えておく方がよいです。
 また、スタイルシートに対応していないユーザーエージェントを考慮するとHTML側でもサイズを固定しておく方がベストです。

<div class="Photo">
 <p>
  <img src="./images/photo/cat1.jpg" width="160" height="120" alt="猫の写真" />
 </p>
 <p>
  <img src="./images/photo/cat2.jpg" width="160" height="120" alt="猫の写真2" />
 </p>
</div>

CSS
div.Photo img{
 width: 180px;
 height: 135px;
} /* img要素に、いちいちclass="wid180he50" なんて無駄なことはしない。子孫セレクタを使えばよい。*/

投稿日時 - 2010-06-15 23:08:03

このQ&Aは役に立ちましたか?

23人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

XHTMLでもCSS は、同じです。
ただ、設定する 方法 が間違っています。

誤× .wid180he50 {width=180px ; height=50px ;}
正○ .wid180he50 {width:180px ; height:50px ;}

更に、imgのサイズは、HTMLで指定するので、CSSで指定する必要がありません・・・

<img src="cat.jpg" width="180" height="50" alt="猫" />

更に、そんな大きい画像を縮小表示するよりも、画像ソフトで
原寸大(width="180" height="50")にリサイズしてから利用するのが普通です。

投稿日時 - 2010-06-15 21:12:04

あなたにオススメの質問