現在、PC用サイトを作成しています。
スマホでは100%表示にしたいので、
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
を記述しています。
サイトのほとんどのページは100%表示になりますが、数ページだけ効かずに少し大きく表示されてしまいます。
html
1<body id="a"> 2 <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?> 3 <section id="contents"> 4 <article class="b"></article> 5 <article class="c"></article> 6 </section> 7 <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?> 8</body>
このような構造に
section#contents{width:100%;} article{width:1200px;}
を指定しています。
さらに、読み込ませているヘッダーとフッターを削除すると、100%表示されていたページも大きく表示されるようになってしまいます。
下手な説明ですみませんが、どなたかお分かりになる方ぜひ教えてください。
お願いします。
※追記
説明が曖昧でしたので追記します。
ページを読み込むと、上下と左はぴったりなのですが、右側にはみ出してしまいます。 これを横幅が100%で表示されるようにしたいです。 でも、今気付いたのですが、横幅が100%以上で表示されているページは高さが100%で表示されている気がします。 ページの高さがあまりないから、高さが100%になっているのでしょうか? これを横幅100%にする方法はあるでしょうか?
横幅が100%で表示されるページと100%以上になってしまうページのコードも追記します。
<横幅100%表示のページ>
html
1<html> 2<head> 3<meta name="viewport" content="width=device-width,maximum-scale=1.0"> 4</head> 5<body> 6 <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?> 7 8<section id="contents" class="b"> 9 <h1>タイトル</h1> 10 11 <p>本文テキスト(3行)</p> 12 13<article class="b01"><!--フォーム--> 14 <table> 15 <tr> 16 <th>氏名</th> 17 <td><input type="text" name="氏名" required></td> 18 </tr> 19 <tr> 20 <th>メールアドレス</th> 21 <td><input type="text" name="mail" required></td> 22 </tr> 23 <tr> 24 <th>住所</th> 25 <td><input type="text" name="住所" required></td> 26 </tr> 27 <tr> 28 <th>TEL</th> 29 <td><input type="text" name="TEL" required></td> 30 </tr> 31 <tr> 32 <th>お問い合わせ内容</th> 33 <td><textarea name="お問い合わせ内容"></textarea></td> 34 </tr> 35 </table> 36 <a href="" class="btn">確認画面へ</a> 37</article><!--フォーム--> 38</section> 39 <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?> 40</body> 41</html>
css
1.b{ 2 width:860px; 3 margin:0 auto; 4} 5.b .form table { 6 width:860px; 7 margin: 0 0 50px; 8} 9.b .form table th{ 10 width:250px; 11} 12.b .form table th b{ 13 display: inline-block; 14 padding-left: 6px; 15} 16.b .form table td { 17 width:610px; 18}
<横幅100%以上になってしまうページ>
html
1<html> 2<head> 3<meta name="viewport" content="width=device-width,maximum-scale=1.0"> 4</head> 5<body> 6 <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?> 7 8<section id="contents" class="a"> 9 <h1>タイトル</h1> 10<article class="a01"> 11 <h2><img src=""></h2> 12 <ul> 13 <li><img src=""></li><li> 14 <img src=""></li> 15 </ul> 16 <p>本文テキスト(3行)</p> 17 18 <div class="a02"> 19 <p>テキスト<br> 20 <img src=""></p> 21 </div> 22</article> 23</section> 24 <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?> 25</body> 26</html>
css
1.a .a01 ul{ 2 width:264px; 3 margin:0 auto 60px; 4 text-align: center; 5} 6.a .a01 ul li{ 7 width:120px; 8 display: inline-block; 9} 10.a .a01 ul li:first-child{ 11 margin:0 24px 0 0 ; 12} 13.a .a01 .a02{ 14 width:535px; 15 margin:0 auto; 16 padding:10px 0; 17} 18.a .a01 .a02 p{ 19 margin:0 auto; 20}
※追記2
すみません、説明がまだ曖昧でしたのでさらに追記いたします。
スマホやタブレットで横幅100%で表示したいと考えています。
PCでの横幅は、はみ出してもOKと考えています。
説明が不慣れですみません。
回答2件
あなたの回答
tips
プレビュー