【初めてサイト模写する人向け】良くあるヘッダーの書き方

Web制作


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回はProgateを卒業してサイトの模写を始めたけど、

ヘッダーからすでに1mmも進まない・・・

 

 

といった方に対する記事となります。

Progate卒業後の模写でヘッダーから1mmも進まなかったとは私のことです。


今回作るヘッダー

まずは今回作るヘッダーを見てみます(スマホで見る場合はResultを2回タップしてから下の0.5xをタップするとサイズ的にちょうどよく見れると思います)

 

See the Pen
ヘッダーサンプル
by junpei (@junpei-sugiyama)
on CodePen.

 

ロゴが左側にあって、メニューは右側という良くあるパターンです(デザインは気にしないで下さい)

 

HTMLの説明

コードを書いていく順番としては、最初にHTMLから書いてからCSSとなります。

以前ツイッターでCSSから書く人がいるというツイートを見たことがありますが、CSSというのは装飾なので普通はHTMLから先に書きます。

HTMLで書いたものをCSSで装飾していく、という感じです。

 

ヘッダータグ

まずはヘッダーなのでheaderタグを書きます。

<header>
</header>

 

これだけだと良く分かりませんが、順番としてはこうなります。

そしてこの中にどんどん書いていく感じになります。

 

inner

次はheaderの中にinnerというclassを付けたdivタグを入れます。

<header>
  <div class="inner">
  </div>
</header>

 

このinnerはすごい重要です。

何かというとheaderは画面の端から端までなのに対して、innerはロゴの左端からメニューの右端までとなります。

ロゴとメニューが画面の両端で良ければ不要なのですが、スマホで見るならまだしもパソコンのような大きい画面で見るとロゴとメニューの間がすごく開いてしまいます。

なのでここで最大幅を設定するためにinnerというclassを付けて囲む必要があります。

もちろんヘッダーメニュー以外のメインコンテンツもこのようなinnerを設定することが多いので覚えておきましょう。

 

imgタグ

次はロゴです。

<header>
  <div class="inner">
    <img class="logo" src="画像のパス" />
  </div>
</header>

cssを書かない限りHTMLは上と左から表示されていくので、まずは左にあるロゴを表示させるためにimgタグを書きます。

もしロゴを右に、メニューを左にしたい場合は先にメニューから書きます。

画像のパスはご自身の環境に合わせて書いて下さい。

 

navタグ、ulタグ、liタグ、aタグ

そしてメニューはまとめて書きます。

<header>
  <div class="inner">
    <img class="logo" src="画像のパス" />
    <nav>
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
    </nav>
  </div>
</header>

まずはnavタグですが、サイトの主要なナビゲーションメニューに対してnavタグを使います。

この主要なというのがポイントで、主要な物なので1ページに対して1ヵ所だけ使うのが基本です。

つまりページの最後にあるフッターにメニューがあっても、ヘッダーでnavタグを使っていたらフッターの方ではnavタグは使いません(ulタグなどはOK)

 

そしてメニューはulタグとliタグを使います。

このulタグとliタグはセットで使うのが基本で、liタグは何個書いてもOKです。

ulタグとは別にolタグというのもあり、ulタグはテキストの先頭が黒ポチなのに対して番号となります。

番号を付けて箇条書きにしたい時に使いますが、あまり使う機会はありません(特にヘッダーメニューで番号は付けないと思います)

 

あとはaタグです。

メニューはクリックしたらページ内スクロールやページ遷移したりするのが多いので、aタグを書きます。

hrefの中は遷移したいURLを書けばいいのですが、こういったサンプルのようなコードを書く時はページトップに遷移する # を使う事が多いです。

 

HTMLのみ完成

これでHTMLは書き終わったので、一度画面を確認してみます。

See the Pen
ヘッダーサンプル(HTMLのみ)
by junpei (@junpei-sugiyama)
on CodePen.


まだ完成形にはほど遠いですね。

HTMLはあくまでも素材を準備したにすぎないので、これからCSSを書いて整えていきます。

 


CSSの説明

それではこれからCSSを書いて完成に持っていきます。

これは1つ1つ変化を見ていくとちょっと大変なので、ある程度まとめてみていきたいと思います。

まずはデフォルトで設定されているbodyとulのmarginを0にしておきます。

body,
ul {
  margin: 0;
}

これはリセットCSSを書いておけばいいのですが・・・リセットCSSについてはここでは詳しく説明しないのでググってみて下さい。

簡単に言うとデフォルトで設定されているCSSを打ち消すものとなります。

デフォルトでCSSが設定されていると「何も書いてないのに余白がある・・・」という事が起こるからです。

 

そしてCSSもHTMLで書いた順番で書いていきたいと思います。

 

ヘッダーの背景色を設定

まずはヘッダーの背景色を書きます。

header  {
  background-color: #1cb4d3;
}

See the Pen
ヘッダー(背景色変更)
by junpei (@junpei-sugiyama)
on CodePen.


メインコンテンツがないので全体に色が付いたように見えます。

 

innerのCSS

次はinnerですが、ここで書くプロパティはたくさんあります。

.inner  {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 500px;
  padding: 10px 0;
}

プロパティの順番は私の場合はアルファベット順に書いているのですが、説明をアルファベット順でするとおかしくなるのでそこは無視して下さい。

まずはロゴとメニューを縦並びから横並びにする為に display: flex; を書きます。

Flexboxである、

  • align-items: center;
  • display: flex;
  • justify-content: space-between;

については以下の記事を参考にして下さい。

横並びレイアウトの定番 Flexboxでよく使うものをご紹介!

