Skip to main content

Headerを作る

目標#

  • 自分のウェブサイトに合わせたヘッダーメニューを作ること （ここでは、メニュー3個の例で説明します）

手順#

1. HTMLでヘッダーの枠組みを作る#

  1. <body>の一番はじめに、headerの<div>要素を作る
<body>     <div class="header">    </div></body>
  1. headerの<div>要素の中に<ul>要素を作って、中に<li>を使ってメニューを追加する
<body>    <div class="header">        <ul>          <li>Home</li>          <li>Blog</li>          <li>Photo Gallery</li>        </ul>    </div></body>

この時点では、下の様に黒点がありますね

2. CSSでレイアウトを調整する#

  1. style.cssで<li>要素に対して、点をなくす設定をする 点を無くしたい場合には、以下の様に指定します
li{  list-style:none;}
↑黒点が消えました
  1. <ul>要素に対して、display:flex;を設定して、要素を横並びにする 注意) display:flex; は、「横並びにしたい要素」の「一つ外側の要素(親タグ)」に書きます 今回、横並びにしたいのは<li>要素。<li>要素の外側は<ul>要素です。
ul{   display:flex; }
↑要素が横並びになりました。ですが余白がないので読みづらいですね
  1. <li>要素に対して、paddingを設定する パディング（余白）の設定は、下の様に4つの数値を使って上下左右の余白を指定することができます。

padding: 上 右 下 左;

li{   list-style:none;   padding:20px 30px 20px 30px; }
↑余白ができていい感じになりました！

3. CSSでデザインを変える#

  1. ヘッダーの色を変える ヘッダーの色を変える場合には、ヘッダーの<div>要素につけたclassである”header”を使って以下の様にCSSファイルで背景色（background-color）指定します。
.header{   background-color: rgb(15, 15, 80);   height: 70px;}

※heightを設定することでヘッダーの高さを設定しています。これをしないと、高さが0なので、背景色を設定しても反映されません。

  1. 文字の色を変える メニューの文字の色を変えるには、<li>要素のcolorを指定します。
li{   list-style:none;   padding:20px 30px 20px 30px;   color: white;   }

好みのヘッダーはできましたか？