今回は個人的にこれから使いそうだと思ったheaderのテンプレを作りました。
仕事で使う機会があれば、是非コピペしてコーディングを効率化していこうと思います。
HTML
<header class="header">
<div class="header__title">
<a href="">
<h1>プログラミング</h1>
</a>
</div>
<div class="header__navmenu">
<ul>
<li>
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
<li>
<a href="">PHP</a>
</li>
</ul>
</div>
</header>
CSS
.header {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
&__title {
a {
color: black;
h1 {
font-size: 2rem;
}
}
}
&__navmenu {
ul {
display: flex;
li {
&:not(:first-child) {
margin-left: 35px;
}
a {
display: inline-block;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: black;
&:hover {
background-color: #000;
color: #fff;
}
}
}
}
}
}
