ブログ・サイトでスマホで見た時、はみ出す：左右にグラグラ横揺れする：見切れる：横スクロールしてしまう時、追加すると良いスタイルを紹介します。
それでも反映しないとき、何をするべきか。その対処法もまとめてるので、状況に応じてチェックしてくださいね。
YouTubeが見切れる・ブログカードがはみ出て横揺れしてグラグラする時のCSS
iframe {
max-width: 100%;
}
- それでもダメな場合、以下目次2.2『YouTubeが見切れてスマホから はみ出す時のCSS』を。
- 原因については以下リンク先、目次2.4『ブログカードがはみ出て横揺れしてグラグラする時のCSS』をどうぞ。
LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
WordPressの画像がスマホで見切れ横揺れする時のスタイル
img {
max-width: 100%;
height: auto;
}
WordPressでキャプションをつけた画像がはみ出す時のスタイル
div {
max-width: 100%;
}
原因については以下リンク先、目次2.3『WordPressで画像が見切れ、横揺れするときの対処法』をどうぞ。
LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
table「表」がはみ出してグラグラ横揺れする時の対処法
table {
width: 100%;
}
原因は以下リンク先、目次2.6『table「表」がはみ出してグラグラ横揺れする時の対処法』を。
LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
どのタグを使ったら良いのか不明なとき
div, iframe, img {
max-width: 100%;
}
img {
height: auto;
}
table {
width: 100%;
}
まだスマホでグラグラはみ出す・横揺れする・見切れる場合はCSS最強!importantを付ける
div, iframe, img {
max-width: 100% !important;
}
img {
height: auto !important;
}
table {
width: 100% !important;
}
ボーダーや内側の余白が入ってる場合
例えば画像にpadding（内側余白）・border（ボーダー）を入れている場合は、box-sizing: border-box;を指定すればボーダーやpaddingの分を含めて横幅を計算してくれます。
LINK何で画像の枠がはみ出すの！？max-width:100%だけではダメ！そんなときの解決法
img {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
画像が横揺れしている場合は上記で解決します。
CSSの書いてる場所が違ってるときの解決方法
style.cssでもどこ場所に書いたら反映するか不明なときは、style.cssの一番したにでも以下メディアクエリでCSSのスタイルを囲ってください。
PCビューなどに反映
@media screen and (min-width : 768px){
/*ここに横幅768px以上で反映するstyle*/
}
スマホ・タブレットサイズの横幅に反映
@media screen and (max-width : 767px){
/*ここは横幅最大767pxまでで反映するスタイル*/
}
主にスマホビューサイズの横幅で反映
@media screen and (max-width : 500px){
/*ここは横幅最大500pxまでで反映するスタイル*/
}
メディアクエリについては以下をどうぞ。
LINKレスポンシブ対応！メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト！？
反映しない場合、キャッシュを削除
プライベートウィンドー・シークレットウィンドーからアクセスするか、ブラウザのキャッシュを削除、1度も使った事がないブラウザ（例えばopera・ドルフィン）からアクセスしてください。
WordPressでキャッシュ系プラグインを使っている場合は、プラグインの設定からスマホのキャッシュをクリアに、サーバーのキャッシュ機能を有効化している場合は、一旦停止またはキャッシュのクリアを行うなど。
まだ反映しないときのチェック項目
- スマホビューのみ反映するスタイルを書く場所が不明な場合
上述メディアクエリをチェックするか、以下を確認してください。
LINKレスポンシブ対応！メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト！？
- CSSの優先順位が原因の可能性
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
- CSSのコメントの中にstyleを書いてないか
LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと
まだ駄目なときは、はみ出している親要素を調べてみるのも手です。
LINK[CSS]スマホでみると画像・文字が親要素から、はみ出す原因を調べる方法
- WordPressプラグインや子テーマで指定したスタイルが原因の可能性・親テーマのバージョンなどをチェックするなど。
以下リンク先・目次2章に詳細を書いてます。
LINKSimplicityスマホで、画像img・iframe・表tableが見切れて横揺れ・はみ出す時、CSSで対処
上記を試すとグラグラ横揺れする原因の場所が特定できます。
どうしても原因が不明なとき
場所の特定できても改善方法がどうしても不明なときのみ、該当箇所のURLと詳細な場所をご記入の上、コメント欄よりコメントください。
詳細が不明な場合はご返信いたしかねます。あしからず❦
それでは、かうたっくでした。
Comments