Web制作

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

まずは今回作るヘッダーを見てみます(スマホで見る場合は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については以下の記事を参照下さい。

参考記事
【CSS】インナー幅を設定してコンテンツを中央寄せさせる方法
【CSS】インナー幅を設定してコンテンツを中央寄せさせる方法

続きを見る

 

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のプロパティをアルファベット順に並べる方法は以下の記事を参照下さい。

参考記事
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説

続きを見る

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

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

  • align-items: center;
  • display: flex;
  • justify-content: space-between;
参考記事
【CSS】横並びレイアウトの定番『Flexbox』の使い方を解説
【CSS】横並びレイアウトの定番『Flexbox』の使い方を解説

続きを見る

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

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

 

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

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

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

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

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

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

ただしこの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-leftmargin-rightを使います。

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

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

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

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

要素の指定方法については以下の記事を参照下さい。

参考記事
【CSS】何番目系の要素を指定する方法まとめ【サンプル付きで解説】
【CSS】何番目系の要素を指定する方法まとめ【サンプル付きで解説】

続きを見る

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

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

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-