セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。2024.07.16こんにちは。今回はimgタグのwidth/height属性の適切な指定方法とその効果について解説していきます。imgタグをもっと理解できる本を発売中です!各属性の仕様、使い方などの基本に加え、サイズの決まり方やおすすめのCSSなど実践で使えるテクも紹介!ぜひお買い求めください!【完全攻略】imgタグ解体新書Web制作において一番使われると言っても過言ではないimgタグ。役割と効果レスポンシブはどうするのまとめ概要width/height属性は、画像サイズを定義するものです。height="450"/>ただし、詳しくは後述しますが実際に表示される時のサイズはCSSに記述があればそちらが優先されます。参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/img画像サイズの決まり方をより詳細に知りたい方はこちらの記事をご覧ください。【徹底解説】もう迷わない!HTMLにおける画像サイズの決まり方を理解する【imgタグ】こんにちは。Webページ上に画像を表示させるにはimgタグを使いますよね。使ってみると結構サイズが思った通りになってくれずに困ったことも多いのではないでしょうか。いうわけで今回はimgタグのサイズの決まり方について細かくまとめて...itokoba.com2023.10.15役割と効果width/height属性指定すると、ブラウザは画像がロードされる前に適切なスペースを確保しレイアウトのシフト(詳細は後述)を防ぐことができます。記述方法から確認していきます。width属性は画像の幅を、height属性は画像の高さを指定します。実際の画像あるいはデザインファイル上の画像の横幅と縦幅の値、もしくはその比率を指定します。以下のどの指定でも良い。height="9"/>この属性の値はピクセルで指定することができます。値は単位のない整数でなければなりません。width="500"は画像の幅を500ピクセルに設定します。heightも同様です。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!では「レイアウトシフト」について解説します。次のgifを見てみましょう。デモページ(https://itokoba.com/demos/image-attribute-sample/)で実際に試していただくこともできます。左がwidth/height属性を指定した場合、右が指定しない場合です。このように、右はページ読み込み時に文字の部分が一瞬動いてしまっています。これが「レイアウトシフト」と呼ばれる現象で、Webページがロードされる間に視覚的な要素が予期せずに動く現象を指します。ユーザーがページを読んでいる時やボタンをクリックしようとしている時に、突然ページ上の要素が移動したりサイズが変わったりするとユーザーにとっては迷惑ですよね。皆さんもページを読み込んで2秒後くらいに広告が読み込まれて文章やボタンがボコッと動いてイライラした経験があるのではないでしょうか。widthとheight属性を指定すると、画像が読み込まれる前段階で画像のサイズ分のエリアを確保するようになります。先ほどのgifの左の例のように、すでにスペースが確保されていてそこに画像が収まるような挙動になります。細かい話ですが、これでUXを大きく改善できますね。画像がたくさん使われているページでは、これを指定しないと読み込み直後に要素があちらこちらへガチャガチャ動いてしまいます。Vitals」というウェブパフォーマンスの指標群の一部として提唱されたものです。it.web.devこれを改善することでPageSpeedInsights(https://pagespeed.web.dev/?hl=ja)やLighthouseの点数も上がりますから、ぜひ意識しましょう。ちなみにこのレイアウトシフトですが、目視で確認する以外にもデベロッパーツールの「パフォーマンス」タブから見つけることができます。数が多いと目視で見つけきれないのでぜひ活用しましょう。パフォーマンスタブを開くと記録開始を指示されます。記録モード中に再読み込みを行うと、ページ読み込み中に発生する様々なイベントが記録されます。その中にレイアウトシフトに関するものがあるので探してください(レイアウトシフトが発生しなければ欄そのものが出てこない)。レイアウトシフト発生タイミングが紫色のマークで表示されます。これをマウスホバーすると発生箇所がわかります。このようにしてレイアウトシフトを見つけ、対策しましょう。レスポンシブはどうするの「属性指定の場合は固定値を指定するのがほとんどと言うけど、それではレスポンシブ対応できないのでは?」と思うかもしれませんが、ご安心ください。最終的な見た目はCSSで定義されたものが優先されますから、今まで通りサイズ指定を行っていれば問題ありません。100%;が指定されていればちゃんと親要素の幅と同じになります。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!まとめというわけでimgタグのwidth/height属性についてでした。全ての画像にこれを指定するのは地味ながら大変な作業ですが、その一手間がページのクオリティをグッと上げます。width/height属性以外にもimgタグに必要な属性はいくつかあります。それらを完全に解説し、よりimgタグを理解して使いこなすための本を発売中です!ぜひお買い求めください!【完全攻略】imgタグ解体新書Web制作において一番使われると言っても過言ではないimgタグ。fixed;が効かない理由を暴くこんにちは。fixed;が効かない理由とその対処法をまとめていきます。こんなヘッダーを作ろうとしています。...2021.12.09HTML/CSSを学ぶHTML/CSSを学ぶ【marginに別れを告げる】gapプロパティでスマートに余白を攻略するこんにちは。今回は余白について書いていきます。みなさんCSSにおいて余白といえばmargin、あるいはpaddingを思い浮かべるでしょう。要素と要素の間の余白はmarginを、要素の内側の余白にはpaddingを、というような使い分けを...2023.12.21HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】imgタグとbackground-imageの完璧な使い分けこんにちは。2つが思い浮かぶと思います。この2つ、結局のところどう使い分ければいいでしょう。それにつ...2024.07.16HTML/CSSを学ぶHTML/CSSを学ぶCSSで安易なネストは使うな【Sassもだよ】こんにちは。Chrome112でCSSのネストが使えるようになりました。Useを見るとまだモダンブラウザはほとんど対応していません(2023/04/05現在)が、基本的には後追いで実装する流れになるでしょう。gridを使って要素を重ねるこんにちは。gridを使って要素を重ねる方法について考えていこうと思います。ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。結論から言...2022.12.24HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】imgタグのdecoding属性は指定しなくてもいいこんにちは。今回はimgタグのdecoding属性の適切な指定方法とその効果について解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。