「画像の大きさを指定したいのに大きさが変わらない!?なんで!?どうすればいいの!?」わかります。私もよく画像サイズが変わらず困っていました。私が前に画像サイズが変わらなかったことを思い出し、原因と解決方法をお教えします。CSSやhtmlでimgのwidthが効かない・画像のサイズが変わらない原因と解決方法を7つ紹介します。画像を縮小できないのはwidthが効いていないということですので画像を縮小できなくて困っているかたも見ていってください。img以外が原因の可能性もあるため下記記事も参考にしてください。widthが効かない原因と解決方法についてtable,td,div,a,span,flex,li,imgタグとhtmlタグケース別に解説します。max-width,min-widthが効かない理由も解説します。>html属性のwidthに単位はいりません。単位がない状態ではpxとして解釈されます。一応「px」と「%」の単位は効きます。「em」や「vw」は効きません。class="example">emやvwなどの単位で指定したいならCSSでwidthを指定しましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。class="example">htmlのwidth属性ではpxなどの単位をつけませんが、CSSのwidthでは単位の指定が必須です。class="example">単純にCSSのwidthに単位を指定しましょう。class="example">上記の例ではCSSで「width:200px」が指定されているのにhtmlでは「width="50"」が指定されており矛盾しています。200px」が優先されます。【解決方法】CSSのwidthを調整する優先される方であるCSSのwidthを調整しましょう。CSSのwidthを削除してhtml属性のwidthを優先させる方法もあります。html5からhtml属性よりCSSで調整することが推奨されています。200px」が指定されており矛盾しています。200px」が優先されます。CMSによっては自動でstyle属性にwidthが指定さていることがあります。class="example3">style属性を削除しCSSで指定しましょう。style属性で指定するよりCSSで指定するほうが一般的です。style属性を削除するのが困難な場合はCSSのwidthに「!important」をつけて上書きしてしまいしょう。class="example5"></div>min-widthは要素の最小幅を、max-widthは最大幅を指定するCSSです。widthはこの範囲内で指定することができ、それを超える場合は最小幅、最大幅で止まります。上記の例ではmax-widthが50px、つまり50pxは超えられない設定になっているのにwidth:200pxを指定しています。この場合、幅は50pxになります。class="example5"></div>widthに!importantをつけてもmax-widthを超えることはできません。max-width、min-widthを直すか上書きする必要があります。max-width、min-widthの初期値は「none」です。「auto」ではありません。【原因6】CMSによる仕様だからCMSによっては画像の右下をマウスでひっぱるだけで画像サイズを変更できるものもあります。逆に言えばCMSにとってはマウスでひっぱっても画像サイズを変更できないものもあります。同じCMSでもバージョンやプラグインの有無により異なります。「あのホームページではできたのに、こっちのホームページではできないぞ?」というときは要チェックです。【解決方法】CMSによるこれはCMSによるため明確な解決方法を挙げるのは難しいです。バージョンアップで画像拡縮機能が付くものもあればプラグインで入れるものもあるかもしれません。機能はすでにあり、方法が違うかもしれません。【原因7】スペルミス、記載ミスCSSやhtml初心者にありがちなのがスペルミスや記載ミスです。下記を確認してミスがないか探してください。Serviceの使い方】ホームページが崩れたけど原因がわからないと直しようがないですよね。原因の切り分けと特定が重要です。ホームページが崩れたときはhtmlかCSSあるいはjavascriptなど原因が考えられます。全部一気に確認はできないのでまずここではhtmlに問題がないか確認・原因特定する方法を説明します。この記事を読む↓CSSで間違えやすいポイント解説CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読む↓CSSで間違っている箇所の確認方法CSSが効かないときの原因特定方法【DevToolsの使い方】CSSの一部が効かない!何が悪いのかわからない!という方へCSSが効かないの原因特定方法を説明します。この記事を読む↓calcを使っている場合は下記もチェックしてください。CSSでのcalcが効かない7つの原因と修正方法cssで使うcalcが効かない原因と修正方法を7種お伝えします。先に言うとcalcは半角スペースのありなしがシビアです。この記事を読む【まとめ】画像のサイズが変わらない原因html属性widthにemなど効かない単位を含めている→CSSで指定するCSSのwidthに単位の指定がない→pxなどの単位をつけるhtml属性よりCSSが優先されるから→CSSのwidthを調整するCSSよりstyle属性が優先されるから→style属性を削除するか!importantを指定するmin-widthまたはmax-widthが指定されているから→max-width、min-widthを直すか上書きCMSによる仕様だから→CMSごとに要調査スペルミス、記載ミス→要チェック以上、CSSやhtmlでimgのwidthが効かない・画像のサイズが変わらない原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。