記事一覧へ画像を入れたとき、「画像が小さい」「上下左右に白い余白がある」「大きくしたら文字や人物が切れた」ということがあります。
私も最初はCSSだけが原因だと思っていました。しかし実際には、画像ファイル自体にも余白が入っていました。CSSを何度直しても消えない余白があるときは、CSSと画像ファイルを分けて確認することが大切です。
CSSの余白と画像そのものの余白は、別の問題です。
このページで分かること
- なぜカード画像の周りに余白が出るのか
- CSSの余白と画像内余白の違い
- 正方形と横長画像の違い
containとcoverの違い- 文字や人物を切らずに表示する方法
- 画像を作り直した方がよい場合
- PCとスマホで確認する方法
こんな人におすすめ
- カード画像が小さく表示される
- 上下や左右に空白が残る
- 画像を大きくすると文字が切れる
- CSSを直したのに余白が消えない
- 正方形画像を横長カードで使いたい
- どこを直せばよいか分からない
01
カード画像の余白には、大きく4つの原因があります
最初からCSSだけに決めつけず、次の4種類へ分けると原因を探しやすくなります。
CSSの余白
padding、margin、gapなど、HTMLやCSS側で作られた空間です。
画像そのものの余白
PNGやJPGを単体で開いた時点で、周囲に白色や背景色の空間が入っています。
縦横比の違い
正方形の画像を横長カードへ入れるなど、画像と表示枠の形が違う状態です。
表示方法の違い
object-fit: containかcoverかで、余白と画像切れの起こり方が変わります。
CSS側の余白をなくしても、画像ファイルそのものに白い余白が入っていれば残ります。反対に、画像そのものに余白がなくても、CSSでpaddingが設定されていればカードの中に空間ができます。
02
実際につまずいた流れ
今回分かったことは、正方形画像を横長カードへ入れるだけでは、思った見え方にならないということでした。
- 正方形画像を作った
- 横長の記事カードへ入れた
- 画像が小さく見えた
- 上下左右に余白が出た
- CSSを調整した
containでは余白が残ったcoverにすると文字や人物が切れた- さらに画像ファイルを確認した
- 画像ファイル自体にも余白が入っていた
- 最初からカード比率で画像を作り直した
CSSだけが原因だと思っていましたが、実際には画像ファイル自体にも余白が入っていました。
03
カード画像が小さく見えるのはなぜ？
「画像が小さい」という見え方だけでは、原因を一つに決められません。次の項目を上から確認します。
- 画像を囲む場所に
paddingがある imgにmarginがある- カードと画像の縦横比が違う
- 画像表示部分に固定された
heightがある object-fitの指定が目的と合っていない- 画像ファイルそのものに余白がある
初心者向けポイント：まず画像ファイルを単体で開くと、画像の問題かCSSの問題かを早く分けられます。
04
CSSで作られている余白を確認する
padding
箱の内側の余白です。カードの枠と画像の間に空間を作ります。
margin
箱の外側の余白です。画像と前後の要素との間に空間を作ります。
gap
カードや画像同士の間隔です。並べた要素の間を空けます。
paddingは、カードの内側と画像の間に作られる余白です。説明用の簡単な例は次のとおりです。
.card-image {
padding: 0;
margin: 0;
}これは記事内の説明例です。実際のサイトへ一括適用すると、関係のないカードまで変わることがあります。対象のカードと現在のCSSを確認してから使います。
05
CSSを直しても消えないなら画像そのものを確認
- 画像ファイルをパソコンで単体表示します。
- 画像の上下左右と四隅を見ます。
- 白色、クリーム色、背景色などの空間が入っていないか確認します。
画像ファイルを開いた時点ですでに余白がある場合、CSSのpaddingを0にしても、その余白は消えません。
CSS余白
画像の外側に、カード側の空間があります。
画像内余白
PNGやJPGの中に空間が含まれています。
画像ファイルを単体で開いたときにも余白が見えるなら、画像本体をトリミングするか、作り直す必要があります。
06
正方形画像を横長カードへ入れるとどうなる？
比率とは、画像の横と縦のバランスです。形が違う画像とカードを組み合わせると、全部見せるか、枠いっぱいにするかを選ぶ必要があります。
1 : 13 : 216 : 9画像を全部見せる
左右または上下に空いている部分ができます。
枠いっぱいにする
枠からはみ出した画像の一部が切れます。
画像を横へ無理に引き伸ばすと、人物や円が横長に変形します。比率を変えずに表示する方法を選びます。
07
object-fit: containとは？
containは、画像全体を見せる方法です。
.card-image img {
width: 100%;
height: 100%;
object-fit: contain;
}良いところ
- 文字が切れにくい
- 人物が切れにくい
- 画像全体を表示できる
注意点
カードと画像の比率が違う場合、上下または左右に余白が出ることがあります。
containは「全部見せる代わりに、空いている部分ができることがある」方法です。
08
object-fit: coverとは？
coverは、カードの枠いっぱいに画像を広げる方法です。
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}良いところ
- カードいっぱいに表示しやすい
- 枠の中に余白が出にくい
注意点
- 左右が切れる場合がある
- 上下が切れる場合がある
- 文字が切れる場合がある
- 人物の顔や体が切れる場合がある
coverは「枠いっぱいにする代わりに、はみ出した部分を切ることがある」方法です。
09
containとcoverを比較する
| 確認項目 | contain | cover |
|---|---|---|
| 画像全体 | 見えやすい | 一部切れる場合あり |
| 余白 | 出る場合あり | 出にくい |
| 文字入り画像 | 比較的安全 | 切れる可能性あり |
| 写真 | 構図による | 相性がよい場合あり |
| 人物 | 全体を残しやすい | 顔や体が切れる場合あり |
文字入りカード画像はcoverだけで解決しない
画像の中にタイトル、説明文字、番号、人物の顔、重要な図解がある場合、coverだけで無理に枠いっぱいへ表示すると、必要な部分まで切れる可能性があります。
文字や人物を残したいときの安全な方法は、最初からカードの比率に合わせて画像を作り直すことです。
10
CSSではなく画像を作り直した方がよい場合
- 画像そのものに大きな余白がある
- 正方形画像を横長カードへ使っている
coverにすると文字が切れる- 人物の顔や体が切れる
containでは余白が大きすぎる- 画像内の主役が小さい
- 元画像の構図がカードに合っていない
作り直すときのルール
- 使用するカード比率を先に確認する
- 主役を中央寄りに配置する
- 文字や人物を端へ置かない
- 四隅へ重要情報を置かない
- 画像全体に不自然な外周余白を作らない
- 文字を入れる場合は安全範囲を確保する
AI画像生成で横長カード用に作り直す指示例
正方形画像を横へ引き伸ばすのではなく、
人物、パソコン、イラストなどの配置そのものを
横長カード用に組み直してください。
重要な文字や人物は中央寄りに配置してください。
上下左右に不自然な白い余白を作らず、
文字切れ・画像切れのない構成にしてください。
画像生成の操作や修正方法は、ChatGPT Plus画像生成の使い方で詳しく説明しています。
11
安全なCSS例
次のコードは説明用です。既存サイトのカードへ無条件で一括適用せず、対象カードのHTMLと現在のCSSを確認してから使います。
coverを使う例
.card-image {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}containを使う例
.card-image {
width: 100%;
aspect-ratio: 3 / 2;
}
.card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}3:2は説明用の例です。実際のhukugyo.netのカード比率が3:2とは限りません。現在のカード比率を確認せずに変更しないでください。
12
余白が出たときの確認フロー
分からなくなったときは、次の順番を確認地図として使ってください。
画像をトリミング
または作り直す
CSSのpadding・marginを確認
contain／coverを確認13
直したらPCだけで終わらせない
PCではきれいでも、画面幅が変わるとカードの横幅や高さも変わります。次の幅を目安に確認します。
- 画像の上下余白
- 画像の左右余白
- 四隅の空白
- 画像内の文字切れ
- 人物の顔や体の切れ
- 画像の変形
- カードの高さ
- カード同士の高さ
- ページ全体の横スクロール
14
初心者がやりやすい失敗
- CSSだけが原因だと思い込む
画像ファイル自体の余白を先に確認します。
- 正方形画像を横長へ無理に引き伸ばす
人物や図形が変形するため、画像の比率を保ちます。
- とりあえずcoverにする
余白が消えても、文字や人物が切れていないか確認します。
- 文字入り画像を端まで拡大する
重要な文字は中央寄りに置き、安全範囲を残します。
- 元画像を直接上書きする
やり直せるように、元画像を別名で残します。
- 1枚だけ直すつもりで共通CSSを変更する
ほかのカードまで変わるため、対象を限定します。
- PCだけ見てスマホを確認しない
少なくとも768px、390px、320pxでも確認します。
15
画像を直す前に元画像を残す
画像をトリミングしたり、比率を変えたりする前に、元画像を残してください。元へ戻したいときや、別の比率で使いたいときに必要です。
card-image-original.png
card-image-3x2.pngファイル名は日本語や空白を避け、半角英数字とハイフンを基本にすると、HTMLへ書くときやサーバーへ送るときに間違いを減らせます。
同じファイル名で元画像を上書きする前に、使用中の場所と保存先を確認してください。未確認の画像は削除しません。
16
カード画像の最終チェックリスト
画像本体
- □ 画像単体で見ても余白がない
- □ 文字が端へ寄っていない
- □ 人物が切れていない
CSS
- □
padding - □
margin - □
widthとheight - □
object-fit - □
object-position
比率
- □ カードと画像の比率が合っている
- □ 無理に横へ引き伸ばしていない
表示
- □ PC
- □ タブレット
- □ スマホ
- □ 小さいスマホ
- □ 横スクロールがない
Q&A
よくある質問
paddingを0にしたのに余白が消えません
画像ファイルを単体で開き、画像の中に白色や背景色の余白がないか確認します。画像内の余白なら、CSSではなくトリミングや作り直しが必要です。
containとcoverはどちらが正解ですか？
一つの正解はありません。画像全体を見せたいならcontain、多少切れても枠いっぱいに見せたいならcoverが候補です。文字入り画像は作り直す方が安全な場合があります。
画像を横に引き伸ばせば余白は消えますか？
余白は減ることがありますが、人物や図形が横長に変形します。画像の縦横比を保ったまま表示するか、横長用に構図から作り直してください。
1枚だけ直したいときも共通CSSを変更しますか？
共通CSSをそのまま変更すると他のカードも変わることがあります。対象カードだけのクラスを使うなど、影響範囲を限定して確認します。
RELATED
関連記事
この記事では余白の原因と直し方に集中しています。画像生成、表示確認、画像管理、Codexへの指示は、次の記事で詳しく確認できます。
SUMMARY
まとめ｜余白が出たら確認する場所を分ける
このページの目的は、CSS用語をたくさん覚えることではありません。余白が出たときに、どこから確認すればよいかを自分で判断できるようにすることです。
最初に「CSSの余白」と「画像ファイルそのものの余白」を分けると、原因を探しやすくなります。