模写修行メディア

【HTML/CSS】定番ヘッダーデザインのコーディングを解説!全4サンプル紹介!

コーディングの勉強を始めたばかりの方にとって、ヘッダーのコーディングは難しいと感じるかもしれません。

ヘッダーは要素を横並びにすることが多いので、FlexboxやCSS Gridの良い練習になります。

この記事では、定番ヘッダーデザインのコーディングを解説します。全4サンプル用意しました。まずは解説を見ずに挑戦してみてください。

注意!
レイアウトを作る練習が目的なので、PCデザインだけ実装しています。SP版はご自身で作ってみてください。

コーディング教材作りました 🎉

こんな方におすすめです。

  • コーダー・フロントエンドエンジニアを目指している
  • 基礎学習を終えて実践的な"練習"がしたい
  • XDのデータを見ながらコーディングの練習をしたい
  • プロのコードを見たい
  • CSS設計やSCSSの勉強もしたい

無料の教材もあるので、ぜひ学習にご活用ください。

模写修行を見る

この記事の目次

【練習問題】下記のヘッダーデザインをコーディングしてみてください!

👇 サンプル1

よくあるヘッダーのコーディングサンプル1
サンプル1を見る

👇 サンプル2

よくあるヘッダーのコーディングサンプル2
サンプル2を見る

👇 サンプル3

よくあるヘッダーのコーディングサンプル3
サンプル3を見る

👇 サンプル4

よくあるヘッダーのコーディングサンプル4
サンプル4を見る

※ メニューが正確に中央になっているか気にしてみてください


目安時間:1つ15分以内で作成
※ 現役でweb制作をしている方は、1つ5分くらいで出来ると思います。

↓コードも配布します。

よくあるヘッダーのコーディング4サンプル(答え合わせ)

前の章で出した練習問題の解説をします。

この解説の書き方が唯一の正解ではないので、良い点は採用するなどして、活用してください。

リセットCSSと全体共通のスタイル

@charset "UTF-8";

