質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2708閲覧

100%表示の指定が、一部のページだけ効かなくて困っています

korokorota

総合スコア40

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/04/05 18:40

編集2016/04/05 20:44

現在、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と考えています。

説明が不慣れですみません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/04/05 18:48

「少し大きく」など抽象的な書き方をされている箇所について、どこがどれくらいどのようになっていて、どうしたいのかを、具体的に書いてみてください。
korokorota

2016/04/05 19:09

説明が曖昧ですみませんでした。 ページを読み込むと、上下と左はぴったりなのですが、右側にはみ出してしまいます。 これを横幅が100%で表示されるようにしたいです。 でも、今気付いたのですが、横幅が100%以上で表示されているページは高さが100%で表示されている気がします。 ページの高さがあまりないから、高さが100%になっているのでしょうか? これを横幅100%にする方法はあるでしょうか?
kei344

2016/04/05 19:31

ここに書かれるのではなく、質問に追記してください。また、大丈夫なページとそうでないページそれぞれに出力されたHTMLおよびCSSをマークダウンのコードブロックで記載されれば、解決方法を考えることがやりやすくなります。
guest

回答2

0

ベストアンサー

CSS

1article{width:1200px;}

横にはみ出す原因はまぁ十中八九↑コレが原因でしょう。

スマホやタブレットでは横100%で、PCなど大きな画面では1200pxで固定したい
というのであれば、

CSS

1article { max-width: 1200px;}

に変更すればいいんじゃないでしょうか。
こうすれば、最大1200pxで固定されますので
それ以上には大きくなりませんし、小さい画面ではwidth: auto;が効くので
横100%で伸縮します。

投稿2016/04/06 07:07

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

korokorota

2016/04/06 11:12

なるほど‼︎ max-widthにしたらいいんですね‼︎ 恥ずかしながら、全く思いつきませんでした。 レスポンシブではないPCサイトでmax-widthを指定するという発想が、自分の中にそもそも無かった気がします。勉強不足でお恥ずかしい限りです。 PCサイトでも使うんですね!とても勉強になりました‼︎ ありがとうございます、 早速試してみます!
korokorota

2016/04/10 00:40

article{max-width:1200px;} を指定してみましたが、はみ出してしまいました… 問題のページは高さがあまりないページで、横幅100%で表示すると高さが足りなくなっしまうので、だからムリなのかなと、自分の中で納得しつつあります。 仮で、内容を複製して高さを増やすと、ちゃんと横幅100%で表示されました。 でも、とても勉強になりました! 下手な説明に丁寧に回答いただき、有難うございました。
guest

0

css

1article{width:1200px;}

これが、はみ出したりしませんでしょうか?
ページサイズは、

html

1<meta name="viewport" content="width=device-width,maximum-scale=1.0">

と指定されていますから、デバイスによって変わってきます。

なので、横1200px以下のデバイスでは、

html

1<article class="b"></article> 2<article class="c"></article>

これらが、はみ出してしまうかと思います・・・?

articleを、

css

1width:100%;

とするとか、スクロールできるように、

css

1overflow-x:scroll;

とか。
ただし、使っているブラウザがわかりませんので、overflow-xなどが効くかどうかは、お調べいただければと。
chromeや、IEについている、開発者ツールで、どのスタイルシートが有効になっているか、見るとよいかと思います。

http://ascii.jp/elem/000/000/997/997889/
https://msdn.microsoft.com/ja-jp/library/gg699337(v=vs.85).aspx

っと、検証していないので、脳内検証ですので、多少の間違いあったらごめんなさい。

あと、[width=device-width]も少々癖ありです。適度な値?でないと、うまく横100%にフィットしなかったりします。

https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=width%3Ddevice-width%20%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84

投稿2016/04/05 20:01

編集2016/04/05 20:02
ItoTomonori

総合スコア1283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

korokorota

2016/04/05 21:01

ご丁寧に回答していただきありがとうございます。 私の質問が曖昧ですみませんでした。 今回は、PCでの横幅は100%じゃなくてもOKと考えてまして、スマホやタブレットでの表示を横幅100%にしたいと考えてます。 chromeで開発者ツールは使用しているのですが、教えていただいたサイトを見て、使っていない機能もあったので、これから使いこなしたいと思います。 overflow-x:scroll;は、初めて知りました。 勉強になりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問