• ベストアンサー

img タグに対するサイズ指定へのW3Cの方針

職場の先輩から、imgタグへのwidthやheightの指定を止めるように言われました。 先輩曰く、W3Cの方針ではそうなっている、とのこと。 後学のためにと、W3Cのその部分の説明のあるWeb上のアドレスを先輩に尋ねたのですが、「書籍で見た」というだけで、具体的なことは教えてもらえず、自分で調べるしかなくなりました。 しかし、いくら調べてもよく分からず、こちらに参りました。 できれば日本語になっているものがいいのですが、無ければ英語でもかまいません。 1. W3Cのその部分の説明のあるアドレス 2. その方針が打ち出された理由について解説してある部分のアドレス 以上の2点について、どうかご教授ください。

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

  • ベストアンサー
回答No.2

別に W3C では、IMG 要素の width 属性や height 属性は非推奨にはなっていません。 (その様な記述を見た事がないだけですが。) ただ、TD 要素の width 属性は非推奨となっていたので、「非推奨」の記述をしている物を見た事があり 、その上でIMG 要素の width 属性や height 属性は非推奨にはなっていないという確認まではした事があると・・・。 (繰り返しますが、その資料の信憑性はわかりません。) また、質問で挙げられている「書籍」の精度というか信頼性も不明です。 なにせHTMLのタグについても誤った記述の書籍はいくらでもありますし・・・・・。 IMG 要素の width 属性や height 属性を指定するべきか否かの考え方の元となる事は、 描画される時の位置情報等はどの様に指定するべきかという事かと。 IMG 要素に於いては、 width 属性や height 属性が指定されていない場合には画像データが読み込まれないと幅や高さが不明で HTML の描画でそれ以降の位置決めが困難になる。 その回避から width 属性や height 属性を指定する事により、画像データが読み込まれる以前に IMG 要素の HTML の描画で位置決めが進められ、描画が早くなる。 という考え方と。 見た目,デザインに関する事は、CSSで記述しましょう。 という考え方。 まぁ、私が主に見ている「HTML 4.01 仕様書邦訳」では、とりあえず IMG 要素の width 属性や height 属性は非推奨にはなっていない という事で・・・。

参考URL:
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
NowThinking
質問者

お礼

