今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、
CSS,JavaScriptについて解説したいと思います。
ヘッダーはホームページの根幹をなす部分で、
中規模以上のホームページを作る上でも、
統一性を保つ上で、大半が決まると言って良い部分です。
まず、CSSなし・HTMLのみの状態と同じ環境で、今回作るヘッダーを見てみましょう。
CSSなしの場合
一見すると、要素がただ縦に並べられているだけで、
どのような入れ子構造になっているのかも分かりません。
次にCSSを入れてみます。
CSSを入れる
PC版のヘッダーが整列されました。
HTML(WordPress)
末尾の赤いボタンを押して、
そのままWordPressのコードエディターに貼り付けてください。
<!-- wp:columns {"metadata":{"name":""},"className":"header-area"} -->
<div class="wp-block-columns header-area"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"metadata":{"name":""},"className":"inner"} -->
<div class="wp-block-columns inner"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"Logo"} -->
<p class="Logo">Logo</p>
<!-- /wp:paragraph -->
<!-- wp:list {"className":"list-for-pc"} -->
<ul class="list-for-pc"><!-- wp:list-item {"className":"top nature"} -->
<li class="top nature"><a href="#">top</a><span></span></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">News</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Works</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Gallery</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">About</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Contact</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/cart.png"></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/facebook.png"></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/camera.png"></a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"metadata":{"name":""},"className":"sp"} -->
<div class="wp-block-columns sp"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:list {"className":"toggle-list"} -->
<ul class="toggle-list"><!-- wp:list-item {"metadata":{"name":""},"className":"menu"} -->
<li class="menu">Menu</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">News</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Works</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Gallery</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">About</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Contact</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"last"} -->
<li class="last"><a class="shop" href="#"></a>
<a class="insta" href="#"></a>
<a class="facebook" href="#"></a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
CSS
ul{padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.article ul li{margin: 0;}
.header-area .Logo{
margin: 0;
text-align: center;
}
.header-area .inner ul{
display: flex;
justify-content: space-around;
width: 100%;
}
.header-area .inner ul li{
position: relative;
}
.header-area .inner ul li:hover a,
.header-area .inner ul .top.nature a{
color: #ff1000;
}
.header-area .inner ul .top span{
position: absolute;
bottom: 0;
left: -10%;
height: 2px;
background-color: #ff1000;
}
.header-area .inner ul .top span{
width: 120%;
transition: all .2s;
}
.header-area .inner ul li a{
color: #000;
font-size: 13.5px;
}
.header-area .inner ul li img{
width: 17.5px;
}
.header-area .sp{
display: none;
}
.header-area .sp ul{
width: 275px;
margin: auto;
padding: 0;
}
.header-area .sp ul li{
display: block;
line-height: 0;
text-align: center;
border-bottom: #666 1px solid;
}
.header-area .sp ul li:not(.menu){
display: none;
}
.header-area .sp ul li:not(.menu).active{
display: block;
}
.header-area .sp ul a,
.header-area .sp ul .last,
.header-area .sp ul .menu{
display: block;
width: 275px;
height: 38px;
background: #000;
line-height: 38px;
color: #fff;
}
.header-area .sp ul .menu{
position: relative;
}
.header-area .sp ul .menu::before,
.header-area .sp ul .menu::after{
position: absolute;
content: "";
width: 26.87px;
height: 26.87px;
background-color: #fff;
transform: rotate(45deg);
}
.header-area .sp ul .menu::before{
top: 5.565px;
left: -13.435px;
}
.header-area .sp ul .menu::after{
top: 5.565px;
right: -13.435px;
}
.header-area .sp ul .last a{
display: inline-block;
width: 36px;
height: calc(100% - 1px);
margin: 0 5px;
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
}
.header-area .sp .shop{
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/cart-2.png");
}
.header-area .sp .insta{
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/camera-2.png");
}
.header-area .sp .facebook{
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/facebook-2.png");
}
@media screen and (max-width:781px){
.header-area .inner .list-for-pc{display: none;}
.header-area .inner > div{justify-content: center;}
.header-area .inner{
top: 100px;
left: 0;
width: 100%;
}
.header-area .sp{
display: block;
}
}
CSSではpxの小数点以下を細かく設定していますが、基本的に、
1px未満の解像度は存在しません。
ただし、デベロッパーツールで要素の大きさを測った場合、
小数点第二位まで表示されますが、これは内部的な数字です。
現段階のヘッダーはPC版(専用)ですが、多くのサイトのヘッダー部分は、
ul要素で作るのが恒例と言えます。
モバイル版も、縦並びのul要素で作られる事が多いようです。
今回はWordPressの機能にあるリスト(ul要素)で作成しました。
ul要素はフレックスボックスと相性が良く、
justify-content: space-around;を設定すれば、li要素の横幅に関係なく、
要素と要素の間および左右端に、一定のスペースを入れてくれます。
ちなみに、主流がfloat(要素を浮かせる)からflexboxに移行したのは2015年頃からで、
機能としては新しいです。
次回予告
次回は、JavaScriptによる装飾とモバイル版について解説したいと思います。