この display: flex; は子要素同士を横並びにするので、ここではimgタグとnavタグが該当します。

何が言いたいかというと、navタグの中にあるulタグなどは孫要素以下になるので影響なしということです。

 

次はロゴとメニューを両端に持っていくため、justify-content: space-between; を書きます。

これがないとロゴとメニューはくっついた状態で左寄せになります。

ただしこのままでは画面の両端になってしまうので、ここで先ほど説明したinnerでの最大幅を書きます。

それが max-width: 500px; になります。

これで画面の幅に関係なく、最大でもロゴの左端とメニューの右端は500px以下となります。

※実際のサイトではinnerは1000px前後が多いかと思いますが、今回はブログ用に狭くしています。

ただしこのinner部分はこのままだと左端に寄っているので、これを中央に持っていくために margin: 0 auto; を書きます。

これは要素を中央にしたい時に非常によく使うプロパティなので覚えておきましょう。

また要素を中央にしたいけど上下には余白を付けたい時などは、margin: 10px auto; と書いたりmargin: 10px auto 20px; と書いたりすることもあります。

要するに左右のmarginをautoにすると中央になるってことです。

※margin: 0 auto;ではなくmargin: auto;でも中央になります

 

あとは横並びにしたロゴとメニューの垂直方向の揃える位置を中心にするため align-items: center; を書きます。

 

そしてinnerのcss最後は padding: 10px 0; です。

これは何かというと、このままだとロゴの上下に余白がなく、窮屈になってしまうからです。

なので上下に 10px ずつ余白を入れました。

もちろんこの数値に決まりはありません。

 

それではここで一度画面を見てみます。

See the Pen
ヘッダー(innerまで完了)
by junpei (@junpei-sugiyama)
on CodePen.


まだまだですね。

 

imgタグとulタグのCSS

それではどんどんいきましょう。

とりあえずロゴのサイズ大きいので、これを小さくします。

.logo  {
  height: 100%;
  width: 100px;
}

今回は幅を100pxにしました。

あとは高さも100%にして縦横比が変にならないようにします。

 

次はulタグです。

ul  {
  display: flex;
  list-style: none;
}

メニューを横並びにしたいので、今度は横並びにしたいliタグの親要素であるulタグに display: flex; を書きます。

あとはulタグのデフォルトで表示される黒ポチを消したいので、list-style: none; と書きます。

この list-style: none; はリセットCSSで消してしまう事もあります。

 

それではここで画面を見てみます。

See the Pen
ヘッダーサンプル(ulまで完了)
by junpei (@junpei-sugiyama)
on CodePen.

今回は少ししか書いていませんが、一気に完成形に近付きました。

 

liタグとaタグのCSS

次はliタグのCSSです。

li  {
  background-color:#ffa500;
  border-radius: 20px;
}

まずはメニューボタンの背景色を書きます。

あとはボタンの角を丸めたいので、border-radius: 20px; と書きました。

この border-radius の数字は大きくするほど丸くなっていきます。

なので角を少し丸めるぐらいであれば 5px ぐらいでいいと思います。

 

次はaタグです。

li a  {
  color: #fff;
  display: block;
  font-size: 16px;
  padding: 5px 10px;
  text-decoration: none;
}

まずはフォントの色を白にしたいので、color: #fff; と書きます。

背景色が background-color なので文字色は font-color としたくなるかも知れませんが、colorだけで大丈夫です。

 

あとはフォントのサイズもここで設定できるので、今回は16pxとしました。

 

menuの下線も消したいので、text-decoration: none; で消します。

 

あと少し難しいのですが、aタグはインライン要素でこのままだとクリックする範囲がボタン全体ではなくテキスト部分だけとなってしまうので、これを親要素であるliタグと同じ範囲にするには display: block; と書きます。

 

あとはボタンを少し大きくしたいので、padding: 5px 10px; と書いて上下に5px 左右に10px 広げました。

liタグで幅や高さをpxで書いてもいいのですが、もしmenuというテキストの文字数が増えた時にpxで幅の指定をしているとはみ出てしまう可能性があります。

これを避けるためには幅は指定せず、テキストに対する余白にすることで回避することが出来ます(この辺は別の記事で書こうかと思います)

 

そして最後ですが、現在メニュー同士がくっついているので余白を付けたいと思います。

paddingは内側の余白なので、paddingだとボタンが膨らんでしまいます。

なのでここは外側の余白を付けるmarginとなります。

また左右の余白を付けるには margin-left margin-right を使います。

どちらを使ってもいいのですが、場所によってどちらを使うかコロコロ変わるのはよろしくないので、自分の中で基本的にどちらを使うか決めておいた方がいいでしょう(私は上下はmargin-top、左右はmergin-leftで統一しています)

今回は margin-left で余白を付けたいと思いますが、最初のmenu1は左側に余白を付ける必要がないので、liタグの最初以外の左側に余白を10px付けたいと思います。

li:not(:first-of-type)  {
  margin-left: 10px;
}

この :not(:first-of-type) が最初以外という意味になり、これ以外にも2番目のみ、偶数のみなど色んな指定の仕方が出来ます(これも別の記事で書こうかと思います)

これで全て書き終わったので、完成形をもう一度見てみましょう。

See the Pen
ヘッダーサンプル
by junpei (@junpei-sugiyama)
on CodePen.

こんなシンプルなヘッダーを作るだけで結構なボリュームある記事になってしまいました。

また今回はinnerとimgタグにしかclass名を付けていませんが、本当は最初から全てにclass名を付けることをお勧めします。

もしヘッダーから躓いた人の参考になれば何よりです。