ヘッダーを横側に固定してみた💡

さいしょに

今回はファーストビューでよく見られるヘッダーが横に固定されたデザインのコーディングについてまとめていこうと思います。

ヘッダーを横に固定する

ヘッダーを横に固定されたファーストビューのデザインです。よく見られるデザインだけど難しい印象がありどのようにすれば指定いいか悩み下記のソースコードのようなコーディングにしました。

<header>
    <div class="content">
        <h1><a href="#">サンプルサイト</a></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>
    </div>
</header>

<div class="image">
    <img src="./image/thumbnail_image01.png" alt="サムネイル">
</div>


<!-- styleタグで囲んで指定する -->
<style>

header{
    position:fixed;
    width:250px;
    height:100vh;
    top:0;
    left:0;
    backgrond-color:#fff;
}

.content{
    height:90%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

h1{
    margin-top:40px;
    font-size:30px;
    font-weight:bold;
}

ul{
    text-align:center;
}

li{
    margin-top:20px;
}

.image img{
    display:block;
    margin-left:250px;
    width:calc( 100vw - 250px );
    height:auto;
    aspect-ratio:auto;
}

</style>

 
<!-- Tailwind cssで指定する -->

<header class="fixed w-3xs h-screen top-0 left-0 bg-white">
    <div class="h-9/10 flex flex-col justify-between items-center">
        <h1 class="mt-10 text-3xl font-bold"><a href="#">サンプルサイト</a></h1>

        <nav>
            <ul class="text-center">
                <li class="mt-5"><a href="#">トップページ</a></li>
                <li class="mt-5"><a href="#">アバウトページ</a></li>
                <li class="mt-5"><a href="#">お知らせページ</a></li>
                <li class="mt-5"><a href="#">お問い合わせページ</a></li>
            </ul>
        </nav>
    </div>
</header>

<div>
    <img src="./image/thumbnail_image01.png" alt="サムネイル" class="block ml-72 w-[calc(100vw-250px)] h-auto aspect-auto">
</div> 

※今回は画像だけの表示となっています🙇‍♀️

最後に

今回はヘッダーを横側に固定したファーストビューのデザインのコーディングの方法をまとめました。実際にコーディングをしてみてどの要素とどの要素をフレックスで囲めばいいか悩むことがありました。

あと少しで2025年も終わるので風邪をひかないように健康に気をつけていこうと思います。