2016/02/17

CSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

レスポンシブ対応してるブログを運営してるのに、スマホで見ると「左右にスクロールされて動く」「グラグラ横揺れ」を起こして画面からはみ出してませんか?

YouTubeの動画、アップした画像、ブログカードやtable表が見切れてたり、自動生成された幅の指定が原因で枠からはみ出してしまいます。。スマホでグラグラ横揺れを起こしてるとき、どうしたら良いのかをあげました。

うまくいかない場合は、最後のほうを見てください。※文字が親要素から『はみ出る』なら、下記をどうぞ。

LINK文字がはみ出してグラグラするときの解決方法word-wrap: break-word;でも無理なときword-breakをチェック!

スポンサーリンク

レスポンシブデザインのスマホで、グラグラ横揺れして、はみ出すのは…

レスポンシブだから、左右の幅が何でも自動的にスルスル収まるのに、何故かスマホ画面から飛び出して見切れる。はみ出して横揺れしている。など経験した人も多いのではないでしょうか。

よくグラグラを見かたり、実際体験したものは下記。

  • 画像
  • YouTube
  • ブログカード(FB)
  • テーブル
  • 他・・・

どうしてそんな事が起きるのでしょう…。

左右にスクロール!スマホがグラグラ横揺れを起こす原因

HTMLなどに幅:width: 500px;など指定されてる場合。パソコンでは収まってるのに500px以下の幅が狭いスマホは、コンテンツから はみ出して「グラグラ左右にスクロールする横揺れ」を起こします。

指定した幅500pxより、幅が狭いのが原因です。はみ出してる場面を見てると、WordPressキャプションなど、自動的にdivで囲われ『画像サイズを指定されたもの』が大半でした。

どうすれば解決できるか。原因になる『HTMLタグ内の画像』など(セレクタを指定して)CSSで『レスポンシブ対応』にすれば、コンテンツ内に収まります。

はみ出し横揺れの対処、解決法!CSSで幅を指定!

見切れた画像やFB・YouTubeは、サイズ指定されてるから左右にスクロールしたり、はみ出します。divで囲って幅がはみ出さないよう、CSSで指定してあげるのが楽な方法かも知れません。

親要素であるdivの幅が500pxに指定されてるなら、CSSで横幅の最大値が100%になるように指定する方法です。具体的に何をすれば良いのか、見てみましょう♪

親要素、子要素って何!?ブログ構造HTMLで解説してるページをサクッとみれば、親要素の意味が分かりますよ。

見切れてはみ出すときのCSS!max-width: 100%;

HTMLで指定した幅や高さheightが、スマホよりも大きいのが横揺れの原因なら、横幅の最大値を100%にすればOK!

横幅600pxの指定があっても、max-width: 100%;だとスマホの横幅320pxでも、はみ出しません。

CSSのプロパティであるmax-widthは最大幅って事なので、幅が320でしたら最大「100%の320px」。400でしたら、最大400に収めるねって意味になります。

CSSの基本『プロパティ: 値』について

  • max-width: 100%;
  • プロパティmax-width: 値100%;

プロパティ「max-width」の「%」以外の値

none
最大値の制限をしません。これが初期値です。
数値で指定
数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
%で指定
%値で指定します。

http://www.htmq.com/style/max-width.shtml

YouTubeが見切れてスマホから はみ出す時のCSS

PCではキレイに表示されるのに、スマホで横揺れをおこしグラグラ。または左右にスクロールされ残念なとき。HTMLを見たらYouTubeは、幅の指定をしてるのでスマホから はみ出します。

レスポンシブデザインだと、CSSに以下を足したらスコーンっとハマってくれます。

YouTubeがスマホからはみ出したものとCSS追記してコンテンツ内にハマッた画像

  1. iframeの最大幅を100%にして各スマホの幅にあわせる。

これで解決しなければ、次の方法。

  1. YouTubeのコードを、divで囲み、CSSを追記。

<div class=”HTMLタグの名前“>YouTubeコード</div>

WordPressのテキスト画面(HTML)にクラス属性:例えばvideo-containerを付けたdivで「YouTubeコード」を囲み、CSSでレスポンシブ対応にします。

コードはアドクイックタグに登録しておけば、コードを忘れる事がないので便利です。

動画が少なければ手動で囲ってしまえば良いですねっ。

参考見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル:より目次8:動画をレスポンシブにさせる方法|Gush2説明書

Gushでしたら、クラス名がvideo-containerで統一されてますので、下記CSSでレスポンシブになります。 byElloraさん

