はじめに
ネットでimgタグのwidth, heightについて検索すると
以下のように % で指定する例がヒットします。
<img width="100%" height="100%" />ですが…
「負でない整数をピクセル単位で」指定するのが正解です
「負でない整数をピクセル単位で」は、
- 正の整数（数字）だけをピクセル値で入力する。
- 単位は書かない。
- 小数点もダメ。
という意味です。
W3C Web standards の公式ページには、以下のように記載されています。
※W3C Web standards：Webのルールブックのようなもの。
・width = non-negative integer
Give the width of the visual content of the element, in CSS pixels.・height = non-negative integer
https://www.w3.org/wiki/Html/Elements/img
Give the height of the visual content of the element, in CSS pixels.
要約すると
「負でない整数をピクセル単位で指定してね！」
と書いてあります。
%を指定すると、W3C Markup Validation Serviceでエラーが出ます。
実験
以下のように、width に % を含めたimgタグをコードに仕込んで、
<img src="./assets/images/img-concept01.png" alt="concept" width="100%" height="700" />W3C Markup Validation Serviceでチェックしてみます。
※このツールで、HTMLが正しく記載されているかチェックできます。
※使い方は「HTML、CSSが正しく書けているかチェックする方法」を参照。
すると、以下のようなエラーメッセージが出力されます。
Error Bad value 100% for attribute width on element img: Expected a digit but saw % instead.
要約すると
「不正な値です。width に % は入れないで、数字だけ入力してね！」
と書いてあります。
- %だけでなく、小数点、rem、pxなどもエラーになります。
（とにかく数字意外は入れちゃダメ） - heightも同じ挙動になります。
エラーは出るけど、表示はできる
実際は、imgタグのwidthやheightに
・% を指定しても
・600.66 のように小数点を指定しても
Webページとして表示はできます。
が、やはり標準化されたルール的にはNGのようです。
まとめ
どうせならルールに則って正しいHTMLを書きたいですね！
いつどこでエラーが出るようになるかも分からないです。
ということで、これからは
imgタグのwidth, heightには
「負でない整数をピクセル単位で」指定しましょう！
- 正の整数（数字）だけをピクセル値で入力する。
- 単位は書かない。
- 小数点もダメ。
💡補足
・本件はあくまで「HTMLのimgタグ」に関するものです。
・CSSでは % も vm もどんどん使ってください！
おまけ
おまけ① iframeタグのwidthも同じ！「負でない整数をピクセル単位で」指定しよう！
iframeのwidthに関しても同様の記載があります。
こちらもやはり「負でない整数をピクセル単位で」指定しましょう。
・width
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
The width of the frame in CSS pixels. Default is 300.
おまけ② 関連ポスト
🌻正しいHTML、正しいCSS書いてますか！？
— とも🌻ひまわりweb studio🌻コーダー (@tomo_himawari_) October 14, 2023
W3Cバリデーターでチェックしよう！
・HTML：https://t.co/n75BGr7Qba
・CSS：https://t.co/VJjgTxSDiQ
👆で正しく書けているかチェックできます！
明日からいくつか事例を紹介します！#HTML #CSS #Web制作 pic.twitter.com/f7pgBycMi7