ご回答、ありがとうございました&大変助かりました。 TD 要素の width 属性 height 属性 の非推奨、ひょっとして先輩はこれと間違えていたのかな…と思ったら、先輩はこれ使っています(^_^; #2さんのおっしゃるように、サイズ指定をしていると画像表示が遅れる時に先に文字表示できるので、ユーザビリティの観点から考えると、先輩の話はかなりおかしいのに… と、納得がいかない状態でしたが、大元が判明したおかげですっきりしました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • 0KG00
  • ベストアンサー率36% (334/913)
回答No.1

img要素のwidth,heightに関しては非推奨にはなっていなかったような。 hspace属性なんかは非推奨ですけどね。 この属性が非推奨になった理由に関してはスタイルシートによるものです。いくらでも事例はでてきますので検索をお願いします。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#h-13.7.1 http://www.w3.org/TR/REC-html40/struct/objects.html#adef-width-IMG

NowThinking
質問者

お礼

ご回答、ありがとうございました&大変助かりました。 hspace属性は、普段から使っていなかったので気にもかけていませんでしたが、知らないと危ないですね。 英語は苦手ですが、大元が判明したおかげですっきりしました。 出所を確認しながらできるだけ間違いの無いよう、更に勉強します。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 正規表現を使いimgタグ内から幅と高さサイズを抜き出し

    正規表現を使いimgタグ内から幅と高さサイズを抜き出し phpにて正規表現を使い html の imgタグ内の width = "xxx" height = "xxx" を各々抜き出しその数字も個別に抜き出したいと思っております。 正規表現で行き詰っており、お知恵を拝借できればと思っております。 説明がわかりづらいかと思いますが、よろしくお願いしたいと思います。 下記のような文字列より <img src="http://test.co.jp/img/test01.jpg" alt="テスト画像です。" title="テスト画像です。" width="361" height="640" class="size-full wp-image-100" /> width="361" height="640" を個別に取りだし さらにその中の数字"361"を取り出したいと思っております。 正規表現に不慣れなので、お知恵をお借りいただけないでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • vodafoneのimgタグについて

    Vodafoneのページを作りました。 そのページにカウンタを設置しようと思いよくあるimgタグを使いCGIを呼び出そうとしております。 <img src=counter.cgi width=1 height=1> のようにPCやiモードだと画像は「width=1 height=1」の為表示されませんよね。 でもvodafoneの場合?マークの画像が表示されます。 これを表示させないいい方法はありますか? ご教授お願いします。

  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • pタグとimgタグについて

    【やりたいこと】 手順1.pタグによる文章 imgタグによる解説画像 手順2.pタグによる文章 imgタグによる解説画像 つまり、各手順に対しての解説画像をはっていこうと考えています。 【タグ】 <p>手順1.「メニューを選択」→「ファイルを保存」<img src="説明画像"></p> <p>手順2.「保存場所の選択」<img src="説明画像2"></p> として組んでいます。 【得られる結果】  手順1.「メニューを選択」→「ファイルを保存」 説明画像1  手順2.「保存場所の選択」 説明画像2 と当然、横並びになります。 画像の横にテキストを配置とかできるのわかるのですが、 【求める結果】  手順1.「メニューを選択」→「ファイルを保存」       説明画像1  手順2.「保存場所の選択」       説明画像2 という形に持っていきたいのです。 【変更後のHTML】  <p>手順1.「メニューを選択」→「ファイルを保存」</p>  <p><img src="説明画像"></p>  <p>手順2.「保存場所の選択」></p>  <p><img src="説明画像2"></p> と組むのがいいのでしょうか? imgのcssのvertical-alignではできないと感じたもので…。 ご教授お願いします。

    • ベストアンサー
    • CSS
  • <IMG>タグにて縦横サイズの指定の仕方

    画像をアップロードさせ、ブログのプロフィール欄に画像が表示されるようなシステムを作っています。 (注※私は開発側で、ブログ利用者としての質問ではありません。) アップロードされてくる画像の縦横の比率や大きさは毎回バラバラなモノがアップロードされてくると思いますが、プロフィール欄の画像枠を200×200pxとして、その範囲に表示画像を収めたい場合はどうすればよいのでしょうか? 例えば <img src=xxx.jpg height=200> と指定した場合、 240×400pxの画像がアップロードされてくれば 120×200pxとして表示してくれますが、 400×240pxの画像がアップロードされてきてしまうと 横幅が200ピクセル以上で表示されてしまいます。 かと言って、 <img src=xxx.jpg height=200 width=200> と指定したのでは 240×400pxの画像の場合、横広がりの引き伸ばし画像で、おデブちゃんみたくで表示されてしまいます。 どなたか解決策ご存知でしたらご教示宜しくお願いします! <IMG>タグでは無くCSSでの方法でも大歓迎です!

    • ベストアンサー
    • HTML
  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの4枚の画像をテーブルを使って同じ幅・高さ縦横各2枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか?

    • ベストアンサー
    • HTML
  • IMGタグごとにCSSを設定する方法

    自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない(編集できない)状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか?最低限の希望は、大きい画像(160px*140px)をひとかたまり、サムネイル画像(32px*30px)をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML+JavaScript+CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。

  • imgタグのmax-widthについて

    画像(40×30)を領域(20×10)に縦横比を維持したまま縮小する際に imgタグにstyle="max-width:20px;max-height:10px;"を指定すること で画像を13×10のサイズで表示することは可能ですか? また、できない場合はどのような方法を用いるべきでしょうか?

このQ&Aのポイント
  • エレコムのウエブカメラ(NCC-EWNP100WH)についてSkylink Viewを利用した遠隔監視サービスのサポートが3月末で終了することがアナウンスされました。
  • 終了後は同カメラを使用することはできず、廃棄するしかないでしょう。
  • この影響により、遠隔監視サービスを利用しているユーザーは別のカメラやサービスを検討する必要があります。
回答を見る