弊社で作った教材がセール中！
コーディングの勉強を始めたばかりの方にとって、ヘッダーのコーディングは難しいと感じるかもしれません。
ヘッダーは要素を横並びにすることが多いので、FlexboxやCSS Gridの良い練習になります。
この記事では、定番ヘッダーデザインのコーディングを解説します。全4サンプル用意しました。まずは解説を見ずに挑戦してみてください。
さらに実践的な練習ができるUdemy講座を作りました。Figmaのデザインを忠実に再現しながら、コーディングする方法を学べます。下記のリンクから購入すれば、割引価格で購入できます。
【セール中】弊社で出したUdemy教材
👇 メンターやってます 👇
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
特にこんな方におすすめ！
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
まずは、下記リンクから個別ガイダンスへお越しください。
👆 メンターやってます 👆
この記事の目次
【練習問題】下記のヘッダーデザインをコーディングしてみてください！
目安時間：1つ15分以内で作成(※ 現役でweb制作をしている方は、1つ5分くらいで出来ると思います。)
コードは、下記のGitHubリポジトリから確認できます。
サンプル1
サンプル2
サンプル3
サンプル4
※ メニューが正確に中央になっているか気にしてみてください。
基礎学習後...迷子になっていませんか？
Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。
転職成功者や副業・フリーランスデビューした方も出ています。
【解説】よくあるヘッダーのコーディング4サンプル
前のセクションで出した練習問題の解説をします。
この解説の書き方が唯一の正解ではないので、良い点は採用するなどして、活用してください。
サンプル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>
.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-weight: bold;
}
.header01-item--contact a {
display: block;
background-color: #2486d1;
color: #fff;
padding: 8px 20px;
border-radius: 6px;
}
1番定番なヘッダーのデザインです。
ロゴとメニュー / メニューの項目を横並びにするため、Flexboxを使っています。
これができなかった方は、Flexboxに関する基本的な知識がまだないと思うので、下記の記事で学習してみると良いです。
Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！『お問い合わせ』だけ他のメニューとデザインが違うので、header01-item--contactを作っています。この辺りの書き方は、CSS設計を勉強するとわかります。CSS設計に関しては、下記の記事を参考にしてみてください。
書籍で勉強したい方は、下記の記事で紹介している3冊がおすすめです。
【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり！サンプル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>
.header02 {
padding: 16px 24px;
background-color: #333;
color: #fff;
}
.header02-logo {
text-align: center;
font-weight: bold;
font-size: 20px;
}
.header02-list {
display: flex;
justify-content: center;
gap: 32px;
font-weight: bold;
margin-top: 24px;
}
メニューは、サンプル1同様にFlexboxを使って横並びにしています。
サンプル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>
.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-weight: bold;
}
.header03-item--contact {
margin-left: auto;
}
.header03-item--contact a {
display: block;
background-color: #2486d1;
color: #fff;
padding: 8px 20px;
border-radius: 6px;
}
CSS Gridを使いました。grid-template-columnでロゴの大きさをautoで自動で決め、余ったスペースを1frで全てメニューに全て割り当てています。
CSS Gridの使い方は、下記の記事で詳しく解説しています。
【CSS Grid入門】図解も交えて使い方を詳しく解説！header03-item--contactにmargin-left: auto;で1つだけ右寄せにする方法は、下記の記事で紹介しています。
Flexboxを使っても実装可能です。このデザインであれば、FlexboxでもCSS Gridでも大差ありません。
サンプル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>
.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-weight: bold;
}
.header04-contact {
display: block;
background-color: #2486d1;
font-weight: bold;
color: #fff;
padding: 8px 20px;
border-radius: 6px;
margin-left: auto;
}
『お問い合わせ』だけnavから分離させるのが、少し気持ち悪いのですが、CSSを複雑にしないために妥協しました。
このデザインをFlexboxで実装しようと思うと、正確に中央にならないので注意してください。
Positionを使ってもできます。
コーディングの練習は数をこなすこと！
今回の記事のheaderが作れなかった方・時間がかかった方は、まだ練習不足です。色々なパーツを作ってみることで、理解が深まります。
下記のUdemy講座では、Figmaのデザインを忠実に再現しながら、コーディングする方法を学べます。ぜひご覧ください。
【セール中】弊社で出したUdemy教材
基礎学習後...迷子になっていませんか？
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
下記のような、基礎学習後にやるべきことがわからず、迷子状態になっている方に特におすすめです
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
メンターは、全員が現役のプロです。駆け出しの方やメンターだけをやっている方はいません。
少数精鋭で運営しているため、受け入れ人数に限りがあります。本気でWeb制作業界を目指している方は、ぜひご検討ください。
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(4期目)。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミングなど、幅広くやってます！
弊社で作った教材がセール中！
Web制作会社が運営する学習支援サービス👉
詳しく見る
基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！