Q&A
直接的な解決につながらないと思うのでこちらでお知らせします。提示されているHTMLの6行目viewportの部分のクォーテーションが全角になってますのでご確認ください
#困っている事
現在Wordpressのテーマ制作をしています。
だいたい完成し、Googleデベロッパーツールで確認していたのですが、
スマホ表示にしたときに添付のように右端に余白ができてしまいます。
設定している背景色が付いているのでpaddingかと思いましたが、
指定していませんでした。
参考
こちらを参考に各対応試してみましたがどれも治りませんでした。
原因が分かる方いらっしゃいますでしょうか？
html
1 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset=UTF-8"> 6 <meta name="description" content="Hirotaka Origuchiのポートフォリオ"> 7 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 8 <title>Hocus Pocus</title> 9 <link href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/style.css" rel="stylesheet" media="screen"> 10 <link rel="stylesheet" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/genericons/genericons.css" type="text/css" /> 11 <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet"> 13 <script type="text/javascript"> 14 window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/127.0.0.1:4001\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}}; 15 !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); 16 </script> 17 <style type="text/css"> 18img.wp-smiley, 19img.emoji { 20 display: inline !important; 21 border: none !important; 22 box-shadow: none !important; 23 height: 1em !important; 24 width: 1em !important; 25 margin: 0 .07em !important; 26 vertical-align: -0.1em !important; 27 background: none !important; 28 padding: 0 !important; 29} 30</style> 31<link rel='stylesheet' id='bootstrap-css-css' href='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/css/bootstrap.min.css?ver=4.2.4' type='text/css' media='all' /> 32<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script> 33<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> 34<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1:4001/wordpress/xmlrpc.php?rsd" /> 35<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://127.0.0.1:4001/wordpress/wp-includes/wlwmanifest.xml" /> 36<meta name="generator" content="WordPress 4.2.4" /> 37<link rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/favicon.ico" /> 38 39 <script> 40 //スムーズスクロール 41 jQuery(function(){ 42 // #で始まるアンカーをクリックした場合に処理 43 jQuery('a[href^=#]').click(function() { 44 // スクロールの速度 45 var speed = 350; // ミリ秒 46 // アンカーの値取得 47 var href= jQuery(this).attr("href"); 48 // 移動先を取得 49 var target = jQuery(href == "#" || href == "" ? 'html' : href); 50 // 移動先を数値で取得 51 var position = target.offset().top; 52 // スムーズスクロール 53 jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); 54 return false; 55 }); 56 }); 57 </script> 58 59</head> 60<body> 61 62 <div id="header"> 63 <ul class="nav nav-pills active"> 64 <li><a href="#contact">Contact</a></li> 65 <li><a href="#about">About</a></li> 66 <li><a href="#portfolio">Portfolio</a></li> 67 </ul> 68 </div> 69 <section id="top"> 70 <div class="col-xs-12"> 71 <img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/sample.jpg" class="img-responsive"> 72 <p class="title">Hirotaka Origuchi Photography</p> 73 </div> 74 </section> 75 76 <section id="portfolio"> 77 <div class="container"> 78 <div class="row mainlink"> 79 <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div> 80 <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div> 81 <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div> 82 <div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div> 83 </div> 84 </div> 85 </section> 86 87 <section id="about"> 88 <h2 class="ab">About</h2> 89 <h4>~Hirotaka Origuchi~</h4> 90 <p>1995年生まれ、岡山県在住<br>2016年にカメラを始め、同年5月に<a href="https://lovegraph.me/">Lovegraph</a>にジョイン。<br>その夏からポートレート撮影を開始。<br>2017年10月より<br><a href="http://www.studioaim.jp/harajuku.html">creative photostudio aim</a>原宿店に勤務</p> 91 <h4>~Equipment~</h4> 92 <p>Canon EOS 6D<br>Canon EOS 80D<br>Sigma Art 135mm<br>Sigma Art 30mm<br>iPhone6S</p> 93 </section> 94 95 <section id="contact"> 96 <h2 class="co">Contact</h2> 97 <h4>~E-Mail~</h4> 98 <a href="mailto:lostsymbol612@gmail.com" class="mail">メールで連絡する</a> 99 <h4>~SNS Link~</h4> 100 <div class="table-responsive"> 101 <table class="table"> 102 <tr> 103 <td><a href="https://instagram.com/hirotaka612" class="sns">Instagram</a></td> 104 <td><a href="https://www.facebook.com/hocuspocusphotographer/" class="sns">Facebook</a></td> 105 </tr> 106 <tr> 107 <td><a href="https://500px.com/hirotaka612" class="sns">500px</a></td> 108 <td><a href="https://twitter.com/HocusPocusPhoto" class="sns">Twitter</a></td> 109 </tr> 110 <tr> 111 <td><a href="https://mstdn.tokyocameraclub.com/@HirotakaOriguchi" class="sns">Mstdn</a></td> 112 <td></td> 113 </tr> 114 </table> 115 </div> 116 </section> 117 118<div id="footer"> 119 <p class="copy">©2017 Hirotaka Origuchi</p> 120 <a class="genericon genericon-collapse" href="#top"></a> 121</div> 122<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/js/bootstrap.min.js?ver=1.0.0'></script> 123</body> 124</html>
[追記]
footerコメントアウト後
悪さをしているのは<ul>のようです。
他は全てwidthが980pxなのに
ulのみ1032pxとなっています。
なぜなのでしょう、、
もう一つ問題が、、
以前までは上部に固定されていたヘッダーがスクロールすると消えるようになってしまいました。
こちらも解決できるでしょうか？
回答2件
0
ベストアンサー
hirotaka612さん
こんにちは。
添付の画像を見るとエミュレーター上でヘッダーナビが表示領域から
はみ出しているように見えます。
スマホ表示にした際も同様に何かしらの要素が突き抜けてはいないでしょうか。
ありがちなのはwrapperで幅指定をしていてメディアクエリで解除し忘れているとか？
一度ご確認くださいませ。
投稿2017/05/12 01:03
総合スコア96
回答ありがとうございます。
おっしゃる通りヘッダーのみがはみ出している状態です。
PCで表示して画面を小さくしてもこの現象は起きず、
デベロッパーツールでスマホモードにした時と、
実際にサーバーに上げてiphoneで確認した時にこうなります。
wrapperというのはidやclassでしょうか？
使用していませんが何を表しているのでしょうか？
wrapperは一般的な言い回しではないのかもしれません。
失礼致しました。
私の言うwrapperはコンテンツの最大幅を固定する際に使用するcssクラスをさしています。
【例】幅960px内でコンテンツはまとめたい場合
CSS
.wrapper{
width:960px;
margin:0 auto;
}
html
<div class="wrapper">
<p>
ここにコンテンツ
</p>
</div>
前置きが長くなりましたが、hirotaka612さんのサイト構築の際にhtmlやbodyなどにwidthの指定などはありませんか？
もし違っているのであれば下記URLのサイトが関係あるかもしれません。
右にできた謎の余白を消す方法
http://bashalog.c-brains.jp/15/06/26-170500.php
調べてみるとwrapperはよく言われるものみたいでした。
無知ですみません。
containerにwidth100%を指定しています。
参考サイトのようにwrapperで囲ってoverflow:hiddenを試してみます！
ダメでした、、
ふむぅ～･･･困りましたね。
viewport関係かCSSが原因なんだとは思うのですが･･･。
要素が突き抜けているからCSSかなぁ･･･。
問題の切り分けとして、htmlを最小限(headerやフッターのみ)にし同一症状が発生するか確認してみてはいかがでしょうか。症状がでないようであれば、少しずつhtmlを追加していき問題が発生した箇所が怪しいという絞込みになります。
大変ですがファイトです！
順番にコメントアウトしていくと、<div id="footer">をアウトしたところで治りました！
しかし再び表示されると余白は無くなったのですが今度はヘッダーがはみ出してしまいました、、、
幸いgit環境でさわっていたので諸々変更する前に戻し、
再度進めてみるとどれもはみ出さず表示させることができました。
原因は分かりませんが、度々アドバイスを下さったlyrica0503さんをベスアンにさせていただきます。
ありがとうございました！
0
CSSの中身がわからないのでなんともいえないですが・・・。
以下のことを試してみてください。
・タグが正しく閉じられているか確認
・reset.cssを使う。（デフォルトで設定されている、微妙な隙間などをクリアするCSS。調べると出てきます）
・body直下で、全体を一つのdivで囲い、その上で、隙間を設定する。
・img.クラス に設定されている、display: inline; を外す。
※imgには、デフォルトで display: inline-block; が設定されており、inlineとほぼほぼ同じ動きをします。inlineは、CSSでは制御しずらい隙間などが発生しやすいので、注意が必要だったりします。
・コメントアウトを使い、改行などを表に見えないようにする
HTML
1<body><!-- 2 3 --><div id="header"> 4 </div> 5～内容～ 6 <div id="footer"> 7 <p class="copy">©2017 Hirotaka Origuchi</p> 8 <a class="genericon genericon-collapse" href="#top"></a> 9 </div><!-- 10 11--></body>
投稿2017/05/12 00:56
総合スコア9528
あなたの回答
tips
プレビュー
