HTML/CSS

    headerの作り方【学習メモ】

    サイト制作をする時に迷わないために。Web制作のメモです。

    headerの作り方。

     

    headerとは

    そもそもheaderとは。から。

     

    Webページの上部に表示する、サイトの案内看板のようなものです。

    • ロゴ
    • メニュー

    などで構成されます。

     

    左側にロゴ画像、右側にナビメニューを表示することが一般的です。

    尚、その下の画像部分も合わせることもあります。

     

    それでは、headerの作り方を解説します。

     

    headerの作り方

    ロゴ部分とメニュー部分を分けて作ります。

     

    ロゴの作り方

    • headerタグの中に、ページの肝であるh1タグを入れる。
    • h1をロゴ画像にして、ページのトップにリンクできるようにします。

     

    <header>
      <h1><a href=""><img src="" alt=""></a></h1>
    </header>

     

     

    メニューの作り方

    • リストタグをナビタグで囲みます。
    • メニューはリンクで飛ぶためにaタグにします。

     

    <header class="page-header wrapper">
        <h1><a href="index.html"><img src="images/logo.svg" class="logo" alt="カフェ ホーム"></a></h1>
        <nav>
            <ul class="main-nav">
                <li><a href="news.html">News</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    これでHTMLは完成です。

     

    次は、CSSで見た目を整えていきましょう。

     

    CSSの記述

    CSSでは、以下の5つをやります。

    1.headerの最大幅を指定する

    2.ナビメニューを横並びにする

    3.ナビメニューのリストの頭点を消す

    4.ロゴ部分とメニュー部分を横並びにする

    5.ナビメニューをマウスで選択した時に文字色を変える

     

    1.最大幅を指定する

    headerに最大幅を指定します。

    大きい画面で見た時に広がりすぎるのを防ぐためです。

    headerwrapperクラスをつけて「max-width」を1100pxくらいにします。

     

    2.ナビメニューを横並びにする

    ulに対して「display: flex;」を使います。

     

    3.ナビメニューのリストの頭点を消す

    ulに対して「list-style:none;」を指定します。

     

    4.ロゴ部分とメニュー部分を横並びにして両端に配置する

    ロゴ部分とメニュー部分をdivで囲み、クラスをつけます。

    クラスに対して「display: flex;」と「justify-content: space-between;」を指定します。

     

    これで、要素の横並びと両端に配置できます。

     

    5.ナビメニューをマウスで選択したときに、色を変える

    ulに対して、a:hover{color:を指定します。

     

    完成版はこちらです。

    .logo{
        width:210px;
        margin-top: 14px;
    }
    
    .main-nav{
        display: flex;
        font-size: 1.25em;
        text-transform: uppercase;
        margin-top: 34px;
        list-style: none;
    }
    .main-nav li{
        margin-left: 36px;
    
    }
    .main-nav a{
        color: #432;
    }
    .main-nav a:hover{
        color: #0bd;
    }
    .page-header{
        display: flex;
        justify-content: space-between;
    }
    .wrapper{
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4%;
    }

     

    これで、headerができます。

    おつかれさまでした!