縦並びヘッダーの作り方｜ロゴの下にメニューを配置【CSS】

2025年12月2日2025年12月24日

初心者きつね

ヘッダー1つ取っても、色々な形があるよね。

わい

ヘッダー1つ取っても、色々な形があるよね。

今回はHTMLとCSSを利用して、タイトルやロゴの真下にナビゲーションが配置されているヘッダーの作り方を紹介していきます。

初心者たぬき

結構難しそう…

と思っている人もいるかもしれませんが、思ったより簡単に実装できます。

実装例

まずは、実例から。

See the Pen タイトルやロゴの真下にナビゲーションが配置されているヘッダー by わい (@y_programing) on CodePen.

HTMLはこちら。

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>

CSSはこちら。

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;
}

実装のポイント

ナビゲーションを横並びにする

タイトルやロゴの真下にナビゲーションを配置するには、headerタグ内のulタグに対して「display: flex;」を適応させます。

CSS

header ul {
    display: flex;
}

これで、ul内のli要素をタイトルやロゴの下に均等に並べることができます。

ロゴを中央揃えにする

通常サイトのタイトルはh1タグなどで設定することが多く、そのままだと左端によっていますが

h1タグもulタグもブロック要素なので、ulタグに対してdisplay: flex; を指定し、h1タグにtext-align: center; を当てれば

タイトルやロゴが真ん中に来て、その下にナビゲーションを配置できます。

CSS

header ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    border: 2px solid #000;
    text-align: center;
}

h1 {
    text-align: center;
}

メニューを均等配置にする

メニューを均等配置する場合は、ulに対してjustify-content: space-around; を当てます。

CSS

header ul {
    justify-content: space-around;
}

これらにより、ロゴを中央にしつつその下に均等にナビゲーションを配置することができます。

See the Pen タイトルやロゴの真下にナビゲーションが配置されているヘッダー（タイトル右寄せ） by わい (@y_programing) on CodePen.

【応用】ロゴを右寄せにする

もし、サイトのタイトルを右寄せにしたかったら、先ほどtext-align: center; にしていた部分を

text-align: right; にすればいいです。

CSS

h1 {
    text-align: right;
}

ulとh1のCSSをまとめて書くとこうなりますね。

CSS

header ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    border: 2px solid #000;
    text-align: center;
}

h1 {
    text-align: right;
}