CSSの解説は、動画サイトのドットインストールが分かりやすいです。

LINKiframeを埋め込もう (2)|ドットインストール

  1. テーマに新たにHTMLタグを付け、CSSを追記する。

YouTubeを各ページ大量に扱ってるなら、iframeにdivを一括で付けるコードをfunctions.phpに書き込めば楽ですっ。

もし同じ記載がテーマにあるのに気づかずfunctions.phpにコピペすると、競合してブログが真っ白になります。必ずバックアップをとってからカスタマイズしてください。寝ログさんのページが分かりやすいですよ。

参考YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法|寝ログ

WordPressで画像が見切れ、横揺れするときの対処法

画像にキャプションを入れると、上述通りdivで囲まれて幅が指定するので、スマホで左右にスクロールしたり、はみ出します。

画面を右クリックして「検証、要素を(の)検査」で見ると、imgタグとキャプションのテキストがdivで囲われてるが解かります。

要素の検証で見るとdivにimgとキャップションが囲まれてる

上の要素の検証で見た、divの塊から大まかところを抜き取ったものが下記画像。

divのstyle、imgの高さと幅、キャプションを切り抜いたもの

divのstyleとimgの高さと幅とキャプションをだけ切り抜いたもの

「div」にstyle="width: 610px"と直接横幅が指定され、320pxのスマホで見ても、幅610pxで表示する原因で、見切れます。

これで、横幅がスマホに収まったけど、様子がおかしい…。画像が『縦に延びた』!

はみ出した画像にmax-width 100%;だけいれると縦のびを起こす

divの中にある、画像の「高さheightが400px」で指定されてたまま、横幅だけが狭くなったからです。

下記画像のように横幅600pxが、320pxになったのに、高さheightは400のままで、何の指定もしてないのが原因でした。

divに囲まれたimgの幅は調整したけど、高さも指定されてるかた調整が必要

max-width: 100%;で画像が縦長になったときのCSS

max-width: 100%;だけなら画像が縦長でバランス悪くなったから、同時に高さを自動調節するCSSをつけましょう!

height: auto;を一緒に付ければ問題ありません!※値auto、100%でも成功。

画像の親要素divの style属性で、指定されているのが原因なので、style.css に以下を記述。

すると縦に伸びず、幅と高さの調節ができてスマホでもキレイに収まりました。

スマホからはみ出た画像にCSS、max-width 100%;を入れたら縦に伸びた画像がキレイに表示された

ブログカードがはみ出て横揺れしてグラグラする時のCSS

ブログカードもYouTubeと同じiframeにスマホサイズより大きな横幅の指定が入っているので、グラグラ横揺れをおこします。これも同様ですね。

WordPressのバージョンが4,4にアップグレードしたら、ご自身のブログをスマホで確認してください!iframe {max-width: 100%;}を書き足すだけでYouTubeとブログカードが一気に収まる方が沢山います。

FBもifameでいける場合もあります。それが全てではないですが・・。

どのタグ使ったら良いのか解らないなら、どれもレスポンシブにすれば良い。

レスポンシブデザインのテーマなら書いてるかも知れないCSSのコード。2重になっても、とりあえずはみ出さないようにしようって事なら、div、iframe、imgタグにmax-width: 100%;を入れてればOKです。

どうしても効いてくれない時は、!importantで強制的に効かすのも手です。それでもダメなら、プラグインの何かしらの設定だか他の要因が絡んでるんでしょうねっ。

!importantの使い方は下記です。

LINK初心者のCSSが反映されない理由!優先順位の詳細度

table「表」がグラグラ横揺れする時の対処法

表を入れたけど、サイズが収まらずスマホからはみ出て左右にスクロールしてまう時にもwidth: 100%;が使えます。

レスポンシブデザインのブログでも、『テーブルに幅の指定』が入ったらグラグラ。

管理画面で表の四隅をドラックしたとき、自動でスタイルに幅や高さが指定されます。画像にキャプションを入れた時と同じですね。

確認するには、投稿一覧のテキスト画面(ビジュアル画面ではない方)のHTMLを見てみると解ります。幅を削除して<table>のみにするのも有効ですが、幅を100%に指定すれば、横揺れを改善できます。

元々幅の指定がある『お店の情報の表』など、コピーしたものをスマホで見ると、はみ出します。HTMLで指定されてる幅もコピーしてることに気付かず貼りつけた結果、スマホで横揺れを起こたんでしょうね。

要素の検証で見てみるとtableに、widthの指定が数字で指定された状態です。

