0

500px以下の幅の時文字の色が白くならないです。
htmlに

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="home.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
      <title>Home</title>
    </head>

    <body>
      <div id="page-container">
        <nav class="menu">
          <div class="hamburger">
                <label id="nav-open" for="nav-input"><span></span></label>
                <label class="nav-unshown" id="nav-close" for="nav-input"></label>
          </div>
      <header>
            <h1>WEB SITE</h1>
          </header>
          <div id="nav-content">
            <ul class="sidebar-ul" id="menu">
              <li>
                <a class="home" href="home.html">Home</a>
              </li>
              <li>
                <a class="profile" href="profile.html">Profile</a>
              </li>
            </ul>
          </div>
          <ul id="social">
            <li>
              <a class="contact" href="">
                <i class="icon_head" aria-hidden="true"></i>Email</a>
            </li>
            <li>
              <a class="contact" href="">
                <i class="icon_head" aria-hidden="true"></i>Facebook</a>
            </li>
          </ul>
        </nav>
        <main>
          <div id="carousel-container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
              </ol>
              <div class="carousel-inner">
                <div class="item active">
                  <img class="img-responsive" src="test1.jpg" alt="Arch">
                  <p>WELCOME</p>
                </div>

                <div class="item contain">
                  <img class="img-responsive" src="test2.jpg" alt="Nature">
                  <p>MY SITE</p>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </body>

cssに

@media all and (min-width: 500px) {
  body,
  html {
    margin: 0;
    height: 100%;
  }
  #page-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: black;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 2fr;
    grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  .nav-unshown {
    display: none;
  }
  main {
    grid-area: MAIN;
  }
  header {
    grid-area: HEADER;
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  #menu {
    grid-area: MENU;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #menu>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #menu>li:hover>a {
    color: white;
    text-decoration: none;
  }
  #social {
    grid-area: SOCIAL;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #social>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #carousel-container {
    width: 100%;
    height: 100%;
  }
  li {
    list-style: none;
  }
  li a {
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
  }
  .icon_head {
    padding-right: 10px;
  }
  .carousel {
    height: 100%;
  }
  .carousel-inner {
    height: 100%;
  }
  .carousel-inner>.item {
    height: 100%;
  }
  .carousel-inner>.item>img {
    height: 100%;
  }
  .item {
    position: relative;
  }
  .item p {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 3em;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }
}

@media all and (max-width: 500px) {
  #page-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: white;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 2fr;
    grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  #nav-open span,
  #nav-open span:before,
  #nav-open span:after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 330px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  #nav-input:checked~#nav-close {
    display: block;
    opacity: .5;
  }
  #nav-input:checked~#nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  }
}

と書きました。ブラウザの幅を500px以下にした時、<h1>WEB SITE</h1>のWEB SITEの文字が黒くなってしまい、最初のmin-width: 500pxのCSSで指定した様に白くならないです。最初のCSSで指定したものを全部ではないですが、max-width: 500pxの方でも適用したいです。(書き換えたい部分は新たにmax-width: 500pxの方に追記しています)なぜ適用されないのでしょうか?メディアクエリの書き方が間違っているのでしょうか?

1 件の回答 1

1

max-width に、h1のスタイル指定が無いような、以下max-width に、h1追加して見ました。
(スニペットを実行して最大化すると確認できます。)

@media all and (min-width: 500px) {
    body,
    html {
        margin: 0;
        height: 100%;
    }
    #page-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "NAV MAIN";
        height: 100%;
    }
    nav {
        grid-area: NAV;
        background-color: black;
        height: 100%;
        float: left;
        display: grid;
        grid-template-rows: 1fr 1fr 2fr 2fr;
        grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
    }
    .nav-unshown {
        display: none;
    }
    main {
        grid-area: MAIN;
    }
    header {
        grid-area: HEADER;
    }
    header h1 {
        color: white;
        text-align: center;
        font-size: 30px;
    }
    #menu {
        grid-area: MENU;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0px;
    }
    #menu>li {
        margin: 10px 10px;
        padding: 2px 0px;
    }
    #menu>li:hover>a {
        color: white;
        text-decoration: none;
    }
    #social {
        grid-area: SOCIAL;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0px;
    }
    #social>li {
        margin: 10px 10px;
        padding: 2px 0px;
    }
    #carousel-container {
        width: 100%;
        height: 100%;
    }
    li {
        list-style: none;
    }
    li a {
        display: block;
        text-decoration: none;
        color: white;
        text-align: center;
        font-size: 20px;
    }
    .icon_head {
        padding-right: 10px;
    }
    .carousel {
        height: 100%;
    }
    .carousel-inner {
        height: 100%;
    }
    .carousel-inner>.item {
        height: 100%;
    }
    .carousel-inner>.item>img {
        height: 100%;
    }
    .item {
        position: relative;
    }
    .item p {
        position: absolute;
        color: white;
        font-weight: bold;
        font-size: 3em;
        top: 20%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
    }
}

@media all and (max-width: 500px) {
    #page-container {
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-areas: "NAV MAIN";
        height: 100%;
    }
    nav {
        grid-area: NAV;
        /*background-color: white;*/
        background-color: black;
        height: 100%;
        float: left;
        display: grid;
        grid-template-rows: 1fr 1fr 2fr 2fr;
        grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
    }
    header h1 {
        color: white;
        text-align: center;
        font-size: 30px;
    }
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
    }
    #nav-open span,
    #nav-open span:before,
    #nav-open span:after {
        position: absolute;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;
    }
    #nav-open span:before {
        bottom: -8px;
    }
    #nav-open span:after {
        bottom: -16px;
    }
    #nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 90%;
        max-width: 330px;
        height: 100%;
        background: #fff;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }
    #nav-input:checked~#nav-close {
        display: block;
        opacity: .5;
    }
    #nav-input:checked~#nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
    }
}
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="home.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
      <title>Home</title>
    </head>

    <body>
      <div id="page-container">
        <nav class="menu">
          <div class="hamburger">
                <label id="nav-open" for="nav-input"><span></span></label>
                <label class="nav-unshown" id="nav-close" for="nav-input"></label>
          </div>
      <header>
            <h1>WEB SITE</h1>
          </header>
          <div id="nav-content">
            <ul class="sidebar-ul" id="menu">
              <li>
                <a class="home" href="home.html">Home</a>
              </li>
              <li>
                <a class="profile" href="profile.html">Profile</a>
              </li>
            </ul>
          </div>
          <ul id="social">
            <li>
              <a class="contact" href="">
                <i class="icon_head" aria-hidden="true"></i>Email</a>
            </li>
            <li>
              <a class="contact" href="">
                <i class="icon_head" aria-hidden="true"></i>Facebook</a>
            </li>
          </ul>
        </nav>
        <main>
          <div id="carousel-container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
              </ol>
              <div class="carousel-inner">
                <div class="item active">
                  <img class="img-responsive" src="test1.jpg" alt="Arch">
                  <p>WELCOME</p>
                </div>

                <div class="item contain">
                  <img class="img-responsive" src="test2.jpg" alt="Nature">
                  <p>MY SITE</p>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </body>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。