ポートフォーリオサイト制作（ヘッダーのCSSコーディング）

こんにちは、コンスキです。

今回は、前回までに出来上がったサイトのスタイルを変更することでデザインを整えていきます。

reset.css
style.css
- ヘッダー
おわりに

reset.css

ブラウザごとの見た目を統一するためにまずリセットCSSと呼ばれるものを有効にします。

例えば、「Google Chrome」と「Safari」での見た目の違いを見てみます。

箇条書きの中黒や「お問い合わせ」と書いてあるボタンなど、少しですが見た目の違いがあります。

異なるブラウザ間で要素の配置やボタンのデザインが変化してしまうと、もしかすると一部のブラウザを使って見てくれている人にとっては文字が読みづらかったり、ボタンがボタンであると気が付きにくかったりするかももしれません。

そのため、念の為CSSで見た目を統一させておきます。

リセットCSSはインターネット上に公開されているこちらを使いました。

index.htmlの中で読み込む他のCSSを読み込むコードよりも上に、このリセットCSSを読み込むためのコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Yuuki's Portfolio</title>
</head>

リセットCSSによってフォント以外はほとんど同じ見た目になったことがわかると思います。

style.css

「style.css」というファイルにサイトの見た目を整えるためのスタイルを書いていきます。

ヘッダー

ヘッダーは2つのパーツに分けることができます。

1つ目はサイトのロゴとナビゲーションバーがある「ヘッダートップ」です。

2つ目はキャッチフレーズやお問い合わせボタンを含んでいる「ファーストビュー」です。

この二つのうちヘッダートップにはある仕掛けをつけます。

その仕掛けとはページを下にスクロールしていっても、ヘッダートップが常に画面の上側にくっ付いているようにするものです。

この追従をさせるには、色々な方があると思いますが「position: fixed;」を使って追従させてみます。

<header>
  <!-- ヘッダートップ -->
  <div id="header_top">
    <h1 id="logo"><img src="asset/img/logo.png" alt="" width="172" height="28"></h1>
    <nav id="navigation_bar_container">
      <ul id="navigation_bar">
        <li class="nav_item"><a href="" class="nav_text">About</a></li>
        <li class="nav_item"><a href="" class="nav_text">Works</a></li>
        <li class="nav_item"><a href="" class="nav_text">Blog</a></li>
        <li class="nav_item"><a href="" class="nav_text" id="nav_text_last">Contact</a></li>
      </ul>
    </nav>
  </div>
  <!-- ファーストビュー -->
  <div id="first_view">
    <div id="fv_tagline">
      <div id="fv_tagline">
        <div id="fv_tagline_main_container">
          <p class="fv_tagline_main">Connections with</p>
          <p class="fv_tagline_main">Someone</p>
        </div>
        <div id="fv_tagline_sub_container">
          <p class="fv_tagline_sub">気軽に頼めるサイト制作。</p>
          <p class="fv_tagline_sub">忘れた消しゴムを借りるように。</p>
        </div>
      </div>
      <div id="fv_contact_button_container">
        <button id="fv_contact_button">お問い合わせ</button>
        <div id="more_info_container">
          <object id="info_icon" data="asset/img/info_icon.svg" type="image/svg+xml"></object>          
          <p id="more_info">お問い合わせに関する情報はこちら</p>
        </div>
      </div>
    </div> 
    <div id="fv_img_container"><img src="asset/img/first_view.png" alt="" id="fv_img" width="764" height="271"></div>
  </div>
</header>

/* ヘッダートップ */
#header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 64px;
  padding: 0 43px 0;
  background-color: #FFFFFF;
}
#navigation_bar_container {
  height: 18px;
}
#navigation_bar {
  display: flex;
  margin: auto 0 auto;
}
.nav_item {
  height: 18px;
}
.nav_text {
  margin-right: 46px;
}
#nav_text_last {
  margin-right: 0;
}
#first_view {
  margin-top: 64px;  //ヘッダートップの高さが64pxであるため、margin-topも64pに設定しています。
}

/* ファーストビュー */
#first_view {
  display: flex;
  padding: 85px 110px;
  background-color: #C9E8DE;
}
#fv_tagline_main_container {
  margin-bottom: 18px;
}
.fv_tagline_main {
  font-size: 52px;
}
#fv_tagline_sub_container {
  margin-bottom: 153px;
}
.fv_tagline_sub {
  font-size: 18px;
}
#fv_contact_button {
  margin-bottom: 18px;
  padding: 15px 30px;
  border-radius: 30px;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 18px;
}
#fv_contact_button:hover {
  opacity: 0.7;
}
#more_info_container {
  display: flex;
  align-items: center;
}
#info_icon {
  width: 22px;
  margin-right: 5px;
}
#more_info {
  font-size: 18px;
}
#fv_img_container {
  margin-top: 170px;
}

画面上部に固定したい要素に「position: fixed;」を効かせるだけだと、その要素の次にある要素が下に潜り込んでしまいます。

潜り込まないようにするために、次の要素に画面上部に固定する要素の高さのmargin-topを効かせています。

スタイルを効かせたヘッダー部分は次のように表示されます。