• 締切済み

CSS スマホで横スクロールバーが出現する

https://jdsasurf.jp/news/ トップページ以外どのページにもスマホで横スクロールが出現します。 トップページは出現しないのですが… body { overflow-x: hidden; } body { box-sizing : border-box; } と記述してもダメでした。 宜しくお願いします。

  • nkmyr
  • お礼率67% (403/600)
  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.2

特定の要素の幅が画面幅を超えています。 下記2点を修正すると横スクロールがなくなると思います。 .header-menu min-widthを980px → 100% .primary-coevo-front .primary-body-right:before widthをcalc(100% + 80px) → 100%

nkmyr
質問者

補足

ありがとうございます。 開発ツールで確認しましたところ、レイアウトは右側がはみ出すような感じになり、横スクロールは相変わらず出ています。

  • ngwaver
  • ベストアンサー率26% (323/1202)
回答No.1

下記のようにしてはいかがでしょうか body { overflow-x: hidden!important; }

nkmyr
質問者

補足

ありがとうございます。 結果は相変わらず横スクロールが出てしまいます。

関連するQ&A

  • 横スクロールバーが消えません

    webにフレームやFlashを導入してリニューアルさせてたのですが、横スクロールがいくつかのページで出てきてしまい困っております。 テーブル幅はどのページも600ピクセル以下に設定しています。mac os XのIE 5.2だと横スクロールバーは1つも出ないのですが、win XPのIE 6.0だと何故か何個か横スクロールが出てきてしまいます。 どこかのサイトで横スクロールバーを消す方法で <style type="text/css"> <!-- body { overflow-x: hidden; } --> </style> これで消えるとあったんで試してはみたのですが、なにせhtmlの知識が乏しいので、使い方も悪いのか、まだ消えません。 どうやったらこの横スクロールバーを消せるのでしょうか? どなたか分かる方いらっしゃったら教えてください。

    • ベストアンサー
    • HTML
  • iframeの横スクロール

    iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで; 詳しい方教えていただけないでしょうか。 (説明がへたくそですみませんm(_ _)m)

  • インラインフレームの横スクロールバーを消すには?

    インラインフレームを使用したHPから、FC2ブログを呼び出そうとしています。 すると、必ず横スクロールバーが表示されます。 この横スクロールバーを消したい場合には、どのようにすれば良いでしょう。 ちなみにこのページになります。 http://ee.uuhp.com/~macyako/ ブログのbodyタグに以下を追加しましたが、無理でした。 body { overflow-x: hidden; } あと、インラインフレームの幅を広げてみたりしたのですが無理でした。 ソースが間違ったりしていますか?

  • 横方向のスクロールをなくしたい

    縦3分割(cols="*,700,*")のフレームにし、真ん中だけ遷移させるページを作成しているのですが、CSSで、 body{ overflow-x:hidden; } と設定しているのですが、横方向にスクロールされてしまいます。フレームの値(width)より真ん中のページに置く幅の値が等しいか同値であるのですが、何か設定が要るのでしょうか? 因みに縦はスクロールします。(真ん中のフレームのみ) 考えてみましたが、結論が出そうになかったので教えてください。お願いします。

    • ベストアンサー
    • HTML
  • overflow:hiddenでスクロールバー

    <div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。

    • ベストアンサー
    • CSS
  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • IE6.0でフレームぺージの横スクロールバーが消せません。

    1・フレーム指定ページ 2・左表示ページ 3・右表示ページ といった、左右を分割したページを作っているのですが、 画面を横にしなければいけない表示物が何もないにもかかわらず、 IE6.0特有のバグだそうで(?) 右側に横スクロールバーが出てきてしまい、とても気になります。 調べてみて、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>‥ と個々や全部のページに入れたり、 <STYLE TYPE="text/css"> HTML { overflow-y: scroll; } </STYLE> の記載を<head></head>間に、 これもやはり個々のページに順番にいれてみたり、 全部に入れてみたりしたのですが、 どうにも要領が悪いようで全然消す事が出来ませんでした。 BODY { overflow-x: hidden; } は文字の表示サイズを最大にして見た場合、はみ出してしまう部分がある時、 見辛かったのでなるべく使わない方がいいかと思い使用を保留にしています。 タグをいれるページや、書き方や書く場所が間違っているのでしょうか? それともこのやり方自体が間違っているのでしょうか? 何とか横スクロールを穏便に消す方法はありませんでしょうか…、 どうかご存知の方お教え下さい、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 横スクロールバーについて

    Dreamweavwe8にて作業しています。 製作した画面はフレーム構造のメインコンテンツを表示する部分なのですが、フルCSSにて製作、確認画面でその画面だけを表示すると縦スクロールだけが表示され、横スクロールは通常時は表示しませんが、 INDEXを立ち上げ、フレームの一部としてみた時、横スクロールが表示されます。 それは、縦スクロールが消えるサイズまで広げると消えるのですが、縦スクロールがある間は表示されます。 ページの設定でスクロールは自動にしてあります。 フレームの設定は、 <frameset cols="166,*" frameborder="NO" border="0" framespacing="0"> <frame name="leftFrame" noresize scrolling="NO" src="menu.html"> <frameset rows="135,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame name="topFrame" noresize scrolling="NO" src="header.html" > <frame name="mainFrame" src="top.html"> </frameset> </frameset> としてあります。 ここで何か設定が必要なのでしょうか? 私が困っているのはtop.htmlのところです。 解りにくくてすいませんが、よろしくお願いします。

  • スクロールバーを無くしてすくロースさせたい!

    タイトルのままなのですが、現在ページを作っているのですがデザインの関係からスクロールバーを表示させない仕様になりました。 CSSは、 overflow:hidden; の設定を試してみました。 しかし、この状態では当然はみ出したページ部分を読むことが出来ず困っております。 イメージとしては、overflow:hidden;の様にスクロールバーが無くなった状態でそのままスクロールできればと考えております。 フレーム方式にしたら出来るような記憶がありますが、何れにしてもフレームは使用したく無いです…。 どなたか、実現する方法をご存知の方いらっしゃいましたら、アドバイスを頂けますと助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • iframeに横スクロールを出現させない方法(IE6)

    いつもお世話になっております。 今回は、IE6でiframeの横スクロールバーを出現させない方法がわからずこちらで質問させていただきました。 TOPページにindex.htmlを置いており、indexにiframeを3つ(top.html/menu.html/main.html)作成し、ページを作っております。 top/mainの2箇所に問題は無く、menuの部分での質問です。 iframeは幅200pxで設定しており、その中に幅指定100%のmanu.htmlをiframe src=""で埋め込んでいます。 menu.htmlには幅200pxで作成した背景画像(no-repeat)と、幅100%指定のiframeを使用しております。 menu.htmlに対しCSSで overflow: auto;を当てていますが、スクロール表示しないといけない状態に画面を変更した場合横スクロールが消えない状態です。(IE7ではきえるのですが…) IE6の特徴の、文章等がある場合親のサイズに合わすことが要因だと思いますが、iframe/menu.htmlのサイズを変更させず横スクロールを表示させないことは可能でしょうか?(menu.htmlを180px固定とか、index.htmlのiframeをscroll="yes"にすれば平気ですが、不恰好になるので…) よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう