【最新版】img要素に対するCSSの指定方法｜コピペでできます！

【最新版】img要素に対するCSSの指定方法｜コピペでできます！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

コーディングでimgの指定をしているのにうまく画像の大きさが調整できないよ〜😭

ほしちゃん！
imgに対してwidthを指定してしまうと画像のタテヨコ比が崩れて表示がおかしくなってしまうんだ！！

どうしたらいいの〜〜😭
くりくん教えて〜😭

ほしちゃん任せて💪
この記事を読めば、今後imgに対するCSSの指定方法で悩むことは一切なく、コーディングがすらすらできるようになるからね♩

いつもコーディングをしながら、「imgの大きさの指定の仕方がわからない」と悩んでいませんか？

実は、この記事で紹介する「img要素に対するCSSの指定方法」を実践すると誰でも簡単に自分の指定したい大きさに画像を指定することができます。

なぜなら、コーディングする際に頻出の「img要素に対するCSSの指定方法」をわかりやすく解説をしているからです。

この記事では、4つのコンテンツに分けてimgの使い方をご紹介します。

記事を読み終えると、今後img要素に対するCSSの指定方法で悩むことは、一切なく、コーディングがすらすらできるようになります。

結論：「imgの大きさの指定の仕方がわからない」方が覚えておくべきことはこの4つです。

  • ①img要素に対してはmax-width:100%;とvertical-align:bottom;を指定すること
  • ②img要素をブロックで囲む(li,p,figure,divなど)
  • ③imgの親ブロックに対してCSSを指定する
  • ④CSSで画像を切り抜きをする(object-fit)

なぜなら、この4つを押さえておけば、ほとんどのサイトのコーディング(レスポンシブまで)ができるからです。

実際に、ランダムに10サイトほど抽出して確認したところ、上記の4つを理解できていればコーディングできるものばかりでした。
それでは、１つずつ解説していきます。

img要素に対して必ずつけるべきCSS

　大前提として、imgにwidth:300px;などと指定してしまうと画像の縦横比が変わってしまう可能性があるので、やらないようにしてください。

　コーディングする際に、imgには下記を指定しておくようにしましょう。

 max-width:100%;  vertical-align:bottom;

　max-width:100%;と指定することでimgが親要素の中で常に最大100%の大きさにできます。さらには、vertical-align:bottom;を指定することで、画像の下に小さな余白ができるのを防ぐことができます。

See the Pen MWYwxZa by クリ★スタ (@cresta_design) on CodePen.

　max-width:100%;を指定しないと、imgのサイズ調整がしづらくなってしまうので、指定するようにしましょう。

max-width:100%;をしていしないと親要素でサイズ調整ができない

img要素をブロックで囲む(li,p,figure,divなど)

　imgにwidth:300px;などと指定をすると、縦横比が変わってしまう可能性があることを先ほど記述しました。では、どのようにサイズを調整するかというと、imgをブロック要素で囲んでその親要素に対してサイズを指定していきます。

imgはmax-width:100%に指定して、親要素で幅を指定する

　上の動画のように、親要素に対して幅を指定することで、imgの縦横比を変えずに大きさを調整することができました。デザインカンプで指定されている画像の大きさに指定する際は、上記の方法で指定をしてください。

CSSでトリミングをする(object-fit)

レスポンシブコーディングをしているとPCの画像の縦横比とiPadやSPの時の画像の縦横比を変えたくなることがあります。その際に使用すべきなのがobject-fitです。

　例えば下記のような場合です。

画像の縦横比が画面によって変わる場合

　上記のような場合の時に、使用できるobject-fitですが、使い方は簡単です。

  • ①imgに対してwidthやheightを指定する。
  • ②imgに対してobject-fit：coverを指定する。
CSSを使用した画像のトリミング

　object-fitをうまく使用することで、簡単にレスポンシブコーディングもできるようになるのでぜひ使用してみてください。

　こちらの記事では、object-fitについてより詳しく紹介しています。
CSSで画像をトリミングできるobject-fitの使い方を徹底解説！

まとめ

この記事で紹介したことを実践するだけで、画像のサイズ調整で困ることは一切無くなります。しっかりと実践してコーディング力を身につけていきましょう！

　クリスタでは、デザインやコーディング初学者の方にどこよりもわかりやすく学習方法やノウハウを発信しています。毎日有益な情報を更新していきますのでぜひフォローお願いします！PENGIN LLC. | Web制作会社

　また、この記事がいいと思ってくださった方は、SNSでのシェアをお願いします！

質問をTwitterから募集します！

無料でwebデザインに関する質問にお答えします。

クリ★スタは未経験からwebデザイナーを目指す方を応援しています！そのため、学習していく中での些細な疑問に記事で回答していきます。

お気軽にご連絡ください。→PENGIN LLC. | Web制作会社

Youtubeでは動画学習コンテンツを配信しています！

　動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

　ぜひチャンネル登録お願いします🙇‍♂️→PLAY JOB Youtubeチャンネル