質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

1758閲覧

imgタグのwidth属性とheight属性の指定について

ryoo_chksl

総合スコア69

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/12/02 05:57

imgタグにwidth属性とheight属性を指定するメリットに、

画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。そのため、感覚的には表示速度が高まります。また、レンダリング中のカクカクとした動き(画像が読み込まれるごとにレイアウトが動いてしまう現象)がなくなります。

TAG indexより

がありますよね。

しかし、レスポンシブ対応のために画像サイズを画面幅によって可変になるようにCSSで設定すると、画像の幅と高さはCSSの設定値が優先されるため(ソース)、width属性とheight属性で指定した値にはなりません。
ということは、width属性とheight属性を指定すれば画像読み込み前に属性の値分のスペースを確保できるものの、最終的にはCSSで設定した値に変わるので画像のスペースが大きくなったり小さくなったりしてレイアウトが動いてしまうのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/12/02 12:17 編集

imgが「レスポンシブ」前提の場合、HTMLでのwidth、heightの属性指定は、CSSより優先度が低いので、記述は不要です。(※ 誤記述のため一部編集しました。)
guest

回答3

0

width属性とheight属性を指定すれば画像読み込み前に属性の値分のスペースを確保できるものの、最終的にはCSSで設定した値に変わるので

CSSの読み込みが遅れればそうなりますが、現実問題としてはCSSはまっさきに読みこまれるので、ほぼ問題ありません。

投稿2018/12/02 06:48

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoo_chksl

2018/12/02 07:05

とすると、そもそもwidth属性とheight属性を指定するのもあまり意味がなくなるのでしょうか?
MakotoOoka

2019/01/25 12:46

そもそもwidth、height属性の指定が必要とされていたのは、ブラウザでのレンダリング時に画像読み込み前後でレイアウトが変わるから、という理由がありました。 CSSで指定している場合はそもそもその心配は無いので必要性もなくなるという事です。
guest

0

ベストアンサー

CSSのカスケード処理

まず、CSSのカスケード処理を押さえておいてください。
過去ログに詳細な説明があります。

デフォルトスタイルシート

一般にスタイルシートと呼称されると、style要素やlink要素内で指定されたスタイルを指す事が多いですが、それは制作者スタイルシート(上記日本語訳仕様上では「通常の作者宣言」)と呼ばれるもので、スタイルシートの一端に過ぎません。
制作者スタイルシートよりも優先順位が低い宣言にデフォルトスタイルシート(上記日本語訳仕様上では「通常の UA 宣言」)があります。

img要素のwidth属性/height属性は位置的にはデフォルトスタイルシートとほぼ同じと思われます。
(実際にはデフォルトスタイルシートよりも優先順位が低い可能性がありますが、優先順位から逆残すれば、立ち位置は大きく外れてないと思います)
イメージ的には下記スタイルシートがUA宣言されているのに近いといえます。

CSS

1img[width="100"] { width: 100px; } 2img[width="101"] { width: 101px; } 3img[width="102"] { width: 102px; }

カスケードの有効性

では、一番優先順位が低いデフォルトスタイルシートに異議はないかと言えば、そんなことはなく、

  • 何も制作者スタイルシートで指定されていなければ、<img width="100" height="100"> が有効となる

これがメリットといえます。


実際、制作者スタイルシートだけをとってもそういう状況はあります。

HTML

1<style> 2p { margin: 1em 0; } 3.foo { margin: 2em 0; } 4p.foo { margin: 3em 0; } 5</style> 6</head> 7<body> 8<p class="foo">sample</p>

上記CSSだけなら p {}.foo {} が無駄ですが、よく考えれば、次のHTMLで優先順位別にスタイルが適用されるメリットに気が付きます。

HTML

1<p>sample1</p> 2<div class="foo">sample2</p> 3<p class="foo">sample3</p>

結論としては、デフォルトスタイルシートは「製作者が何もスタイルシートを適用しなければ、有効なこと」がメリットです。

Re: ryoo_chksl さん

投稿2019/01/29 12:23

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

属性値とCSSの値を同じにしてはどうでしょうか?
px? vh? vw? %?

投稿2018/12/02 06:01

yamato_user

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoo_chksl

2018/12/02 07:03

試してみましたが、Chrome70.0.3538.110では属性値をvwもしくはvhで指定するとpx値として解釈されるようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問