width属性は優先度が低い

PC&iPad
長いことHTMLをあつかってきたつもりですが、基本的なところも改めて調べてみると、覚え間違いをしていることが多いですね。

img要素は、上の画像のように[html]<img src="https://www.inqsite.net/weblog/wp-content/uploads/2012/01/P1010920.jpg" alt="P1010920" width="480" height="360" />[/html]と書いて、src属性はともかく、alt属性が必須項目なので、width属性・height属性も必須項目のような気がしていました。
おまけに、HTMLに直接書くことから、element.styleと同じく優先度が高いもの、と。

だから、レスポンシブWebデザインにおいてwidth属性が指定してあるのに、なぜ画像の大きさがウインドウサイズによって変化するのか引っかかっていたのですが、width属性はスタイルのwidthプロパティよりも、優先度が低かったんですね。

[html]<img style="width:240px;height:auto;" src="https://www.inqsite.net/weblog/wp-content/uploads/2012/01/P1010920.jpg" alt="PC&iPad" width="480" height="360" />[/html]とスタイル属性に"width:240px;height:auto;"を指定してみると
PC&iPad
小っちゃくなった。

さらにmax-widthのほうが優先度が高くて
[html]<img style="width:240px;max-width:120px;height:auto;" src="https://www.inqsite.net/weblog/wp-content/uploads/2012/01/P1010920.jpg" alt="PC&iPad" width="480" height="360" />[/html]
PC&iPad
さらにさらにmin-widthに違う値を指定すると[html]<img style="width:240px;max-width:120px;min-width:400px;width:120px;height:auto;" src="https://www.inqsite.net/weblog/wp-content/uploads/2012/01/P1010920.jpg" alt="PC&iPad" width="480" height="360" />[/html]
PC&iPad
これが最優先。

widthプロパティはもちろんのこと、max-width・min-widthはIE6では非対応(こんなハックもあるようですがmin-width、max-widthを使いたい)ですが、IE7以上なら対応しているので、上手く使えば特にCMS使用の場合、コーディングの幅が広がるかな。

HTML CSS

Posted by inqsite