/* ------------------------------ */
/* リセットCSS */
/* ------------------------------ */
html {
  color: #000;
  background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select,
button {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  *font-size: 100%;
  border-radius: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: inherit;
}

input,
textarea,
select {
  font-size: 16px;
}

textarea {
  resize: vertical;
  display: block;
}

button {
  padding: 0;
  cursor: pointer;
}

legend {
  color: #000;
}

main {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg {
  display: block;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------ */
/* 全体共通のスタイル */
/* ------------------------------ */
html {
  background-color: #fff;
}

body {
  line-height: 1.75;
  font-size: 16px;
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

.main {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
  • リセットCSS
  • 全体共通のスタイル

解説と同じようにやりたい方は、4サンプルのヘッダー全てで、上記のコードを読み込まれるようにしてください。

サンプル1

よくあるヘッダーのコーディングサンプル1
<header class="header01">
    <h1 class="header01-logo">LOGO</h1>

    <nav class="header01-nav">
        <ul class="header01-list">
            <li class="header01-item"><a href="">私たちの特徴</a></li>
            <li class="header01-item"><a href="">サービス</a></li>
            <li class="header01-item"><a href="">実績</a></li>
            <li class="header01-item"><a href="">ブログ</a></li>
            <li class="header01-item"><a href="">会社概要</a></li>
            <li class="header01-item header01-item--contact"><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
/* ------------------------------ */
/* sample01 */
/* ------------------------------ */

.header01 {
  padding: 16px 24px;
  background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header01-logo {
  font-weight: bold;
  font-size: 20px;
}

.header01-list {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 16px;
  font-weight: bold;
}

.header01-item--contact {
  background-color: #2486d1;
  color: #fff;
  padding: 6px 16px;
  border-radius: 6px;
}

1番定番なヘッダーのデザインです。

  • ロゴとメニュー
  • メニューの項目

↑これらを横並びにするため、Flexboxを使っています。

header01-listgapプロパティを使用していますが、まだ使えないブラウザもあるので注意してください。

参考:Can I use

Flexboxの使い方は、下記の記事で詳しく解説しています。

CSS Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!

『お問い合わせ』だけ他のメニューとデザインが違うので、header01-item--contactを作っています。この辺りの書き方は、CSS設計を勉強するとわかります。CSS設計に関しては、下記の記事を参考にしてみてください。

【実務向け】CSSのclass名の決め方(命名規則)はどうすればいいか?について解説

書籍で勉強したい方は、下記の記事で紹介している3冊がおすすめです。

【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり!模写修行は、CSS設計の勉強にもなります。無料の教材もあるので、ぜひご利用ください。

サンプル2

よくあるヘッダーのコーディングサンプル2
<header class="header02">
    <h1 class="header02-logo">LOGO</h1>

    <nav class="header02-nav">
        <ul class="header02-list">
            <li class="header02-item"><a href="">私たちの特徴</a></li>
            <li class="header02-item"><a href="">サービス</a></li>
            <li class="header02-item"><a href="">実績</a></li>
            <li class="header02-item"><a href="">ブログ</a></li>
            <li class="header02-item"><a href="">会社概要</a></li>
            <li class="header02-item header02-item--contact"><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
/* ------------------------------ */
/* sample02 */
/* ------------------------------ */

.header02 {
  padding: 16px 24px;
  background-color: #fafafa;
}

.header02-logo {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.header02-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 24px;
}

使うプロパティはサンプル1とほぼ変わりません。

サンプル3

よくあるヘッダーのコーディングサンプル3
<header class="header03">
    <h1 class="header03-logo">LOGO</h1>

    <nav class="header03-nav">
        <ul class="header03-list">
            <li class="header03-item"><a href="">私たちの特徴</a></li>
            <li class="header03-item"><a href="">サービス</a></li>
            <li class="header03-item"><a href="">実績</a></li>
            <li class="header03-item"><a href="">ブログ</a></li>
            <li class="header03-item"><a href="">会社概要</a></li>
            <li class="header03-item header03-item--contact"><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
/* ------------------------------ */
/* sample03 */
/* ------------------------------ */

.header03 {
  padding: 16px 24px;
  background-color: #fafafa;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.header03-logo {
  font-weight: bold;
  font-size: 20px;
}

.header03-list {
  display: flex;
  align-items: center;
  margin-left: 40px;
  gap: 32px;
  font-size: 16px;
  font-weight: bold;
}

.header03-item--contact {
  background-color: #2486d1;
  color: #fff;
  padding: 6px 16px;
  border-radius: 6px;
  margin-left: auto;
}

CSS Gridを使いました。grid-template-columnでロゴの大きさをautoで自動で決め、余ったスペースを1frで全てメニューに割り当てています。

CSS Gridの使い方は、下記の記事で詳しく解説しています。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

header03-item--contactmargin-left: auto;で1つだけ右寄せにする方法は、下記の記事で紹介しています。

Flexboxで最後の1つだけ右寄せや下寄せにする方法!

Flexboxを使っても下記のように書けば実装可能です。

/* ------------------------------ */
/* sample03 */
/* ------------------------------ */

.header03 {
  padding: 16px 24px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
}

.header03-nav {
  flex-grow: 1;
}

.header03-logo {
  // CSS Gridの時と全く同じ
}

.header03-list {
  // CSS Gridの時と全く同じ
}

.header03-item--contact {
  // CSS Gridの時と全く同じ
}

サンプル4

よくあるヘッダーのコーディングサンプル4
<header class="header04">
    <h1 class="header04-logo">LOGO</h1>

    <nav class="header04-nav">
        <ul class="header04-list">
            <li class="header04-item"><a href="">私たちの特徴</a></li>
            <li class="header04-item"><a href="">サービス</a></li>
            <li class="header04-item"><a href="">実績</a></li>
            <li class="header04-item"><a href="">ブログ</a></li>
            <li class="header04-item"><a href="">会社概要</a></li>
        </ul>
    </nav>

    <a href="" class="header04-contact">お問い合わせ</a>
</header>
/* ------------------------------ */
/* sample04 */
/* ------------------------------ */

.header04 {
  padding: 16px 24px;
  background-color: #fafafa;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header04-logo {
  font-weight: bold;
  font-size: 20px;
}

.header04-list {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 16px;
  font-weight: bold;
}

.header04-contact {
  background-color: #2486d1;
  font-weight: bold;
  display: inline-block;
  color: #fff;
  padding: 6px 16px;
  border-radius: 6px;
  margin-left: auto;
}

HTMLで『お問い合わせ』だけnavから分離させるのが、個人的に気持ち悪いのですが、CSSを複雑にしないために妥協しました。もし分離せずに綺麗に書ける方法があれば、ぜひ教えてください。

このデザインをFlexboxで実装しようと思うと、正確に中央にならないので注意してください。

よくあるヘッダーのコーディングサンプル4-02

Positionを使っても正確に中央にできます。上記の3パターンは冒頭に載せた、ダウンロードできるコードに記載しています。

このCSS Gridを使った方法は、TAKさんのツイートで知りました。知らなかったら、多分Positionで実装してました...汗

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードでさらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。

参考:コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!模写修行でプロになるための練習を!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材