【模写】iSaraサイト模写 ヘッダー編

isara 【プログラミング】

こんにちは、すずです。

現在、フロントエンドエンジニアの大定番「iSara」のサイト模写をやっています。
そこで得た知識をブログにアウトプットしていこうと思います。

では、早速参りましょう!

【模写】iSaraサイト模写 ヘッダー編

  • 制作時間:3H
  • 作業:ロゴとテキストを追加、ボタンを作成・追加、ヘッダーの固定化

制作時間が長めなのは、初回ということと、一度組んだソースを大幅に書き換えたからです。

つまづいた部分とその解決法

ロゴとテキストの下揃え

ロゴとテキストを、上記のように下揃えにしたかったのですが、これがなかなかできず苦戦しました。

下記のようにHTMLを書いて、

<body>
  <header>
    <img src=”./img/isaralogo.png” alt=”iSara” />
    <p>バンコクのノマドエンジニア育成講座</p>
  </header>
</body>

下記のようにCSSを当てると、

header img {
  width128px;
  height45px;
}

header p {
  margin0;
  displayinline-block;
  font-weight600;
}

こんな感じで、ロゴとテキストの下揃えがうまくいかず、ロゴが宙に浮いた状態になってしまいます。

これの解決法がこちら。

header img {
  width128px;
  height45px;
  vertical-align: bottom;
}

header p {
  margin0;
  displayinline-block;
  font-weight600;
}

ロゴに対して「vertical-align: bottom;」をつけることで、きれいな下端揃えになりました。

ヘッダーの固定化

iSaraのヘッダーは、上記のようにスライドしても固定化されるようになっています。
ヘッダーを固定化する方法がこちら。

HTMLをこんな感じで書いて、

<header>
  <div class=“header-in”>
    <img src=“./img/isaralogo.png” alt=“iSara” />
    <p>バンコクのノマドエンジニア育成講座</p>
    <div class=“btn-s”>
      <a href=“#”>お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>
</header>

CSSはこんな感じに書く。

header {
  height: 70px;
}

.header-in {
  position: fixed;
  top: 0;
  background-color#fff;
  width100%;
  padding15px 150px;
}

.header-in img {
  width128px;
  height45px;
  vertical-alignbottom;
}

.header-in p {
  margin0;
  displayinline-block;
  font-weight600;
}

.btn-s {
  width318px;
  height44px;
  background#da6b64;
  border1px solid #da6b64;
  border-radius25px;
  text-aligncenter;
  displayinline-block;
  floatright;
  margin-right300px;
}

.btn-s a {
  color#fff;
  text-decorationnone;
  font-size14px;
  letter-spacing2px;
  displayblock;
  height100%;
  padding-top10px;
}

headerに対して「height: 70px;」で高さをつける。
そして、headerの中のdiv要素(.header-in)に「position: fixed;」「top: 0;」をつけて要素をトップで固定する。

そうすることにより、見事ヘッダーが固定化されます。

ヘッダーが固定化されているかどうか見る方法として、

<header>
  <div class=“header-in”>
    <img src=“./img/isaralogo.png” alt=“iSara” />
    <p>バンコクのノマドエンジニア育成講座</p>
    <div class=“btn-s”>
      <a href=“#”>お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>
</header>
<div class=“bg”></div>

こんな感じでheaderの下に適当なdiv要素を書き、

bg {
  height1000px;
  background#333;
}

こんな感じで高さと背景色をつけてあげれば、検証することができます。

ちょっと見にくいですが、下にスライドしてもヘッダーが固定されているのが分かるかと思います。

まとめ

以上、iSaraサイト模写 ヘッダー編でした。

今回実装したのはヘッダーだけでしたが、個人的に結構頭を使いました。

これから模写する方にも、今回の記事が役立てばいいなと思っております。

最後までお読みいただき、ありがとうございました!