idメニューがidソーシャルより下に来る
idメニューがidソーシャルより下に来ます。
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">
<header>
<h1>WEB SITE</h1>
</header>
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<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 1fr 1fr;
grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}
.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;
}
#copy-right {
grid-area: COPYRIGHT;
color: white;
text-align: center;
}
#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 1fr 1fr;
grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}
#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);
}
}
と書きました。<ul class="sidebar-ul" id="menu">で囲まれたエリアの下に<ul id="social">で囲まれたエリアが来るはずなのですが、ブラウザの幅を 500px 以上にすると、<ul id="social">で囲まれたエリアが上に来て、<ul class="sidebar-ul" id="menu">で囲まれたエリアが下に来ます。HTMLでもそのようには書いていませんし、CSSでもMENU・SOCIALの順で来るように書いているのでなぜこのようになるのかわかりません。どのように目的の配置になるように直せば良いのでしょうか？