画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

ウェブサイトのモバイル表示で画像サイズが端末画面より大きすぎて画面からはみ出したり、デスクトップ・モバイルに限らずグリッドレイアウトのボックス等から画像がはみ出したり、ウェブページのレイアウトが崩れる場合があります。

たとえ、レスポンシブデザインやモバイル専用ページ等でスマートフォン・モバイル端末の表示に対応していても、画像サイズが適正値をオーバーするだけで起こってしまう問題です。この問題に対する対処法を考えて、以下の CSS を使う方法に落ち着きました。

— 環境 —
Google Chrome Version 52.0
Firefox 48.0
iPhone(iOS9.3) Safari

スポンサーリンク

width: 100% と max-width: ***px を指定する

width: 100%; と max-width: ***px のCSSプロパティを指定することで、望み通りに画像を適正サイズで表示できるようになりました。まずは Ruby on Rails での例です。

assets のスタイルシートで width: 100% のクラス・セレクタを定義する。

app/assets/stylesheets/common.css.scss

続いてビューで image_tag ヘルパーを使って、width-100-percent のクラス指定とインラインCSSで max-width を指定する。max-width は動的なサイズで指定する要件だったので、インライン CSS で指定しました。

app/views/users/show.html.erb

width-100-percent のセレクタを定義せずに、width: 100% をインライン CSS の style 属性で指定する場合。

app/views/users/show.html.erb

自分の意見としては、汎用的な CSS はインラインじゃなくてセレクタ定義しておいたほうが良いと思いますけど。

Rails じゃない場合は以下。

css

html

width: 100% をインライン CSS で指定する場合。

html

これで上手く目論見通りに、グリッドレイアウトやモバイル画面から画像がはみ出さずに、適切なサイズで表示できるようになりました。この原理は…

max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。

と mozilla の説明があります。つまり、例えば width: 100%; max-width: 600px と指定すると、width(画像の幅)は常に 100% で表示する、ただし width が 600px を超える場合は 600px の幅で表示する、という命令になります。下記ページも参考になる。

CSS width 100% OR max-width in pixels – Stack Overflow
[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか | コリス

max-width: 100% だけだとグリッドレイアウトからはみ出る

モバイル端末で画面ウィンドウ幅から画像がはみ出るのを防ぐだけの目的であれば、以下のように max-width プロパティに 100% と指定するだけでも大丈夫でした。検索すると、こちらの方法を紹介してあるページが多数見つかります。

ただし、max-width: 100% の指定だけだとグリッドレイアウト等に対応できません。Twitter Bootstra を用いてグリッドレイアウトで Rails のビューを作成していたのですが、以下のように書きますと…

画像のサイズがグリッドの幅(col-md-3)を超える場合に、画像がはみ出てしまいます。

この場合はやはり、次のように width: 100%; max-width: ***px を指定する必要がある。

app/assets/stylesheets/common.css.scss

app/views/users/show.html.erb

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!