グローバルナビゲーションを２段にするにはどうすればいいの？
そんな疑問にお答えします。
ヘッダーっていろんなパターンがあります。
そして知らないパターンと出会うと、結構時間がかかったりします。
今回はグローバルナビゲーションを２段にする方法を紹介します。
方法としてはいくつかあると思いますが、この記事ではFlexboxを使った実装を行います。
意外に簡単なのでぜひ一緒に作ってみましょう。
グローバルナビゲーションの２段表示の作り方
今回作るのはこちらです。
ロゴとグローバルナビゲーションが横並びであり、且つナビゲーションバーは２段表示となっています。
これをFlexboxを使って再現します。
補足
ヘッダーエリアとメインエリアをわかりやすくするために、ヘッダー背景に白(#fff)、メイン背景にグレー(#DDDDDD)を設定しています。
コード表示
先に全コードを貼っておきます。
あとで解説します。
<header class="header">
<div class="header-inner inner">
<h1 class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></h1>
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item"><a class="header-nav-item-link" href="#"><span>私について</span>ABOUT</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#"><span>サービス</span>SERVICE</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#"><span>制作実績</span>WORKS</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#"><span>ブログ</span>BLOG</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#"><span>お問い合わせ</span>CONTACT</a></li>
</ul>
</nav>
</div>
</header>.header {
background: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.header-inner {
display: flex;
align-items: center;
height: 100px;
}
.header-logo img {
width: 150px;
display: block;
max-width: 100%;
height: auto;
}
.header-nav {
margin-left: auto;
}
.header-nav-list {
display: flex;
}
.header-nav-item:not(:first-child){
margin-left: 40px;
}
.header-nav-item-link {
display: flex;
flex-direction: column;
text-align: center;
color: #333;
font-weight: bold;
font-size: 18px;
}
.header-nav-item-link span {
color: #053e62;
font-size: 14px;
}
コード解説
大枠の組み方はコチラ
【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】
とまったく同じです。
ですので今回はナビゲーションバーを２段にするところだけをピックアップして解説します。
.header-nav-item-link {
display: flex;
flex-direction: column;
text-align: center;
color: #333;
font-weight: bold;
font-size: 18px;
}
ここでFlexboxを使います。
flex-directionプロパティは子要素の並ぶ向きを指定します。
「flex-direction: column」は子要素を上から下に配置します。
よってメニューの日本語と英語を「flex-direction: column;」によって縦並びにします。
また「text-align: center;」で要素内のテキストを中央配置にしています。
以上になります。
投稿者 トシ
コメントを残す