ナビゲーションバーを見た目を整えて、レスポンシブにする
before
after
レスポンシブ
コード
index.html
<body>
<nav>
<a href="#home">Home</a>
<ul>
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
</ul>
<a href="#signup">Sign Up</a>
</nav>
<h1>Media Queries</h1>
</body>
style.css
nav {
font-size: 1.5em;
display: flex;
/* スペースを均等に開ける */
justify-content: space-around;
}
ul,
li {
display: inline;
margin: 0;
padding: 0;
}
ul {
/* border: 1px solid red; */
display: flex;
flex: 1;
max-width: 40%;
justify-content: space-around;
}
/* 中型デバイス（768px以上のとき） */
@media (max-width: 768px) {
nav,
ul {
flex-direction: column;
align-items: center;
}
}
ポイント
【見た目】ナビゲーションバーのスペースを均等に開ける
navとul
justify-content: space-around;
【見た目】要素のスペースを大きくして余白を持たせる
ul
flex: 1;：flex-glowと同じ
max-width: 40%;：`flex: 1;だけだと大きすぎるので制限
ここまでが見た目
【レスポンシブ】横並びから縦並びにする
flex-direction: column;：主軸を縦にする
align-items: center;：センターに並べる