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

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

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で表示されますでしょうか？

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

  • ベストアンサー
  • 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

  • phpでreadfile(include)した結果に？が出力される

    phpで以下のようなA,Bの2つのファイル構成にした際に ブラウザでAをアクセスし、ソースを表示するとreadfileした結果の前に「?」が出力されます。 「？」と出力されるのが何か問題だと思うのですが、分かりません。 ご指南をお願いいたします。 ?<!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"> Aファイル <?php readfile('inc/xhtml.inc'); include('inc/dbcon.php'); include('inc/cm468_2.inc'); ?> ----------- Bファイル <!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"> -------------------------------- 出力結果 ?<!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">

    • ベストアンサー
    • PHP
  • xhtmlのスタイルシートについて

    <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> t { color : 407133; k { color : 337060; r { coior : 454580 &gt; </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span>　文字色が変わりません。 どなたか指摘願います。

  • XHTMLの文字コードのEUC-JPの文字化け

    いつもはHTML４.01で作業をしていて XHTMLはどうも不慣れなせいか 今、外注が作成したHPを修正していて 文字コードをEUC-JPにどうしても変更しなければならないのですが それがうまくいかず、文字化けが発生してます。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> を <?xml version="1.0" encoding="euc-jp"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> このように設定したら文字化けが発生しました。 どのように設定したら文字化けがなくなりますか？

  • i-modeでxhtmlをみるには、、

    Perlからxhtmlをはきだして、i-modeで見れるようにしたいのですが、 表示がうまくいきません。 ヘッダーは Content-type: text/html; charset=Shift_JIS <?xml version="1.0" encoding="Shift_JIS"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> こんな感じです。 「Content-type: text/html; charset=Shift_JIS」の部分を 「Content-Type: application/xhtml+xml」や 「Content-Type: application/xhtml」等でやっても表示されませんでした。 もし分かる方がいましたら教えてください。 宜しくお願いします。

    • 締切済み
    • XML
  • xmlnsに変換されてしまう。。。？

    サイトの上部に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> と書かれたサイトをFIreFoxで閲覧したときに、 『選択したソースを表示』でソースを見てみると、 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> と表示されています。 つまりこれはソースが前者であったとしても、ブラウザ表示時に後者に変換されてしまうということでしょうか？ というのも、前者後者のタグによって、 内部のCSSやレイヤーのデザインが崩れてしまうので。

    • ベストアンサー
    • HTML
  • HTMLソースにXHTMLの混在は可能ですか？

    はじめまして。 早速ですが、 現状、サイトＡとサイトＢがあり、 サイトＡは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> で定義されたHTML文書で書かれており、 サイトＢは <!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文書で書かれています。 そして、サイトＢのフッターにあるグローバルメニューをサイトＡの方にも挿入・反映したいと考えています。 このような場合、HTML文書の中にXHTML文書を混在させることは可能なのでしょうか？ 皆様のお知恵を拝借させてください。 宜しくお願い致します。

  • XHTML　meta属性　文字化け

    XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?xml version="1.0" encoding="utf-8"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>

    • ベストアンサー
    • HTML
  • 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう

    Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。

    • ベストアンサー
    • HTML
  • 次のｘｈｔｍｌ文

    <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=EUC-JP" /> <title></title> </head> <body> <address></address> </body> </html> において <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> を <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> とするのは正式には正しいことなのでしょうか?

    • ベストアンサー
    • XML
  • 画像をループさせて表示させたい。

    すみません、jquery初心者です。 下記サイトのようにコンテンツをループで表示させたいのですが、 http://yurubu.org/jquery-autoload/513 HTMLの <!DOCTYPE html> <html lang="ja"> を <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> に変更すると動きません。。 どう変更すれば動くのでしょうか？ ご教授頂けると大変助かります。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する