【CSS】とても簡単なヘッダーの作り方

headerタグでヘッダーを準備する

HTMLにはheaderタグが準備されています。まずはheaderタグを書きましょう。header内にはまずcontainerを準備し、さらにその中にロゴを入れるlogo（divタグ）を準備しましょう。また、右側には、ログインボタンを設置します。

<header>
      <div class="container">
        <div class="logo-left">
          <img class="logo" src="〇〇〇.png">
        </div>
        <div class="login-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
 </header>

CSSで整える

まずはheader全体をcssで整えます。白色のheaderで高さは65px、幅は100%とします。

header {
  height: 65px;
  width: 100%;
  background-color: rgba(255,255,255,0.8);
}

ログイン

divタグで縦に並んでしまっているので、左右に配置します。headerの高さは65pxに指定しているので、「ログイン」の文字やlogo画像をを65pxの真ん中に配置するには、line-height:65px;と記入するだけで良いです。

divタグは、基本的に縦に並んでしまうため、floatを使って左右に配置してやります。floatは「浮く」という意味ですが、div要素を浮かして移動させることイメージです。

header {
  height: 65px;
  width: 100%;
  background-color: rgba(200,200,200,0.5);
}
.logo {
  width: 200px;
  line-height:65px;
}

.logo-left {
  float: left;
  display:block; 
  line-height:65px;
}

.login-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
}

.login-right a{
  line-height:65px;
  padding:0px 20px;
  display:block;
}

ログイン

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

画面をスクロールしてもヘッダーが絶えず表示されるようにするためには、position:fixedを使用します。指定した値の地点に要素を固定することができます。

また、ヘッダーが他の画像よりも下にきてしまうことがあります。これを防ぐためにはz-indexを使います。この値が高ければ高いほど、要素を表面に表示します。z-indexは必ずpositionと一緒に使用します。

header{
  position:fixed;
  top:0px;
  z-index:10;
}