【Photoshop×CSS】よくあるヘッダー５選 〜実装編 Part4〜
「よくあるヘッダー５選 〜デザイン編〜」でご紹介した、ホームページのヘッダーデザインを実装していくシリーズです。Part4は、その最終回！今回のテーマは「項目が多いメニュー」の実装となります。part1〜part3までの総復習となる内容ですので、ぜひトライしてくださいね！
項目が多いメニュー その①
１つ目の例題は、医療系専門学校のホームページです（※実装練習のために作成した架空の学校のページです）。
学校関係のホームページは、ページの訪問者の幅も広く（在校生、受験生、卒業生、留学生、保護者、教員…）それぞれにお知らせしたい内容が異なるため、おのずとメニュー項目が増えてしまいます。また、教育方針や研究活動、大学院等々、PR事項も盛りだくさんな上、連絡先や他言語表記のページも必要になるでしょう。
このようにメニュー項目が多い場合は、項目のまとまり毎に行やカラムを分け、できるだけ見やすいレイアウトとなるよう工夫します。
コーディングの際は、どことどこがグループ（まとまり）になっているか、すぐにイメージできるように練習しましょう！今回は、以下のように3つのグループに分けられます。
グループ①のコーディング ~フッレックスボックス１〜
グループ①をheaderとしましょう。この中には、横並びになった２つの小グループが存在しますね…ということは、コーディングにはフレックスボックスを使います！
HTML
<header>
<div class="header-left"><img src="./images/logo.png" alt=""></div>
<div class="header-right">
<nav class="navi-1">
<ul>
<li><a href="#">在校生の方</a></li>
<li><a href="#">受験生の方</a></li>
<li><a href="#">保護者の方</a></li>
</ul>
</nav>
<div class="tel">代表tel: 1234-56-7890</div>
</div>
</header>
<div class="gradation"></div>
CSS
header {
display: flex;
justify-content: space-between;
background-color: #e8eff7;
}
ul {
display: flex;
}
ロゴ画像の入った div(class="header-left"）および、ナビゲーションと電話番号が入ったdiv(class="header-right")を横並べにするために、親要素であるheaderタグにdisplay: flex;を指定します。 そして、justify-content: space-between;でこれらを両端寄せにします。
さらに、div(class="header-right")内のul要素にもdisplay: flex;を指定し、子要素であるli（ナビゲーション各項目）も横並べにします。
CSS
.gradation {
height: 1.5rem;
width: 100%;
background: linear-gradient(to top, #cdd2e2, #e8eff7);
}
CSSで幅(100%）と高さを指定し、to top(上に向けて)#cdd2e2（やや濃いめの青）から#e8eff7（ヘッダー背景色）にグラデーションを指定しています。
グループ②のコーディング ~フッレックスボックス２〜
グループ②はナビゲーションなので、navタグを使います。２つ目のナビゲーションですので、別々のクラス名（class="navi-1"およびclass="navi-2"）をつけるなどして識別できるようにしておきましょう。
HTML
<nav class="navi-2">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
メニュー項目を横並びにするには、ulに対してフレックスを指定すればOKです。…ですが、今回は、１つめのナビゲーションに登場したnavタグ内のulにdisplay: flex;を指定しているので、ここではなにもする必要がありません。
複数の箇所に同じスタイルを適用するときは、一度の記述で済むよう工夫して、効率よくコーディングしていきましょう！
グループ③のコーディング 〜画像の配置〜
グループ③では、画像の配置を行います。写真を中央に配置し、余白部分を水色にしてみましょう。
写真をそのまま配置すると、大きすぎてはみ出してしまいます。そんなときはimgタグをdivで囲い、このdivに対してサイズを指定します。今回は、div(class="top-img-box")に対して、横幅90%を指定し、左右のマージンをautoにしました。
上記の設定をした上で、imgに対して幅100%を指定するとすると、div(class="top-img-box")のサイズに対しして100%…つまりピッタリサイズになります。
さらに、もうひとつ外側にdivをつくり、これをdiv(class="container")とします。このdiv(class="container")に対してbackground-colorを設定することで、左右の余白に背景色を指定できるのです。
HTML
<div class="container">
<div class="top-img-box">
<img src="./images/top-img.jpg" alt="" class="top-img">
</div>
</div>
CSS
.container {
background-color: #dff0fd;
}
.navi-2 {
background-color: #f8fbfd;
padding: 1rem 6rem;
}
.top-img-box {
height: 100%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
あとは、グループ①〜③それぞれの要素のクラスに対して、マージンやパディング、文字サイズ等を指定し、細かな調整をすれば完成です。
今回は便宜的にグループ①をheaderに入れましたが、トップ画像まで含めてheaderとする場合もあります。あくまで「どことどこをグループと見ると、コーディングがしやすいか」を見つける練習と考えて取り組みましょう。
項目が多いメニュー その②
では、２つ目の例題をコーディングしてみましょう。まず、同じ親要素に入れるべき「グループ」に分けていきます。
今回も、下記のように３つのグループに分けられますね。
では、一気にコーディングしていきましょう！
HTML
<header>
/*グループ① 言語選択*/
<div class="language">
<div><a href="＃">日本語</a></div>
<div><a href="＃">English</a></div>
</div>
/*グループ② ロゴ＆ナビ*/
<div class="header-inner">
<div class="header-left">
<div class="logo"><img src="./images/Cafe-logo.png" alt="Cafe-Madeleine"></div>
</div>
<div class="header-right">
<nav>
<div class="menu-box">
<a href="#"><img src="./images/menu1.jpg" alt=""></a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu2.jpg" alt=""></a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu3.jpg" alt=""></a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu4.jpg" alt=""></a>
</div>
</nav>
</div>
</div>
</header>
/*グループ③ SNSアイコン＆トップ画像*/
<section class="top">
<div class="SNS-icon">
<div class="icon-box">
<a href="#"><img src="./images/Icon-instagram.png" alt=""></a>
</div>
<div class="icon-box">
<a href="#"><img src="./images/Icon-twitter.png" alt=""></a>
</div>
<div class="icon-box">
<a href="#"><img src="./images/Icon-facebook.png"alt=""></a>
</div>
<div class="top-img">
<a href="#"><img src="./images/cafe-img.jpg" alt=""></a>
</div>
</div>
</section>
グループ①の言語選択のナビにスタイルを付けます。親要素であるdiv(class="language") にフレックスボックスを指定し、justify-content: flex-end;で右揃えにします。
CSS
.language {
display: flex;
justify-content: flex-end;
}
次はグループ②です。ロゴが入ったdiv(class="header-left")およびメニューバーが入ったdiv(class="header-right")の、２つの親要素であるdiv(class="hader-inner")にフレックスボックスを指定します。そして、justify-content: space-between; で２つの要素を左右両端に配置します。
CSS
.header-inner {
display: flex;
justify-content: space-between;
}
今回、ロゴ（お店の名前）やメニューは、手書き風フォントを反映させるため、文字を含めて画像にしています。ですが本来は、店名やタイトル、メニュー項目は、HTML上に直接入力する方が望ましいです。やむを得ず文字と画像として用いる場合は、特に忘れずにalt="○○○"を記入しましょう。
最後にグループ③にスタイルを付けます。グループ③は、以下のように左右に分かれる（つまり、要素が横並びになっている）ことに注意しましょう。
SNSアイコンが入ったdiv(class="SNS-icon")と、トップ画像が入ったdiv(class="top-img")を横並べにします。このためには、これらの親要素であるdiv(class="header")にフレックスボックスを指定します。
ここで、SNSアイコンにご注目ください。アイコンは画像含めたグループのボトムに配置されていますね。こんな時使えるのが、flex-endです。
まず３つのアイコンを含むdiv(class="icon-box")をフレックスボックスの親要素に指定します。そして、flex-direction: column;で子要素を「縦並び」にします。次に、justify-content: flex-end;を指定すれば、「縦並び」のアイコンを「下揃え」に配置できるのです！
CSS
.top {
display: flex;
}
.SNS-icon {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.icon-box{
width: 30px;
padding: 0.5rem;
}
.top-img {
height: 550px;
width: 100%;
overflow: hidden;
}
.top-img img {
width: 100%;
}
※CSSは主要な箇所のみ記載してあります。
あとは、各クラスに対して、マージンやパディング、文字スタイルを付けてバランスを調整していきます。
なお、画像については、imgタグを囲うdiv(class="top-img")に対してサイズを指定し、overflow: hidden;によって画像の縦サイズがはみ出した部分は隠す設定にしてあります（横幅はwidth: 100%;でピッタリに）。
注意
今回例示したホームページデザインは、この記事のために作成したものであり、実在の団体のホームページはありません。また、今回使用した画像は「pixabay」「PhotoAC」「Adobe stock」から、ロゴは「Canva」から取得したものです。どれも基本的に商用利用可能な素材を扱っています。
ただし、ご自身でご利用の際は、各素材サイトの規約をよく確認しましょう。商用利用の範囲はサイトごとに細かく決まっております。写真やロゴそのものの販売はNGであったり、ビジネスでの使用にはそれぞれの規約に基づいたアクション（料金の支払ってデザインを買い取る、クレジットの表記…）が必要になりますのでご注意ください。