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

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

ただいまの
回答率

90.47%

  • HTML

    9270questions

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

  • CSS

    5997questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 549

korokorota

score 29

現在、PC用サイトを作成しています。
スマホでは100%表示にしたいので、
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
を記述しています。
サイトのほとんどのページは100%表示になりますが、数ページだけ効かずに少し大きく表示されてしまいます。

<body id="a">
    <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?>
    <section id="contents">
         <article class="b"></article>
         <article class="c"></article>
    </section>
    <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?>
</body>


このような構造に

section#contents{width:100%;} article{width:1200px;}

を指定しています。

さらに、読み込ませているヘッダーとフッターを削除すると、100%表示されていたページも大きく表示されるようになってしまいます。

下手な説明ですみませんが、どなたかお分かりになる方ぜひ教えてください。
お願いします。

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

横幅が100%で表示されるページと100%以上になってしまうページのコードも追記します。

<横幅100%表示のページ>

<html>
<head>
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
</head>
<body>
    <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?>

<section id="contents" class="b">
        <h1>タイトル</h1>

        <p>本文テキスト(3行)</p>

<article class="b01"><!--フォーム-->
        <table>
        <tr>
        <th>氏名</th>
        <td><input type="text" name="氏名" required></td>
        </tr>
        <tr>
        <th>メールアドレス</th>
        <td><input type="text" name="mail" required></td>
        </tr>
        <tr>
        <th>住所</th>
        <td><input type="text" name="住所" required></td>
        </tr>
        <tr>
        <th>TEL</th>
        <td><input type="text" name="TEL" required></td>
        </tr>
        <tr>
        <th>お問い合わせ内容</th>
        <td><textarea name="お問い合わせ内容"></textarea></td>
        </tr>
        </table>
        <a href="" class="btn">確認画面へ</a>
</article><!--フォーム-->
</section>
    <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?>
</body>
</html>
.b{
    width:860px;
    margin:0 auto;
}
.b .form table {
    width:860px;
    margin: 0 0 50px;
}
.b .form table th{
    width:250px;
}
.b .form table th b{
    display: inline-block;
    padding-left: 6px;
}
.b .form table td {
    width:610px;
}

<横幅100%以上になってしまうページ>

<html>
<head>
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
</head>
<body>
    <?php $Path = "../"; include (dirname(__FILE__).'/../header.php'); ?>

<section id="contents" class="a">
        <h1>タイトル</h1>
<article class="a01">
        <h2><img src=""></h2>
        <ul>
        <li><img src=""></li><li>
        <img src=""></li>
        </ul>
        <p>本文テキスト(3行)</p>

        <div class="a02">
   <p>テキスト<br>
   <img src=""></p>
        </div>
</article>
</section>
    <?php $Path = "../"; include (dirname(__FILE__).'/../footer.php'); ?>
</body>
</html>
.a .a01 ul{
    width:264px;
    margin:0 auto 60px;
    text-align: center;
}
.a .a01 ul li{
    width:120px;
    display: inline-block;
}
.a .a01 ul li:first-child{
    margin:0 24px 0 0 ;
}
.a .a01 .a02{
    width:535px;
    margin:0 auto;
    padding:10px 0;
}
.a .a01 .a02 p{
    margin:0 auto;
}

※追記2
すみません、説明がまだ曖昧でしたのでさらに追記いたします。
スマホやタブレットで横幅100%で表示したいと考えています。
PCでの横幅は、はみ出してもOKと考えています。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/04/06 03:48

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

    キャンセル

  • korokorota

    2016/04/06 04:09

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

    キャンセル

  • kei344

    2016/04/06 04:31

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

    キャンセル

回答 2

checkベストアンサー

+1

article{width:1200px;}

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

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

article { max-width: 1200px;}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/06 20:12

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

    PCサイトでも使うんですね!とても勉強になりました‼︎
    ありがとうございます、
    早速試してみます!

    キャンセル

  • 2016/04/10 09:40

    article{max-width:1200px;}
    を指定してみましたが、はみ出してしまいました…
    問題のページは高さがあまりないページで、横幅100%で表示すると高さが足りなくなっしまうので、だからムリなのかなと、自分の中で納得しつつあります。
    仮で、内容を複製して高さを増やすと、ちゃんと横幅100%で表示されました。

    でも、とても勉強になりました!
    下手な説明に丁寧に回答いただき、有難うございました。

    キャンセル

0

article{width:1200px;}


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

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


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

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

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


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

articleを、

width:100%;


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

overflow-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/06 06:01

    ご丁寧に回答していただきありがとうございます。
    私の質問が曖昧ですみませんでした。
    今回は、PCでの横幅は100%じゃなくてもOKと考えてまして、スマホやタブレットでの表示を横幅100%にしたいと考えてます。

    chromeで開発者ツールは使用しているのですが、教えていただいたサイトを見て、使っていない機能もあったので、これから使いこなしたいと思います。
    overflow-x:scroll;は、初めて知りました。
    勉強になりました、ありがとうございます。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • HTML

    9270questions

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

  • CSS

    5997questions

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