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

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

ただいまの
回答率

90.51%

  • CSS

    7553questions

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

  • HTML5

    5128questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

responsiveが反映されません…

解決済

回答 2

投稿 編集

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

hellohello

score 10

max-width:500pxでは【実現したい】縦4横2構成→【現実】縦8横1に
max-width:620pxでは【実現したい】縦2横4構成→【現実】縦3横3になってしまいます。

悩んで3日経ったのですが、どうしてもうまくいきません。
どなたか原因が分かる方、ご教授願えませんでしょうか?

<!DOCTYPE html>
<html lang="en">


    <head>
        <meta charset="utf-8">

        <meta http-equiv="X-UA=Compatible" content="IE=edge,chrome=1">

        <title>2-1</title>

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

        <link rel="stylesheet" href="css/css">
        <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">

    </head>
    <body>
<div class="nav"><div class="section-inner">
                <ul>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                    <li>About</li>
                </ul>
        </div></div>
</body>
</head>
div.nav {
    background-color: #DDDDDD;
    overflow:hidden;    
}

div.nav ul {
    list-style: none;
    margin:0;
    padding:0;
}

div.nav ul li {
    float:left;
    padding:10px 15px;
    border-right:1px solid #CCCCCC;
    font-size:93%;

}
div.nav ul li {
    width: 25%;
    border-bottom: 1px solid #CCCCCC;
}



@media screen and (max-width: 620px) {

    div.nav ul li {
        width: 33%;
    }
}

