Q&A
css の overflow:hidden; を body に適用する は試されましたでしょうか？
発生している問題・エラーメッセージ
スマートフォンからページを見た際、意図しない形でbody外に以下のように描画されます。
以下はデベロッパーツールですが、実機でも同じです。
上記を全てbody内で収まるようにしたいです。
該当のソースコード
/*View側*/ - content_for(:head) do = stylesheet_link_tag 'application', media: 'all' - assign_meta_tags title: "お問い合わせ" - content_for(:over_style) do = stylesheet_link_tag "inquiry" meta name="robots" content="noindex" #inquiry = form_for @inquiry, :url => inquiry_confirm_path do |f| h1 お問い合わせ div.container-fluid.main_frame .row .col-sm-12 div.sub_frame.bg-info .row.field .col-sm-3 h5 span.label.label-default 任意 strong.left_space 会社名： .col-sm-9 = f.text_field :company, class: 'grid_company_field form-control' .row.field .col-sm-3 h5 span.label.label-danger 必須 strong.left_space お名前： .col-sm-9 = f.text_field :name, required: true, class: 'grid_name_field form-control' .row.field .col-sm-3 h5 span.label.label-danger 必須 strong.left_space 電話番号： .col-sm-9 = f.telephone_field :tel, required: true, class: 'grid_tel_field form-control' .row.field .col-sm-3 h5 span.label.label-danger 必須 strong.left_space メールアドレス： .col-sm-9 = f.email_field :email, required: true, class: 'grid_email_field form-control' .row.field .col-sm-3 h5 span.label.label-default 任意 strong.left_space URL： .col-sm-9 = f.text_field :company_url, class: 'grid_company_url_field form-control' .row.field .col-sm-3 h5 span.label.label-danger 必須 strong.left_space お問い合わせ： .col-sm-9 = f.text_area :message, required: true, size: "80x13", class: 'grid_message_field form-control' .col-sm-3 .col-sm-9 .grid_check_box.form-group = f.check_box :consent = link_to '同意する',privacy_path, class: 'privacy_link_style', target: '_blank' .submit_outer = f.submit '確認', class: 'inquiry_inner' end
/*CSS*/ .thanks_btn { margin: 0 45% 33px; width: 62px; } .thanks .wipe h2 { width: 20%; text-align: center; font-weight: lighter; font-size: 230%; margin: 70px auto 60px; letter-spacing: 4px; } .thanks .wipe { text-align: center; margin-bottom: 71px; } #inquiry h1 { width: 28%; text-align: center; font-weight: lighter; font-size: 252%; margin: 123px auto 60px; letter-spacing: 4px; border-left: solid 1px #000; border-right: solid 1px #000; } .containers { margin: 3% auto; width: 61%; display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: 25px; grid-row-gap: 18px; justify-items: stretch; align-items: stretch; } .inquiry_btn { padding: 0px 0px 0px 0; width: 100% } .inquiry_outer{ margin: 50px; text-align: center; } .inquiry_inner{ border-radius: 25px; color: white; border: 2px solid #20b2aa; background-color: #20b2aa; text-align: center; font-size: 18px; width: 250px; margin: 0 40% 40px; padding: 10px; } .inquiry_inner_confirm{ border-radius: 25px; color: white; border: 2px solid #20b2aa; background-color: #20b2aa; text-align: center; font-size: 18px; width: 250px; margin: 0 40% 40px; padding: 10px; } .inquiry_inner_back{ border-radius: 25px; color: white; border: 2px solid #68d3fd; background-color: #68d3fd; text-align: center; font-size: 18px; width: 150px; margin: 0px 0 10px 43.5%; padding: 10px; display: inline-block; } .inquiry_thanks{ border-radius: 25px; color: white; border: 2px solid #68d3fd; background-color: #68d3fd; text-align: center; font-size: 18px; width: 150px; padding: 10px; display: inline-block; } .inquiry_inner_back:hover { text-decoration: none; color: white; } #inquiry h6 { text-align: center; } #inquiry { margin: 0% auto; } .btn-sm, .btn-group-sm > .btn { padding: 6px 15px; font-size: 11px; line-height: 3.5; border-radius: 29px; } textarea.form-control { height: 217px; } .alert_style { width: 439px; margin: 0 auto; } .alert_style li { letter-spacing: 6px; margin-left: 35px; } /*---------------------------------------- 表示領域が 1000px以上の場合に適用するスタイル ----------------------------------------*/ @media screen and (min-width: 1100px) { #inquiry .title h1 { margin: 7% auto 10%; } #inquiry .confirm { margin: 0% auto; width: 26%; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; grid-column-gap: auto; grid-row-gap: auto; justify-items: auto; align-items: baseline; } #inquiry .containers { width: 608px; display: grid; grid-template-columns: 280px 100px; grid-template-rows: 100px 50px; grid-gap: 15px; } .grid_company_field { border: 1px solid rgb(189, 187, 187); grid-column: 2 / 4; grid-row: 1; } .grid_name_field { border: 1px solid rgb(189, 187, 187); grid-column: 2 / 4; grid-row: 2 / 2; } .grid_tel_field { border: 1px solid rgb(189, 187, 187); grid-column: 2 / 4; grid-row: 3 / 3; } .grid_email_field { border: 1px solid rgb(189, 187, 187); grid-column: 2 / 4; grid-row: 4 / 4; } .grid_company_url_field { border: 1px solid rgb(189, 187, 187); grid-column: 2 / 4; grid-row: 5 / 5; } .grid_message_field { border: 1px solid rgb(189, 187, 187); grid-column: 1 / 4; grid-row: 7 / 7; } .grid_check_box { margin-left: 14px; grid-column: 1; grid-row: 8 / 8; } .thanks .wipe h2 { width: 14%; margin: 179px auto 60px; } .thanks h4 { margin: 0% auto 12%; } .privacy_link_style { font-size: 15px; letter-spacing: 5px; padding-left: 13px; } .btn_style { width: 90px; } .alert_style { width: 439px; margin: 0 auto; } } /*---------------------------------------- 表示領域が 830px以下の場合に適用するスタイル ----------------------------------------*/ @media screen and (max-width: 830px) { #inquiry .confirm { width: 26%; } #inquiry .containers { margin: 0 auto 3%; grid-row-gap: 1px; width: 70%; } .inquiry_btn { padding: 0px 0 28px 0; } .thanks .wipe h2 { width: 45%; } .alert_style { width: 76%; margin: 0 auto; } .alert_style li { margin-left: 25px; } } /*---------------------------------------- 表示領域が640px以下の場合に適用するスタイル ----------------------------------------*/ @media screen and (max-width: 640px) { .thanks_btn { margin: 0 32.5% 33px; width: 62px; } .inquiry_inner_confirm{ margin: 0 17% 40px; } .inquiry_inner_back{ margin: 0px 0 10px 30%; } #inquiry .title h1 { margin: 7% auto 10%; } #inquiry h1 { width: 59%; text-align: center; font-weight: lighter; font-size: 208%; margin: 56px auto 45px; letter-spacing: 1px; border-left: solid 1px #000; border-right: solid 1px #000; } #inquiry .containers { width: 78%; } #inquiry .confirm { width: 52%; } .inquiry_btn { padding: 23px 0 28px 0; } .thanks .wipe { text-align: center; width: 80%; margin: 0 auto 52px; } .thanks .wipe h2 { width: 80%; } .inquiry_inner{ margin: 0 20% 40px; } }
補足情報（FW/ツールのバージョンなど）
Ruby on Rails
Slim(View側)
Scss
そちらは試してみましたがダメでした。
あとbody内にbox-sizing: border-box;を試してみましたが、こちらもダメでした。
どういう環境ってやってるか知らないですが、 overflow:hidden; は F12 でbody要素のスタイルを見た場合に 打消し線になっていたという意でしょうか？（詳細度が足りないならとりあえず（テスト目的で） !important を付けて見られては？
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#the_!important_exception
打ち消し線はでていませんでした。
-------
@media screen and (max-width: 640px)
body {
overflow: hidden !important;
}
-------
しかし、表示はそのままで加えてスクロールができなくなりました。
body内側のdiv に対して overflow:auto をつければ解決しそうですね。
ディベロッパーツール上で
------
html {
overflow: auto;
font-size: 10px;
-webkit-tap-highlight-color: transparent;
}
------
上記のようにしたら表示が正常に行われましたが、依然として横スクロールしたら白い余白が存在しました。
白い余白そのものを消し去りたいのですが、いい方法ないでしょうか。
html に padding もしくは body に margin はかかっていませんでしょうか？ F12 でどう判定されているか見れませんでしょうか？
ディベロッパーツールで以下のように表示されておりますが、
paddingやmarginは特に影響していないように見えます。
試しに全てのチェックボックスを外してみましたが、変化はありませんでした。
---------
element.style {
}
@media screen and (max-width: 640px)
body {
overflow: auto;
}
body {
font-family: 'Montserrat',sans-serif;
font-size: 1.2rem;
/* width: 640px; */
/* margin: 0 auto; */
/* padding: 0; */
background-color: #ffffff;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
body {
/* margin: 0; */
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
/* padding: 0; */
/* margin: 0; */
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
body {
display: block;
margin: 8px;
}
html {
font-size: 62.5%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: transparent;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
/* box-sizing: border-box; */
}
*, *::before, *::after {
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
/* box-sizing: border-box;
いや、body に margin かけていませんか？
user agent stylesheet
body {
display: block;
margin: 8px;
上記のことでしょうか。
なので、 body に margin:0 かけたら解決じゃありませんでしょうか？
user agent stylesheetってことはreset.cssを使えばよいのですよね。
app/assets/stylesheet/common/reset.scssに以下のコードがあり、すでにmarginが0になっているはずなのですが、この方法は違うのでしょうか。
------------------------
body {
font-family: 'Montserrat',sans-serif;
font-size: 1.2rem;
/* width: 640px; */
margin: 0 auto;
padding: 0;
background-color: #ffffff;
}
実際の body には margin かかっていないのでしょうか？（F12でスタイルを確認したときの有効値はどうなっていますでしょうか？
-------
app/assets/stylesheets/common/reset.scss */
body {
font-family: 'Montserrat',sans-serif;
font-size: 1.2rem;
/* width: 640px; */
margin: 0 auto;
padding: 0;
background-color: #ffffff;
-----------
ディベロッパーツールで上記のように適用されていました。
念の為に、直接bodyにmargin:0を指定してディベロッパーツールでみてみましたが、
----------
【ディベロッパーツール】
element.style {
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
form {
display: block;
margin-top: 0em;
}
body {
font-family: 'Montserrat',sans-serif;
font-size: 1.2rem;
/* width: 640px; */
margin: 0 auto;
padding: 0;
background-color: #ffffff;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
html {
font-size: 62.5%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: transparent;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-----------
依然としてfooterの右には白の空白が表示されました。。
blink系の F12 使っているならば Styles（日本語だとスタイル） よりは Computed（日本語だと計算済み）の margin-* の値が多分参考になりそうな気がします。（テキストだと流石にエスパーするのは難しいです。
あと、 margin: 0 auto だと、左右は中央揃えで任意幅です。
ありがとうございます！！
色々アドバイスいただいたポイントを試してみたらいけました！！
自己解決
