コーディングの勉強を始めたばかりの方にとって、ヘッダーのコーディングは難しいと感じるかもしれません。
ヘッダーは要素を横並びにすることが多いので、FlexboxやCSS Gridの良い練習になります。
この記事では、定番ヘッダーデザインのコーディングを解説します。全4サンプル用意しました。まずは解説を見ずに挑戦してみてください。
👇 メンターやってます 👇
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。
👆 メンターやってます 👆
この記事の目次
【練習問題】下記のヘッダーデザインをコーディングしてみてください！
👇 サンプル1
👇 サンプル2
👇 サンプル3
👇 サンプル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
<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-listでgapプロパティを使用していますが、まだ使えないブラウザもあるので注意してください。
参考：Can I use
Flexboxの使い方は、下記の記事で詳しく解説しています。
Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！『お問い合わせ』だけ他のメニューとデザインが違うので、header01-item--contactを作っています。この辺りの書き方は、CSS設計を勉強するとわかります。CSS設計に関しては、下記の記事を参考にしてみてください。
書籍で勉強したい方は、下記の記事で紹介している3冊がおすすめです。
【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり！模写修行は、CSS設計の勉強にもなります。無料の教材もあるので、ぜひご利用ください。
サンプル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
<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--contactにmargin-left: auto;で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
<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で実装しようと思うと、正確に中央にならないので注意してください。
Positionを使っても正確に中央にできます。上記の3パターンは冒頭に載せた、ダウンロードできるコードに記載しています。
このCSS Gridを使った方法は、TAKさんのツイートで知りました。知らなかったら、多分Positionで実装してました...汗
独学に限界を感じていませんか？
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！
当メディア運営メンバーでメンターやってます！👉
詳しく見る
0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！