@media screen and (max-width: 500px) {

    div.nav ul li {
        width:50%;
        font-size:83%;
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • s8_chu

    2018/11/11 00:30

    akihiro3さん> 横から失礼します。質問文によると、「`620px`以下のときには縦2横4(2行4列)にしたい」ようですから、質問文のコードでは条件を満たしていないのではないでしょうか?

    キャンセル

  • hellohello

    2018/11/11 00:52

    akihiro3 様 metaタグの気づき、本当にありがとうございました。皆様のお力添えを頂き解決致しました。お時間頂き助けて頂いて本当に感謝しております。本当にありがとうございました。

    キャンセル

  • akihiro3

    2018/11/11 00:54

    s8_chuさん、さすがです。7つ目のコメントを何度も読み返してやっと気付けました

    キャンセル

回答 2

checkベストアンサー

+4

max-width:500pxでは【実現したい】縦4横2構成→【現実】縦8横1に

HTML の要素は、デフォルトの状態ではpaddingborderを要素の横幅や高さに含めません。つまり、「widthプロパティで指定した横幅が、必ずしも実際にブラウザで見る要素の横幅と同じにならない」ということです。

今回もこの問題が発生しています。質問文のコードを見ると、div.nav ul liに対して、以下のようにborder-rightプロパティと、paddingプロパティを設定しています。

div.nav ul li {
    float: left;
    padding: 10px 15px;
    border-right: 1px solid #CCCCCC;
    font-size: 93%;
}

これにより、width: 50%;を設定すると、このwidthプロパティの横幅に、paddingborderの幅が加わり、横幅が2つの要素で100%より大きくなってしまうので、8行1列になってしまいます。

この問題を解決するには、box-sizingプロパティを使用します。box-sizingプロパティにborder-boxという値を設定すると、paddingborderを要素の横幅や高さに含めようになります。

max-width:620pxでは【実現したい】縦2横4構成→【現実】縦3横3に

max-width: 620pxのときのメディアクエリを見ると、以下のようになっています。

@media screen and (max-width: 620px) {
    div.nav ul li {
        width: 33%;
    }
}


もしも2行4列にしたいならば、各列の横幅は25%でなければ、4つの要素が入りません。

pc(max-width: 900px)のとき、1列にしたい

max-width: 900pxのときのメディアクエリを見ると、以下のようになっています。

div.nav ul li {
    width: 25%;
    border-bottom: 1px solid #CCCCCC;
}


もしも1行8列にしたいならば、各列の横幅は12.5%でなければ、8つの要素が入りきりません。

これら3つを行うと、最終的なコードは以下のようになります。
index.html

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>2-1</title>

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

    <link rel="stylesheet" href="css/2-1.css">
    <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">

</head>
<body>
<div class="nav">
    <div class="section-inner">
        <ul>
            <li>About</li>
            <li>About</li>
            <li>About</li>
            <li>About</li>
            <li>About</li>
            <li>About</li>
            <li>About</li>
            <li>About</li>
        </ul>
    </div>
</div>
</body>
</html>

2-1.css

div.nav {
    background-color: #DDDDDD;
    overflow: hidden;
}

div.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.nav ul li {
    box-sizing: border-box; /* 追記 */
    float: left;
    padding: 10px 15px;
    border-right: 1px solid #CCCCCC;
    font-size: 93%;
}

responsive.css

div.nav ul li {
    width: 12.5%; /* 修正 */
    border-bottom: 1px solid #CCCCCC;
}

@media screen and (max-width: 620px) {
    div.nav ul li {
        width: 25%; /* 修正 */
    }
}

@media screen and (max-width: 500px) {
    div.nav ul li {
        width: 50%;
        font-size: 83%;
    }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/11 00:32

    s8−chu 様 できました!!!!!!!!!!!感動です。3日間の悩みが解決いたしました!!!!なるほどpaddingなどの数値も含めて考え設定しなければならないのですね。この度は質問の仕方が下手くそで何度も聞き返して頂いて申し訳ありませんでした。感謝感激です。こんな時間ですのにお付き合い頂き、心よりお礼申し上げます。今回学んだことは絶対に忘れず勉強頑張ります。本当にありがとうございました!!!

    キャンセル

  • 2018/11/11 00:33

    動作確認ブラウザ: Google Chrome 70.0.3538.77(Official Build)(64 ビット)

    キャンセル

  • 2018/11/11 00:35 編集

    hellohelloさん>
    いえいえ、解決できたようで良かったです。

    キャンセル

  • 2018/11/11 00:49

    s8−chu 様 皆様の優しさに感動で胸が一杯です。本当に本当にありがとうございました!

    キャンセル

+2

詳しい解説とともに解決してますね。
flexboxの別パターン作ったので良かったら参考にしてください
(flexboxはレイアウトがとても楽ですよ)
flexbox参考

  div.nav {
    background-color: #DDDDDD;
    overflow:hidden;
  }

  div.nav ul {
    list-style: none;
    margin:0;
    padding:0;
    display: flex; /* 追加 */
    flex-direction: column; /* 追加 */
  }

  div.nav ul li {
    /* float:left; */    /* 削除 */
    width: 25%;
    padding:10px 15px;
    border-right:1px solid #CCCCCC;
    border-bottom: 1px solid #bababa;
    font-size:93%;
    box-sizing: border-box; /* 追加 */
  }
  /* レスポンシブは丸ごと変更 */
  @media screen and (max-width: 620px) {

    div.nav ul {
      flex-direction: row;
      flex-wrap: wrap;
    }

    div.nav ul li {
      width: 25%;
    }
  }

  @media screen and (max-width: 500px) {

    div.nav ul li {
      width:50%;
      font-size:83%;
    }
  }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/11 00:59

    akihiro3様…!なんと…!もう今夜は涙が真剣に止まらない忘れられない夜でございます。別パターンまで考えて下さって本当にありがとうございます。このような質問の仕方さえままならない初心者にお時間さいて頂きありがとうございます。こちらも是非試させて頂きます。flexbox、なかなか上手く使いこなせていないのですが、もっと頑張ります!ベストアンサーをお二人につけられないことが悔しくてなりません。申し訳ありません。akihiro3様、この度は本当にありがとうございました。

    キャンセル

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

  • CSS

    7553questions

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

  • HTML5

    5128questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。