• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：xhtmlでの画像サイズ指定について質問です。）

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

このQ&Aのポイント
  • xhtmlでの画像サイズ指定についての質問です。htmlではスタイルシートのクラス指定で画像サイズを指定できますが、xhtmlでは無効となってしまいます。どのように記述すれば画像サイズを指定できるのでしょうか？
  • xhtmlでの画像サイズ指定についての質問です。htmlではスタイルシートのクラス指定で画像サイズを指定できますが、xhtmlでは無効となってしまいます。どのように記述すれば画像サイズを指定できるのでしょうか？
  • xhtmlでの画像サイズ指定について質問です。htmlでは、スタイルシートのクラス指定で画像サイズを指定できますが、xhtmlでは無効となっています。どのように記述すれば画像サイズを指定できるのでしょうか？

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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程度の３倍程度に抑えておく方がよいです。 　また、スタイルシートに対応していないユーザーエージェントを考慮すると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" なんて無駄なことはしない。子孫セレクタを使えばよい。*/

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.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"）にリサイズしてから利用するのが普通です。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する