PCでもスマホでもちょうどいい！画像サイズ調整に便利な「max-width」テクニック
2025年7月24日
画像サイズ、こんなお悩みありませんか？
PAGEKitで画像を挿入すると、自動的に「幅100%」で表示されます。これにより、スマホでも画像が画面幅にピッタリ収まり、非常に見やすくなっています。
一方で、PC画面では本文の最大幅（たとえば1200px）が適用されるため、画像が実際のサイズ以上に大きく引き伸ばされて見えてしまうことがあります。
ちょっと画像が大きすぎる。。
これを解消しようと「画像サイズを固定（例：幅600px）」にしたり、幅50%などに設定すると、今度はスマホで画面からはみ出したり、小さく表示されてしまうといった問題が起こります。
はみ出したり、小さすぎたり。。
その解決策が「max-width」！
CSSの max-width プロパティを使えば、「これ以上大きくならないようにする」設定が可能です。たとえば width: 100%; max-width: 300px; と指定することで、「幅は100%」「ただし、最大300pxまで」といったレスポンシブな動きが実現できます。
実践！PAGEKitでmax-widthを使う手順
1．画像を挿入する
通常通り、編集画面で画像を挿入します。横幅いっぱいに表示される状態でもOKです。
2．画像を選択し、「HTML部分編集」をクリック
画像を選択状態にして、「HTML部分編集」機能を使いましょう。画像の![]()
htmlタグが表示されます。
3．style属性にmax-widthとwidthを追加する
HTML部分編集の画面で、下記のように追記します。
< img style="width: 100%; max-width: 300px;" src="sample.jpg" />
このように記述することで、画面幅が300px以上あるタブレットやパソコンでは最大300px、それ以下のスマホでは100%で縮小表示されるようになります。
適度なサイズになりました！
スマホサイズでは小さくなりすぎず、見やすさをキープできます。
見た目を整えるポイント
中央寄せにしたい場合は？
画像が中央に表示されるようにしたい場合は、margin: 0 auto; display: block; も追加しましょう。
< img style="width: 100%; max-width: 300px; margin: 0 auto; display: block;" src="sample.jpg" />
画像の周囲に余白を入れたいとき
上下の余白を調整するには margin-top, margin-bottom なども活用できます。
おわりに
画像をただ挿入するだけでは、デバイスによって見え方に差が出てしまいます。
max-width を使った調整はとても簡単で、ユーザーの閲覧環境を問わず美しく見せることができます。
PCでもスマホでも快適に見える画像レイアウト、ぜひ取り入れてみてください。
ABOUT ME  |
ホームページかんたん作成のPAGEKit（ページキット） ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？ |