🔖

webページ作成(HTML、CSS)〜ヘッダー編〜

2022/05/24に公開約4,800字

ヘッダー部分のHTMLを作成する

header内にもう一つ箱を作る

common.html
<body>
    <header class="header">
	    <div class="header-inner"></div>
    </header>
・・・(略)
</body>

ロゴを指定する

common.html
<body>
    <header class="header">
	    <div class="header-inner">
		    <img src="./images/・・・・" alt="ロゴ">
	    </div>
    </header>
・・・(略)
</body>

ロゴにトップページのリンクを貼る

common.html
<body>
    <header class="header">
        <div class="header-inner">
            <a class="header-logo" href="./index.html">
                <img src="images/・・・・" alt="ロゴ">
            </a>
                <div>

ナビゲーションを配置する

common.html
<body>
    <header class="header">
        <div class="header-inner">
            <a class="header-logo" href="./index.html">
                <img src="images/・・・・" alt="ロゴ">
            </a>
            <div class="header-site-menu">
                <nav class="site-menu">
                    <ul>
			<li><a href="./about.html">about</a></li>
                        <li><a href="./contact">contact</a></li>
                        <li><a href="./portfolio">portfolio</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

ヘッダー部分のCSSを書く

ヘッダーのサイズを指定する

common.css
.header-inner{
    max-width: 1200px;
    height: 110px;
    }

→レスポンシブデザインでは、幅をmax-widthで指定しておくとブラウザ幅に合わせて可変する表示にできるためmax-widthを使用する。

ヘッダーの位置を指定する

common.css
.header-inner{
    max-width: 1200px;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    }

ヘッダーをウェブブラウザの中央に指定する。
中央揃えにするには左右のmarginの値を「auto」にする。

ヘッダーエリアの左右の余白を指定する

common.css
.header-inner{
   max-width: 1200px;
   height: 110px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 40px;
   padding-right:40px; 
   }

paddingプロパティを使い、左右にそれぞれ40pxの余白を設定する

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

common.css
.header-inner{
  max-width: 1200px;
  ・・・(略)・・・
  display:flex;
  }

ロゴとナビゲーションを左右の端に寄せる

common.css
.header-inner{
   max-width: 1200px;
   ・・・(略)・・・
   justify-content: space-between;
   }

→アイテムの配置や感覚を指定するプロパティであるjustify-contentを使用する。
値は「アイテムを均等に配置し、最初のアイテムは先頭に、最後のアイテムは末尾に寄せる」という指定である「apace-between」を指定する。

ロゴとナビゲーションの上下の高さを揃える

common.css
.header-inner{
    max-width: 1200px;
    ・・・(略)・・・
    align-items: center;
    }

ロゴのサイズを指定できるようにする

common.css
.header-logo{
    display: block;
    width: 170px;
    }

→ロゴはa要素でマークアップされるいるため幅の指定が出来ない。
なのでdisplayプロパティで「block」を指定し、幅の指定ができるようにする。

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

common.css
.site-menu ul{
    display: flex;
    }

ナビゲーション項目の余白を設定する

common.css
.site-menu ul li{
    margin-left: 20px;
    margin-right: 20px;
    }

完成形

HTML

common.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ページの概要を記載します">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/toggle-menu.js"></script>
    <link href="css/common.css" rel="stylesheet">
    <title>テンプレ</title>
</head>
<body>
    <header class="header">
        <div class="header-inner">
            <a class="header-logo" href="./index.html">
                <img src="images/logo-header.png" alt="ロゴ">
            </a>
            <button class="toggle-menu-button"></button>
            <div class="header-site-menu">
                <nav class="site-menu">
                    <ul>
                        <li><a href="./about.html">about</a></li>
                        <li><a href="./contact">contact</a></li>
                        <li><a href="./portfolio">portfolio</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main class="main"></main>
    <footer class="footer"></footer>
</body>
</html>

CSS

common.css
@charset "utf-8";

*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol{
    list-style: none;
}

a{
    color: inherit;
    text-decoration: none;
}

body{
    font-family: sans-serif;
    font-size: 16px;
    color: #000000;
    line-height: 1;
    background-color: #ffffff;
}

img{
    max-width: 100%;
}

.header-inner{
    max-width: 1200px;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right:40px; 
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-menu-button{
    display: none;
}

.header-logo{
    display: block;
    width: 170px;
}

.site-menu ul{
    display: flex;
}

.site-menu ul li{
    margin-left: 20px;
    margin-right: 20px;
}

完成形見た目

Discussion

ログインするとコメントできます