既存サイトのWordPress化WordPressのカスタマイズWordPressの不具合修正WordPressの常時SSL化ブログWordPressWEB制作ライティングソーシャルメディア未分類お問い合わせHOMEWEB制作レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめ記事公開:2017/07/21最終更新:2019/03/06WEB制作レスポンシブレスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめfacebookTwittepocketはてなFeedlyRSSrankingレスポンシブサイトで要素が画面に収まらない主な原因4つと解決策をまとめてみました。レスポンシブサイトの制作時には頭を悩ませる問題かと思います。悩まれている方、このコンテンツで頭痛の種を取り除いてください。WordPressのカスタマイズはお任せください。WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。詳しくはこちらをクリックスマホサイトで要素が画面に収まらない問題レスポンシブサイトを構築していると、スマホサイトで要素が画面に収まらないという問題に一度や二度はぶつかるものです。私も、制作の過程で必ず1回はスマホの画面に要素が収まらず、横スクロールが表示されてしまい、毎回閉口していました。以前は、どこが原因で要素が画面に収まらないのかすぐに分からず、問題を解決するまでに長い時間を費やしたものです。そんな経験を何度もしているうち、今ではすぐに原因の箇所を突き止め、修正できる様になりました。今回は、スマホサイトで要素が画面に収まらない主な原因と解決策をまとめてみました。以下の内容を読めば、きっとあなたのサイトも要素が画面に収まるようになります!原因1:要素の幅がデバイスの幅を超えている解決策:スマホ表示の場合、要素の幅をpxではなく%で指定するようにする。要素の幅がデバイスの幅を超える値になっている時、当然ですが要素は画面内に収まりません。デバイスの横幅が【480px】、要素の横幅が【500px】であれば、オーバーしている【20px】だけ要素が画面からはみ出してしまいます。要素が画面に収まらなくなるわけです。この解決策は、要素の横幅がデバイスの横幅を超えないようにすること。具体的には、横幅の値を【px】で指定するのではなく【%】で指定してやることです。してやれば、要素の横幅がデバイスの横幅を超えることはありません。border-box;】を加えてやる。要素の横幅を【width:100%】と指定している場合で、その要素にmargin、padding、border(要素の横に対して)が設定されていると、その数値の分だけ画面からはみ出してしまいます。margin-rightが10px、padding-rightが10px、border-rightが10pxだとした場合、3つの合計である30pxだけ画面から要素がはみ出すことになります。【width:100%】と指定した場合でも、margin、padding、borderの値は【width:100%】に含まれませんので、要素が画面に収まらなくなるわけです。border-box;】を加えてやることです。これを加えることで、margin、padding、borderの値を含めて【width:100%】にすることができます。原因3:画像のサイズがデバイスの横幅を超えている解決策:画像タグに対してmax-widthを100%で指定してやる。【原因1:要素の幅がデバイスの幅を超えている】と同じですね。画像の横幅がデバイスの横幅を超えていると、その超えている分だけ画面からはみ出します。この解決策は、PCとスマホで画像を切り替える、画像タグに対してwidthを100%で指定してやる、などいくつかの解決策が考えられますが、今回は【画像タグに対してmax-widthを100%で指定してやる】をお勧めいたします。スマホ表示の画像タグに対して以下の様なCSSを設定してやります。}このCSSを設定してやると、画像がデバイスの横幅より大きい場合、デバイスの横幅に合わせて縮小されます。画像がデバイスの横幅より小さい場合は、元のサイズで表示されます。してやれば、画像のサイズが原因で【素が画面に収まらない】を回避することができます。原因4:英文字やURLが改行されていない解決策:要素のCSSに【word-wrap:break-word】を加えてやる。ページ内に長い英文字やURLなどを記載していると、それらが改行されず、画面外にはみ出している場合があります。これが原因で、要素が画面に収まらないのです。解決策としては、改行されていない英文字やURLの要素に対して、CSSで【word-wrap:break-word】を設定してやりましょう。これを設定する事で、長い英文字やURLが画面に収まるように改行されます。まとめスマホサイトで要素が画面に収まらない主な原因4つと解決策をまとめてみました。レスポンシブサイトの制作などで、頭を悩ませる問題かと思います。今回紹介した原因と解決策を知るだけでも、問題解決に役立つかと思います。facebookTwittepocketはてなFeedlyRSSrankingあなたのWEBサイトをWordpressで管理できるようにしませんか?あなたのWEBサイトを見た目そのままでWordpress化いたします。以下に興味のある方は、お気軽にご相談下さい。あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。Wordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。興味のある方は、以下のリンクからチェックしてみてください。kondo岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。Wordpress関連の記事でお役に立てれば幸いです。【関連記事】あなたが興味のありそうな関連記事をご紹介します。2019/09/15【レスポンシブ】デバイスの横幅を基準に読み込むJavascriptを切り替える方法デバイスの横幅を基準に読み込むJavascriptを切り替える方法をご紹介しています。レスポンシブデザインのサイトなどで利用する機会があるカスタマイズです。簡単にできますので、このコンテンツでやり方をマスターしてください。記事を読む2019/03/06【レスポンシブデザイン】不要な要素をCSSだけで非表示にする方法レスポンシブデザインなどで、この要素はPCでは表示させたいが、スマホでは非表示にしたいといったケースがあるかと思います。特定の要素をCSSだけで消す方法をご紹介します。記事を読む2019/09/15CSSだけで長い文字列を「...」と省略表示する方法CSSだけで長い文字列を省略表示する方法をご紹介します。文字列が要素からはみ出す場合、末尾に「...」を付けて省略表示させる方法です。興味のある方は、3分間でカスタマイズ方法をマスターしてください。記事を読む2019/07/28【たった1分】ドメインから使っているサーバーを調べる方法ドメインからサイトが設置されているサーバーを調べる方法をご紹介しています。専門的な知識は必要ありません。コンテンツの中で紹介しているWEBサービスを利用(無料)すれば、どなたでもドメインからサーバー会社を調べることができます。記事を読む2019/09/15レスポンシブデザインでテーブルを横スクロールさせる方法スマホ表示でテーブルを最適化するとき、扱いづらいテーブルが出てくるかと思います。そんなテーブルを横スクロールさせることで、簡単に最適化する方法をご紹介しています。横スクロールできることを伝えるテクニック付きです。上に表示された文字を入力してください。kondoWordPress専門のフリーランサーです。WordPressを使ったホームページ制作とカスタマイズをメインに、岡山県を中心に10年ほど活動しています。このサイトではこれまでの経験を生かし、WordPressに関連したコンテンツを中心に配信しています。あなたのお役に立てるコンテンツを見つけてください。詳しいプロフィールはコチラサービス一覧(人気順)WPカスタマイザーWordPressのカスタマイズを代行するサービスです。WPクリエイターWordPressを使ってオリジナルサイトを0から作成するサービスです。既存のWEBサイトをWordPressで再構築するサービスです。WPレスキューWordPressのエラーや不具合を解決するサービスです。WP-SSLWordPressで構築されたサイトを常時SSL化するサービスです。【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法893pvレスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法レスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法733pvWordpressの改行と段落が消える原因と解決方法Wordpressの改行と段落が消える原因と解決方法617pvWordPressに新着記事の一覧を表示する方法。get_postsで簡単!WordPressに新着記事の一覧を表示する方法。