【絶対挫折しない】よくあるグローバルメニューを制覇する【コードコピペOK】
スキプラです。
皆さん、案件獲得に向けたポートフォリオ作成は順調ですか？
ポートフォリオを作ってる時、こんな悩みにぶち当たりませんか？
✅ グローバルメニューがうまく左右に配分できず、挫折
✅ ロゴの高さによって、メニューの文字と合わず、挫折
✅ ホバーした時に「今いるメニューが分かりやすいように」下線引きたいけど、難しくて、挫折
✅ グローバルメニューを横型にしてくれ。と言われた途端に挫折
これらは、よくあるグローバルメニューの作り方を覚えちゃえば簡単に乗り越えられます。
今回のnoteでは、【コードコピペOK】にしてます。
ので、自分が作りたいグローバルメニューメニューを選んで、その中からほしいものをまずはコピペで作って、内容を理解してく。でもOKです。
まずは動くものを作って、ページ全体のイメージを作って、細かい部分を徐々に修正していく。がページ作成における極意です。
(最初から細部にこだわると挫折します。笑)
このnoteの特徴
今回は、もう1つの特徴として、挫折させないために、実際にゼロベースから作っていって、よくぶつかる壁を一緒に体験しながら、その乗り越え方を体験していく劇場型グローバルメニュー作成講座になっています。
同じ道を歩んでいくので、挫折しないように工夫されています。
※ このnoteは随時アップデート予定なので、分からないことは気軽にTwitterで聞いてください。
完成形のイメージ
正直、この5パターンをマスターしておけば、だいたいのグローバルメニューは攻略できます。
グローバルメニューがマスターできると、HP作成の第一歩が一気に進められるので、進んでる感を得られて、最高に進みが高速化できます！
まずは【1. 一般的なヘッダー】から作ってみて、作り方を掴んでいってください。
コピペでも、写経でも良し。まずは手を動かして、実感してみましょう！
1. 一般的なヘッダー
まずは、ロゴも文字列で、メニューがいくつかあるものを作ってみましょう。
最初は、cssを一切気にせず、HTMLだけ組みます。
今回は、ロゴ部分と、メニュー部分を囲う外側のdivの大きく3つのdiv要素で構成しました。
<div class="header1">
<div class="header-logo">LOGO</div>
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>するとこんな感じになりますね。
まずは、ロゴと、メニューの部分を横並びにして、両方を両端に並べて見ましょう。
ここでは、 【display: flex】を使って、この2つのdiv要素を横並びにして、さらに【justify-content: space-between】を指定して両方を両端に配置します。
(何度も言いますが、背景色や文字色・paddingなどの細かい装飾は後回しです)
/** 1. 一般的なヘッダー */
.header1 {
/* divを横並びにして、.header-logoと.header-menuを等間隔に左右に配置*/
display: flex;
justify-content: space-between;
}そうすると、このようにまずは2段になってしまっていたロゴとメニューを1段に表示できて、さらに左右に配置できました。
さて、ここからようやく詳細を少しずつ詰めていきます。
まずは、グローバルメニューの背景色をつけて、文字色を指定します。
/** 1. 一般的なヘッダー */
.header1 {
/* divを横並びにして、.header-logoと.header-menuを等間隔に左右に配置*/
display: flex;
justify-content: space-between;
background: #F3F0EA;
padding: 30px;
color: #707070;
}だいぶいい感じになってきました。
最後に、このメニュー部分のaタグも色をつけて、少しpaddingで両端の感覚を広く取ってあげましょう。
aタグはデフォルトではこのように青色になってしまい、いくらcolorを指定しても色は変わりません。
まずは、【text-decoration: none】でaタグの青色の装飾をなくして上げましょう。
.header1 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}すると、あっという間に一般的なグローバルメニューが完成しました。
簡単でしたね！
最後に完成形のコードを書いておきます。
<div class="header1">
<div class="header-logo">LOGO</div>
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>/** 1. 一般的なヘッダー */
.header1 {
/* divを横並びにして、.header-logoと.header-menuを等間隔に左右に配置*/
display: flex;
justify-content: space-between;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header1 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}2. メニューをホバーした時に下線ができる。
ホバーというのは、カーソルを合わせた時の挙動のことです。
よく、メニューにカーソルをあわせると、今そのメニューを選択中なんだ。ということが分かりやすいように、色が変わったり下線が表示されたりしますね。
今回は、下線を引いてあげて、分かりやすくしていきます。
これも簡単なので覚えちゃいましょう。
まずは、先程と同じHTMLを用意します。class名をheader2として分かりやすくしています。
<div class="header2">
<div class="header-logo">LOGO</div>
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>CSSも先程と同じところまでは用意します。
/** 2. メニューをホバーした時に下線ができる */
.header2 {
display: flex;
justify-content: space-between;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header2 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}ここまでは全く同じです。
では、ホバーした時に下線が出るようにしましょう。
【ホバーした時】を表現するには、CSSで【a:hover】のように、aタグがホバーされた時。として指定します。
.header2 .header-menu a:hover {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}これで、ホバーした時に、対象のaタグの下が赤っぽくなります。
いい感じです。ただ、お客さんによっては、「遷移してきた時にそのページは赤くなっててほしいな」という依頼が来たりします。
これは、ユーザーに常に今どこにいるのか。次にどこに行こうとしてるのかを意識させる本来的なグローバルメニューの役割を意識した依頼です。
こういう時の常套手段としては、【active】というクラスを用意して、このクラスにも先程のhoverと同じCSSを指定してあげる方法があります。
<div class="header2">
<div class="header-logo">LOGO</div>
<div class="header-menu">
<a href="#" class="active">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>今回は、TOPにactiveクラスを割り当ててみました。
CSSも、activeクラスが当たってるaタグにもホバーした時と同じデザインが当たるように指定しましょう。
.header2 .header-menu a:hover,
.header2 .header-menu a.active {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}cssでは、【,】で区切ることで、【xxxxxとxxxxxにこのデザインを当てる】が実現できます。
こうして、TOPに最初から赤い下線を引くことができました。
これも簡単ですね！
これも完成形を書いておきます。
<div class="header2">
<div class="header-logo">LOGO</div>
<div class="header-menu">
<a href="#" class="active">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>/** 2. メニューをホバーした時に下線ができる */
.header2 {
display: flex;
justify-content: space-between;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header2 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}
.header2 .header-menu a:hover,
.header2 .header-menu a.active {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}どんどん行きましょう。
3. ロゴが画像になっている場合。
以前、僕が病院のHPを作ってみた時に作ったロゴを使ってみましょう。
まぁまぁ大きな画像ですが、このまま利用してみますね。
そうするとよくある【画像が大きすぎて、表示が訳わからなくなる】問題にぶつかります。
まずは、HTMLで、ロゴ部分を文字から画像に変えてみます。
<div class="header3">
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>CSSは先程までと同じものを設定します。
.header3 {
display: flex;
justify-content: space-between;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header3 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}
.header3 .header-menu a:hover,
.header3 .header-menu a.active {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}こうするとどうなるでしょうか。
はい。想定どおりｗ
画像が大きすぎてデザインが大きく崩れてしまいました。
だいたい、こういう時に画像を小さくする方法などを調べだして、挫折しがちです。
画像に関しては、【imgタグの親要素のdivタグにwidthを指定】【imgタグにはmax-widht:100%を指定する】の2つだけ覚えておけばこの面倒な問題はすぐ解決できます。
では早速CSSを追加します。
.header3 .header-logo {
width: 100px;
height: auto;
}
.header3 .header-logo img {
max-width: 100%;
}まさに上で言った2つを指定してます。
するとどうなるでしょうか？
一気に良い感じになりました。
でも、メニューの文字列が、ロゴの上に合っていて、違和感がありますね。
こういう時、クライアントからは【ロゴの高さとメニューの高さを合わせて、メニューがロゴの中央に合わさるようにしてほしい】という依頼が来ることが多いです。
一見難しそうな問題です。
僕はよく【vertical-align:middle】を指定して中々うまく行かなかったり、【line-height】を指定してよくわからなくなって挫折してました。笑
でも、実はこれめっちゃ簡単に解決できるんです。
今は、このヘッダーは【.header-logoと.header-menu】の2つを【display:flex】で横並びにしてます。
この場合、flexには【align-items】という設定で高さをどうするかが簡単に指定できます。
ちなみに【align-items:center】とすると、flexで指定した領域全体を中心に合わせて高さを調整してくれます。
やってみましょう。
.header3 {
display: flex;
justify-content: space-between;
/* これで、ロゴの高さにメニューをあわせる */
align-items: center;
background: #F3F0EA;
padding: 30px;
color: #707070;
}【align-items:center】を追加しただけです。
おお、いい感じに中央に寄せてくれました。簡単ですね。
ではこれも完成形のコードを記載しておきます。
<div class="header3">
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>** 3. ロゴが画像で高さを中央寄せ */
.header3 {
display: flex;
justify-content: space-between;
/* これで、ロゴの高さにメニューをあわせる */
align-items: center;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header3 .header-logo {
width: 100px;
height: auto;
}
.header3 .header-logo img {
max-width: 100%;
}
.header3 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}
.header3 .header-menu a:hover,
.header3 .header-menu a.active {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}
4. ロゴがメニューの中心にある場合
たまに、ロゴがメニューの中心にあって、企業イメージをPRしている会社がありますね。
これも実は、flexを使ってしまえばめちゃくちゃ簡単なんです。
まずは、HTMLの方を、メニューのdivと、ロゴ画像のdiv、メニューのdivと3つに指定してあげましょう。
<div class="header4">
<div class="header-menu">
<a href="#">TOP</a>
<a href="#">About</a>
<a href="#">News</a>
</div>
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<a href="#">Blog</a>
<a href="#">Staffs</a>
<a href="#">Contact</a>
</div>
</div>こんな感じですね。
で、実は先程の3番までと同じCSSを当てるだけでやりたいことが実現できちゃうんです。
.header4 {
display: flex;
/* justify-contentをspace-betweenにしておくと、3つのdivを等間隔に配置する */
justify-content: space-between;
/* これで、ロゴの高さにメニューをあわせる */
align-items: center;
background: #F3F0EA;
padding: 30px;
color: #707070;
}
.header4 .header-logo {
width: 100px;
height: auto;
}
.header4 .header-logo img {
max-width: 100%;
}
.header4 .header-menu a {
text-decoration: none;
color: #707070;
padding: 0 10px;
}
.header4 .header-menu a:hover,
.header4 .header-menu a.active {
border-bottom: 2px solid #FD5A5F;
padding-bottom: 10px;
}※ これ、クラス名がheader3とheader4に変わっているだけで、中身は変わってないです。
おお、やりたいことができました。
カラクリを説明しておきます。
今、このメニューの親要素である【.header4】に【 justify-content: space-between;】という指定をしてます。
これは、配下のブロック要素(div)を横並びにして、等間隔に並べる。という指定なのです。
今までは【ロゴ画像】と【メニュー】の2つのブロック要素(div)が等間隔に両端に並んでいました。
今回、【メニュー】【ロゴ画像」【メニュー】と3つのブロック要素のなったので、これが等間隔に並んだため、ロゴ画像を中心にメニューを両端に表示できたわけです。
flexめちゃくちゃ便利ですね！！
5. 横型のメニュー
さて、もうほぼほぼ画面上部にあるグローバルメニューは攻略できました。
次は、画面の横にあるメニューも作ってみましょう。
今回は横のメニューと右側に大きな画像があるようなものを想定して作ってみましょう。
HTMLはこんな感じで、右側の画像エリアは適当に文字入れておきます。
<div class="header5">
<div class="menu-area">
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<div><a href="#">トップ</a></div>
<div><a href="#">製品紹介</a></div>
<div><a href="#">スタッフ紹介</a></div>
<div><a href="#">拠点一覧</a></div>
<div><a href="#">会社概要</a></div>
</div>
</div>
<div class="top-image">
ここに画像でも入れる
</div>
</div>CSSはこのように、flexの指定と、ロゴ画像の大きさ指定、aタグの文字色を指定。だけ入れておきましょう。
.header5 {
display: flex;
background: #F3F0EA;
padding: 0 30px;
color: #707070;
}
.header5 .header-logo {
width: 100px;
height: auto;
margin: 10px 0;
}
.header5 .header-logo img {
max-width: 100%;
}
.header5 .header-menu a {
text-decoration: none;
color: #707070;
}どうなるでしょうか。
おお、なんかあとは細かいところだけ指定すれば問題なさそうですね。
ちょっとメニューの文字列がキツキツなので、縦にマージンを取りましょう。
.header5 .header-menu div {
margin: 10px 0;
}
良い感じです。では、メニューの右側に画像でも入れてみましょう。
画像は、Airbnbの模写した時に使ってunsplashから持ってきたこの画像を使ってみます。
画像を指定します。
<div class="header5">
<div class="menu-area">
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<div><a href="#">トップ</a></div>
<div><a href="#">製品紹介</a></div>
<div><a href="#">スタッフ紹介</a></div>
<div><a href="#">拠点一覧</a></div>
<div><a href="#">会社概要</a></div>
</div>
</div>
<div class="top-image">
<img src="./img/airbnb_back.jpg" alt="">
</div>
</div>
おやおや、画像が多すぎて左上のお空の部分しか見れません。
ここで、先ほどの以下のテクニックを使ってみます。
画像に関しては、【imgタグの親要素のdivタグにwidthを指定】【imgタグにはmax-widht:100%を指定する】の2つだけ覚えておけばこの面倒な問題はすぐ解決できます。
このcssを追加します。
.header5 .top-image {
width: 100%;
}
.header5 .top-image img {
max-width: 100%;
}
できました。
あとはマージンを調整したり、画像の下に文字を入れておしゃれな感じにすれば、企業のHPは簡単につくれるようになります。
ここでも一応完成形のコードを書いておきます。
<div class="header5">
<div class="menu-area">
<div class="header-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="header-menu">
<div><a href="#">トップ</a></div>
<div><a href="#">製品紹介</a></div>
<div><a href="#">スタッフ紹介</a></div>
<div><a href="#">拠点一覧</a></div>
<div><a href="#">会社概要</a></div>
</div>
</div>
<div class="top-image">
<img src="./img/airbnb_back.jpg" alt="">
</div>
</div>/** 5. 横型のメニュー */
.header5 {
display: flex;
background: #F3F0EA;
padding: 0 30px;
color: #707070;
}
.header5 .header-logo {
width: 100px;
height: auto;
margin: 10px 0;
}
.header5 .header-logo img {
max-width: 100%;
}
.header5 .header-menu div {
margin: 10px 0;
}
.header5 .header-menu a {
text-decoration: none;
color: #707070;
}
.header5 .top-image {
width: 100%;
}
.header5 .top-image img {
max-width: 100%;
}最後に
今回、5種類のよくあるグローバルメニューの作り方を紹介しました。
本noteの中で【画像が大きすぎてうまく表示できない問題】や【画像と文字の高さが合わない問題】【aタグの色が変わらない問題】【hover時に下線引く問題】など、初心者がぶち当たり、挫折しそうになるポイントを敢えて紹介しました。
何度も言いますが、今回のコードはコピペして使ってOKなので、自分で写経したりコピペしてちょっと改変したりして、どんどんマスターしてみてください。
HP作成時に最初に作るであろうグローバルメニューが簡単に作れちゃうと、その後のページ全体の作成もサクサク進みますよ。
お願い
今後も作ろうと思っているコンテンツ案
・ flexを使ったおしゃれHPの作り方講座
・ 誰でもわかるレスポンシブ対応講座
・ 実際のwebページを1時間で模写する方法
・ ポートフォリオを1日で量産して企業案件を速攻で獲得する方法
など、色々なコンテンツを作っていく予定です。
僕自身のモチベーションにも繋がりますので、もし参考になったと思ったらシェアをお願いします！！
最後までありがとうございました。
いいなと思ったら応援しよう！
