模写修行メディア

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

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

👇 サンプル1

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

👇 サンプル2

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

👇 サンプル3

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

👇 サンプル4

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

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


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

↓コードも配布します。

【初学者・中級者の方】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターは全員現役エンジニア 👆

よくあるヘッダーのコーディング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で実装してました...汗

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材