【初めてサイト模写する人向け】シンプルなヘッダーの書き方を解説

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

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

今回はシンプルなヘッダーの書き方を順を追って解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

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

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

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

HTMLの解説

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

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

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

headerタグ

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

<header>
</header>

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

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

inner

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

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

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

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

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

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

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

innerについては以下の記事を参照下さい。

imgタグ

次はロゴです。

<header>
  <div class="inner">
    <div class="logo">
      <img src="画像のパス" alt="じゅんぺいブログ" />
    </div>
  </div>
</header>

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

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

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

altタグは画像の情報を書くので、ここではロゴに書いてある文字を書いておきましょう。

また、imgタグはdivタグやpタグで囲むのが一般的です。

pタグは文章中にある画像に対して使うので、今回はdivタグで囲みます。

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

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

<header>
  <div class="inner">
    <div class="logo">
      <img src="画像のパス" alt="じゅんぺいブログ" />
    </div>
    <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タグはテキストの先頭が『黒ポチ』なのに対してolタグは『番号』となります。

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

あとは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.

メインコンテンツがないので全体に色が付いたように見えますが、これはheaderだけの背景色になります。

innerのCSS

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

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

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

CSSのプロパティをアルファベット順に並べる方法は以下の記事を参照下さい。

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

他にはalign-items: center;とjustify-content: space-between;を書きます。

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

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

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

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

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

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

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

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

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

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

他にもmargin: 0 auto;という書き方で解説しているブログなどもありますが、上下を0にする必要はなく、margin-inline: auto;の方がスマートかと思います。

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

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

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

なので上下に10pxずつ余白を入れましたが、もちろんこの数値に決まりはありません。

それではザッと解説してきましたが、ここで一度画面を見てみます。

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

まだまだですね。

imgタグとulタグのCSS

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

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

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

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

imgタグを囲むタグ（今回はdivタグ）で幅を設定していれば、imgタグにはheight: auto;とwidth: 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名を付けていませんが、本当はulタグやliタグなど最初から全てにclass名を付けることをお勧めします。

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

以上になります。