初心者きつねヘッダー1つ取っても、色々な形があるよね。
わいヘッダー1つ取っても、色々な形があるよね。
今回はHTMLとCSSを利用して、タイトルやロゴの真下にナビゲーションが配置されているヘッダーの作り方を紹介していきます。
もしかしたら
初心者たぬき結構難しそう…
と思っている人もいるかもしれませんが、思ったより簡単に実装できます。
タイトルやロゴの真下にナビゲーションが配置されているヘッダーの作り方
まずは、実例から。
See the Pen タイトルやロゴの真下にナビゲーションが配置されているヘッダー by わい (@y_programing) on CodePen.
HTMLはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>サイトロゴ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">制作実績</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<img src="https://drive.google.com/uc?export=view&id=10XkQIO_aX_lLo81KJFoyp1JHSjUAQ6Zi" alt="">
</body>
</html>※imgタグのsrc内はCodePenで表示される形式に変えていますので、自分で試す際は下のように画像パスを入力してください。
<!-- 絶対パスで指定 -->
<img src="https://example.comd/img/xxx.jpg" alt="">
<!-- 相対パスで指定 -->
<img src="./img/xxx.jpg" alt="">CSSはこちら。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background: #efefef;
}
header ul {
display: flex;
justify-content: space-around;
list-style: none;
border: 2px solid #000;
text-align: center;
}
header ul li {
flex-basis: 25%;
border-left: 2px solid #333;
}
header ul li:first-child {
border-left-color:transparent;
}
header ul li a {
text-decoration: none;
color: #000;
font-weight: bold;
}
h1 {
text-align: center;
}
img {
width: 100%;
height: auto;
}タイトルやロゴの真下にナビゲーションを配置するには、display: flex;
タイトルやロゴの真下にナビゲーションを配置するには、headerタグ内のulタグに対して「display: flex;」を適応させます。
header ul {
display: flex;
}これで、ul内のli要素をタイトルやロゴの下に均等に並べることができます。
通常サイトのタイトルはh1タグなどで設定することが多く、そのままだと左端によっていますが
h1タグもulタグもブロック要素なので、ulタグに対してdisplay: flex; を指定し、h1タグにtext-align: center; を当てれば
タイトルやロゴが真ん中に来て、その下にナビゲーションを配置できます。
header ul {
display: flex;
justify-content: space-around;
list-style: none;
border: 2px solid #000;
text-align: center;
}
h1 {
text-align: center;
}もし、サイトのタイトルを右寄せにしたかったら、text-align: right; にすればいいです。
h1 {
text-align: right;
}See the Pen タイトルやロゴの真下にナビゲーションが配置されているヘッダー（タイトル右寄せ） by わい (@y_programing) on CodePen.
最後に
ということで、今回はタイトルやロゴの真下にナビゲーションが配置されているヘッダーの作り方について解説してきました！
僕も参考になりそうなサイトを色々チェックすることがありますが、今回紹介したヘッダーの形は結構色々なサイトで見るので
ぜひ実装できるようになっておきましょう！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
コメント