「画像のwidth, heightに小数点っていいんだっけ」を細かく理解する

こんにちは！Ateam LifeDesign Advent Calendar 2023 15日目を担当します、加能です。
フロントエンド実務2年目、絶賛勉強中です

これは何

今回は、
「画像のwidth, heightに小数点って、HTML・CSSの仕様上使っていいの？」
についてお話しします。（2023年12月現在の情報です）

✍️結論

• HTML：imgタグのwidth, height属性では、小数点NG❌です！
  • 例えば<img src="path" width="30" height="40">としなければいけない
  • 単位のない整数である必要があります
• CSS：width, heightでは、小数点OK⭕️です！
  • 例えば<img src="path"　style="width: 30.3px">はOK
  • ただしブラウザ間の細かい数値の違いに注意です

ざっとこんな感じですが、順番にお話ししていこうと思います。

①imgタグのwidth, height属性では小数点NG🙅‍♀️

imgタグに関するMDNのページでは、widthも、heightも、

ピクセル値で指定します。単位のない整数でなければなりません。

と記載されています。
なので imgタグのwidth, height属性は単位のない整数でなければいけません。

昔、HTML5の頃はパーセントでの指定も許容されていたようですが、
今では整数値（px値）のみです。

②CSSでのwidth, heightは小数点OK🙆‍♀️

CSSのwidthに関するMDNのページでは、

<length> 絶対的な値で幅を定義します。

と記載されています。
<length>？と思い、<length>のページを見てみると、

<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。

さらに<number>……？となるので、
<number>のページを見てみると……

CSS の <number> データ型は、整数または小数部分のある数値を表します。

なので、
CSSのwidthは、整数または小数部分のある数値と、それに続く単位の1つから成り立つ、絶対的な値であるということです。（長い！）

つまり、CSSのwidth, heightでは、厳密なルールで言うと小数点で問題ありません¹。
（そういえば、実際remやemなどの相対的に変わるものは小数点になることもありますね）

注意点⚠️

CSSでwidth, heightを指定するのは一見良さそうに見えますが、
ブラウザごとに数値が微妙に違う結果になる のでお気をつけください。

例えば、Googleの画像を小数点第1位まで指定してみます。

Chromeでは、小数点第1位で計算後の数値がずれます。

Firefoxは、小数点第1位までの指定では大丈夫ですが、第2位以降から計算後の数値がずれ始めます。

小数点第何位とかの細かい世界の話ではありますが、
ブラウザ間の挙動を揃える上でも、画像はなるべく整数値がいいかもしれないですね。

おわりに

どうしても画像サイズで小数点を使う場合は、CSSで書きましょう。
私はwidthの読み方はウィズ、heightはハイトと呼んでます。（諸説ありそうですね）

Ateam LifeDesign Advent Calendar 2023では、
その他にもたくさんの記事を投稿しています。ぜひ読んでみてください！　ではまた

参考

1. 細かく言うと、この仕様はimgタグに限った話ではなくいろんなタグでも同様です。 ↩