520の幅widthをはみ出さない為に100%にしてあげましょうっ♪って事でCSSを追記します。

tableがスマホからはみ出した画像と収まったもの

これでtableに幅の指定があっても、収まりますね。

width: 100%;でもまだ横揺れ!ボーダーや内側の余白が入ってるのでは?

画像などのに枠を付けていませんか?線borderやその内側の余白paddingを入れてる場合は、100%を超えてしまいます。その場合は、別のCSSのプロパティを指定すれば、スポッと収まるので、下記のリンクをご覧ください。

LINK何で画像の枠がはみ出すの!?max-width:100%だけではダメ!そんなときの解決法

HTMLタグのクラス名に合わせ、セレクタを指定し、スマホ対応サイズに収める

divやtableのセレクタを入れたのに、反映しない。。って時は、クラス属性で指定された、名前を指定すれば反映します。

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

tableに、クラス名のhogeが入ってますよね。

htmlを見るとクラス名hogeが入ってる

確認してみれば、htmlタグ(divや)tableにclass="○○"と言う指定が入ってます。この.○○を指定してCSSを書いたらOK!CSSのクラス名の書き方の例は下記のとおり。

これはclassセレクタ:HTMLタグ内が属性名がクラス、属性値がセレクタです。

HTMLで指定されたクラス名を指定してCSSに書いたら、スコーーンっと収まります。

それでも無理なら、コンテンツ文章部分を囲む親要素を指定するなど試したいところです。

LINK親要素の指定方法!ブログ初心者にCSSのセレクタ簡単な付け方を説明

ちなみに、HTMLタグ内にstyle属性で指定してるページをコピペしたら、横揺れを起こすので注意してくださいw

LINKCSSが反映されないとき優先順位の詳細度

まだCSSが反映されない原因!書いてる場所が違ってるときの解決方法。

スマホ、タブレット用の記載場所がテーマによってかわってきます。PC用のCSSにコードを貼り付けてるのではないでしょうか。書く位置を変えてみてるか、別のコード@media screen and (max-width : 767px)を入れて下さい。

反映されない理由は「PC用」の場所にCSSに追記してるはずです。

  • スマホ専用のCSSがないかチェックする。
  • CSSの上のほうがスマホが反映するゾーン。
  • 逆にCSSの下のほうがスマホが反映する箇所。

スマホの幅に合わせたいけど、PC用のCSSの場所に書いても反映しません。でも、初心者なので意味が解らないってアルアルです。

そのときは、CSSの一番下にコードを入れてCSSを追記すれば反映してくれますよっ。

例として実際入れてみると、下記テーブルのコードを入れてみますねっ。

これで反映するはずです。できたら最後にバックアップをとっておきましょう!エラーが起きたら、カスタマイズしたものが消えてしまいます。エラーからの復元用に最新のブログのバックアップの準備しておきたいですからね。

※max-widthを768pxにしてましたけど、767pxに変更しました。ipadの端末のサイズを意識した結果です。細かいことですけど、一応^^

@media screen and (max-width : 767px)について

メディアクエリといって、レスポンシブ対応で画面の幅応じたデザインを指定するときに使えます。min-widthの指定もあるので、詳しくは下記をご覧くださいね^^

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

まだ反映しない場合は、コメントアウトの中に書いてないか、なども考えられます。こちらを参考にしてくださいね。

LINKCSSで書いたコードが突然反映しなくなった原因は、サーバー側のキャッシュ・ほか思い当たること

さいごに

万人に効いたら良いけど、テーマによってHTMLタグも違えば元々書いてるCSSやPHPも違ってきますよねっ。レスポンシブ対応されてるテーマが前提ですけど『大半は』上記でスッポリ納まります。

基本CSSのセレクタ!ブログ構造HTMLからみる親子孫要素の関係と、CSSの入門要素の検証でカスタマイズをしていけば色々分かりやすく、CSSも覚えやすいのでおススメです。あとは、CSSの優先順位を考慮してればOKかもしれません。

実際に、要素の検証でカスタマイズを実践してるので、見たほうが分かりやすいかも。

LINK超時短!!ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

ちなみに、色んなブログの横揺れが気になって仕方なかったとき、初心者向けのサロンエローラさんにCSSを教えてもらいました。

要素の検証を使って色んなページで試してスッポリ収まったので、サブページで環境を作り出して実験した結果です。カナリ面倒だけど実際やってみると、CSSが少しずつ分かるので、おススメですよっ♪

それでは。かうたっくでしたっ!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー