ブログで画像に線（border）と内側余白（padding）を付けて（写真枠など）装飾したとき、親要素の幅からはみ出して、スマホでグラグラ横揺れを起こしてしまいます。なんで画像の枠が収まらないのか。それは線と、内側の余白が原因だったんです。
解決法はコピペで対解決できますので、CSSに貼り付けて画像をスコーン！っと領域に収めてください。スマホ対応のmax-width:100%や画像のはみ出しの対処法でも反映しない時のCSSを紹介しますね。
レスポンシブデザインで、画像がはみ出す原因と解決法
親要素に指定されてる幅よりも画像の幅が大きいと、はみ出してグラグラ横揺れを起こします。例えばdivの幅が400として、それより画像の幅が狭いと全て表示され、幅が広い場合、見切れて横揺れをおこすんですよね。
- div要素の幅400px＞画像の幅320px＝グラグラしない。
幅400pxより画像の幅が小さいからハマってグラグラしません。
- div要素の幅400px＜画像の幅640px＝グラグラはみ出す
幅400pxより画像の幅が大きいと、はみ出してしまってグラグラしてしまいます。
要素にmax-width: 100%;を使うことでレスポンシブ化して解決
画像は、img {max-width: 100%;}にheight: auto;を入れたものですが、横幅を調整したら、縦長画像になっちゃうのを回避するために高さにautoの値を入れてます。
img {
max-width: 100%;
height: auto;
}
詳しくは下記リンクを参考にしてください。
LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
でもでも！max-width: 100%;を使ったうえで枠を入れた場合、ボーダーと内側の余白ぶんが、はみ出してしまうんです。。次に説明しますね。
画像に枠（線と余白）をいれると、はみ出す理由！
画像の横幅widthに対して100％にしても、枠を入れることでボーダー（線）やパディング（内側の余白）の計算が入ってないから、そのぶんグラグラ横揺れしてはみ出してしまいます。画像のみレスポンシブで枠は対応してない状態ですね。
下記の画像は幅に合わせてmax-width: 100%;が入った状態と、画像に枠を入れたときの様子です。※線と余白は解りやすいように線と余白を太くしてます。
親要素の幅320pxに対して100%になるようにimg{max-width: 100%;}を入れた画像に、枠border（線）とpadding（内側の余白）を入れたぶんが見切れてしまってます。これをハメるために、borderとpaddingを計算に入れてあげれば解決しそうです。
画像の枠、border（線の太さ）とpadding（内側余白の太さ）計算方法を指定するプロパティbox-sizing
CSSのプロパティで、ボックスサイズの計算をしてくれるのがbox-sizingで、親要素内の領域の幅に、borderとpaddingの数値を含めて表示してくれる値が、border-boxになります。難しいですかね。。
簡単に言えば、img {box-sizing: border-box;}を追記すれば、枠分はみだしてしまった画像とborder（線）、padding（内側の余白）を含めて勝手に計算して、はみ出さないで（親要素の領域ない）に綺麗に表示してくれるCSS！こんな感じになります♪
この場合、画像とその左右にあるborder（線）とpadding（内側の余白）を足したものを表示するので、枠ぶんも計算して枠まで綺麗に表示されるんですね。もう1つ画像で比較してみますね。
枠のボーダーまでしっかり表示されてるのが解ります。合わせてグラグラ横揺れのページも参考になりますので、下記画像リンクよりどうぞ♪
box-sizingの3つの値の指定の違い
プロパティbox-sizingには、3つの値があります。それぞれボックスサイズの幅と高さに線borderと内側の余白paddingを含めるかどうかで値が変わってきます。
- content-box
初期値：『線と内側の余白』を含めない - padding-box
『内側の余白』を含める - border-box
上述通り、ボックス内の幅、高さを『線と内側の余白』を含める
このページでは、画像の幅に『線borderと内側の余白padding』を含めたかったので、border-boxの値を使いました。『線borderと内側の余白padding』は色んなところで使うのでbox-sizing: border-box;はチェックですね。
img {
max-width: 100%;
height: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
参考CSS3リファレンス box-sizing …… ボックスサイズの算出方法を指定する｜クイックリファレンス
できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ
まだはみ出す！その考えられる理由は何！？
テーマのCSSを上書きするとき、元に書いてあるCSSの優先順位が高いとき。CSSの書いてある場所の指定が違ってるとき。などは反映しません。
優先順位が原因のとき
例えば子テーマを使っているとします。親テーマのセレクタが元々『.article-inner img』と指定されているのに、セレクタを『img』と指定すれば、優先順位は『.article-inner img』のほうが強いので、反映されません。
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
または、idセレクタを使った『#main img』とclassセレクタを『.article-inner img』では、idのほうが優先順位が高くなります。『#main img』が強い！
CSS（スタイルシート）を開いて、ctrl＋Fキーでimgを検索するか、要素の検証を使って該当のセレクタがどうなってるのか、調べてみても良いかもしれませんねっ。
要素の検証、デベロッパーツール基本的な使い方は下記。
要素の検証で、画像にポイントを当ててCSSをのぞいて見てください。するとセレクタが分かりますので、セレクタを一致させてスタイルシートCSSの一番下にでも書き込んでみてください。
上に書かれたものは、一番下に書いたものと同じセレクタで、同じプロパティ『max-width』なら上書きされますよ。
実際に要素の検証でスタイルを変える手順を見てみたいなら、下記を参考程度に見てみると、分かりやすいかも！？＾＾
CSSの書いてある場所が違ってる場合
使ってるテーマによって、CSSがモバイル専用やパソコン専用などがある場合があります。違う場所に書き込んでないか、確認してください。
また1つのCSSにモバイル用、タブレット用、PC用と書いてある場合。ほかには一番下に追記すると『スマホ用』または『PC用』として反映する、といった場合もあります。
書く場所ですけど、どこに書いたら良いか分からないときでまだ反映しないとき、CSSの一番下に@media screen and (max-width : 768px)を使って書いてください。
『最大の横幅が768px』よりスクリーンの横幅が狭いとき反映させるCSSです。
@media screen and (max-width : 768px) {
/*ここにCSSを書く*/
}
もう一息、具体的にみたいときは下記をみてくださいね。
LINK見出し4：まだCSSが反映されない原因！書いてる場所が違ってるときの解決方法。
これでうまく反映されますように＾＾
まだ反映しない場合は、他に原因があります。
LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと
さいごに
ちいさなカスタマイズって凝ってしまいますよね。私もCrayon Syntax Highlighterのカスタマイズしたは良いけど、バージョンアップで表示が崩れてしまいました・・ｗカスタマイズも程ほどにしないと、ダメですね。。
関係ないけど、Crayon Syntax Highlighter直ったので書いておきますね※今のところ不具合なし。
/*2.8.3から2.8.4へ更新でpre左の数字と右のpreの高さがズレた模様、その対処*/
div[id^="crayon"] .crayon-line {
height: 17px !important;
}
うまく反映したら、教えてくださいね＾＾
それでは、かうたっくでしたっ！
Comments