Implist | 個人プロダクト開発を加速させるための理論と実装

【Photoshop×CSS】よくあるヘッダー5選 〜実装編 Part1〜


よくあるヘッダー5選 〜デザイン編〜」では、オーソドックスなホームページのヘッダーデザイン5パターンをご紹介しました。

今回は、それらをphotoshop×CSSで実装していきます。

まず、各題材をよく見て、Photoshop×CSSでの製作工程を思い浮かべてください。それから解説を読んで、自分の方法と比べたり(違うやり方でももちろんOK)、パッと思い浮かばなかったものについては、記事のコードを参考に練習してみましょう。

横並びメニュー

まずは、このオーソドックスなメニューをコーディングしてみましょう!今回は、フレックスボックスを使っていきます。

 HTML

<div class="container first-view">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>          
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>          
<li><a href="#" class="contact">お問い合わせ</a></li>
</ul>
<div class="firstview-img">
<img src="./images/picture1.jpg" alt="">
</div>  
</div>

 

CSS

body {
margin-top: 3rem;
}

.first-view ul{
display: flex; ---ポイント①
justify-content: flex-end; ---ポイント①
margin-bottom: 0; ---ポイント②
}

.first-view ul li {
list-style: none
line-height: 4rem; ---ポイント③
}

.first-view ul li a{ ---ポイント④
list-style: none;
color: #3E3B3B;
font-size: 20px;
padding-right: 2rem;
}

.first-view li:last-child { --ポイント⑤
background-color: #092526;
}

.first-view ul li:last-child a{ --ポイント⑥
padding-left: 2rem;
color: azure;
}

div.firstview-img img{
width: 100%;
}

ポイント①
メニューの各項目をリスト要素に入れます。そして、そのリスト(<li></li>)の親要素である<ul></ul>にフレックスボックスを指定してメニューを横並びにし、justify-content: flex-end; を指定することによって右寄せにします。

ポイント②
<ul></ul>には、デフォルトでマージンがついているので、これを消します。


※上記のように、デフォルトのマージン・パディングによって、思いがけず余白が生じることがあります。これを事前に回避するために、「リセットCSS」といってデフォルトでのスタイルをキャンセルするコードがあります。「リセットCSS」と検索すると、使用OKなコードが配布されているサイトを見つけることができます。これによって、ブラウザごとのデフォルトの差異(表示のズレなど)も解消することができますよ。

 

ポイント③
リスト要素のline-heightを調整して、バランスを整えます。

ポイント④
メニューは通常リンクになっています。よってメニュー項目の文字は、リスト内のaタグ内に入っています(<li><a href=” …”>メニュー</a><li>)。こういった場合、メニューの文字のスタイルは、liに対してではなくa に対して指定しましょう。

ポイント⑤
「お問い合わせ」は最後のリストに入っています。複数ある要素の最後のひとつを指定する時は、擬似要素 :last-childが便利です

ポイント⑥
「お問い合わせ」の文字のスタイルです。「最後のリストの中のa要素」を指定します。  ul li a:last-child と指定しないように注意しましょう(これだとリスト内にa要素が複数あって、その最後の一つのa要素という意味になります)。

横並びメニュー応用編

「デザイン編」では横並びメニューの応用編としてご紹介させていただいた、ファーストビューのパターンです。photoshopの操作を含めて見ていきましょう。

応用編 パターン1

背景写真の上に、直接メニューの文字を乗せるパターンです。文字が映えるよう、背景をうっすら暗くするのは「あるある」ですね。

今回は、ただ暗くするだけでなく、全体にグラデーションもかけてみました。写真を暗くしたりグラデーションをかける方法はいくつかありますが、本日は一番簡単な方法をご紹介します。

まず、photoshopで背景画像を開きます。そして、開いた画像の上に新規レイヤーを作成します。この親レイヤーを選択した状態で、グラデーションツール(線形)を使用します。

グラデーションは、デフォルトでいくつものパターンが用意されています。今回であれば、デフォルトの「ブルー」もしくは「紫色系」が使えそうです。色のパターンを指定し、グラデーションをかけたい方向(今回は左から右)に、画像の上をマウスでドラッグしましょう。

最後に、このグラデーションの色が乗ったレイヤーの不透明度を調整(目安は25~35%)して、画像処理は完成です。

応用編 パターン2

文字が中央横並びで、真ん中にロゴが入ったパターンです。よく見かけますが、バランスよくコーディングできますか?

HTMLは省略します(「横並びメニュー」のコードを呼び出し、リストを7つに書き足し、真ん中のリスト要素の中身をロゴの画像にします)。

CSS

body {
margin-top: 1rem;
}

.first-view ul{
display: flex; --ポイント①
justify-content: center; --ポイント①
margin-bottom: 0;
}

.first-view ul li {
list-style: none;
line-height: 180px;   --ポイント③
}                                 

li img {
height: 180px; --ポイント② (先にこちらを指定する)
}                                 

.first-view ul li a{
list-style: none;
color: #3E3B3B;
font-size: 20px;
padding-right: 2rem;
}

div.firstview-img img{
width: 100%;
}

ポイント①
メニューの親要素にフレックスボックスを指定して横並びにします。今回は、justify-content: centerで全体を中央寄せにします。

ポイント②
ロゴ画像の高さを決めます。ロゴ画像が大きすぎるor小さすぎる場合、heightに適切な数値を指定して調整します。

ポイント③
ロゴ画像の高さに合わせて、文字のline-heightを指定します。こうすることで、ロゴ画像の上下中央位置に文字が配置されます。

画像は、photoshopの「図形でくり抜き」を使います。
①画像を開き、新規レイヤーにくり抜きたい形の図形を作成する。
②画像レイヤーを、図形の下に持ってくる。
③画像レイヤーと図形レイヤーの境目にカーソルを合わせ、「optionキー」→「Enter」で、図形の形に画像がくり抜かれる。

応用編 パターン3

こちらはメニューが画像の下に配置されたパターンです。カーソルを合わせたメニューの周囲に色がつくようにコーディングします。

HTMLは省略します。

CSS

.first-view ul{
display: flex; --ポイント①
margin-bottom: 0;
}

.first-view ul li {
list-style: none; 
line-height: 4rem; --ポイント②
border-right: #adb6b6 solid 1px; --ポイント③
margin-top: 1rem;
}

.first-view ul li:last-child {
border-right: none; --ポイント③
}

.first-view ul li a{     --ポイント④
list-style: none;
color: #3E3B3B;
font-size: 1.2rem;  
padding: 1rem 2rem;
margin: 1rem; 
}

.first-view ul li a:hover{ --ポイント⑤
background-color:  #adb6b6;
text-decoration: none;
}

div.firstview-img img{
width: 100%;
}

ポイント①
フレックスボックスでメニューを横並びにします。

ポイント②
メニューバーの高さを指定します。

ポイント③
各メニュー項目の間の線(ボーダー)を指定します。border-rightで文字が入る範囲(ボックスと考えましょう)の右側飲みにボーダーが表示されるようにします。最後のメニューには右側にボーダーがありませんので、:last-childでリストの一番最後の要素を指定して「ボーダーなし」の記述をします。

ポイント④
カーソルを合わせた時に色がつく範囲の指定です。paddingがないと文字周囲ギリギリに色がつきます。paddingによって、色がつく範囲に余裕を持たせます。さらにmarginをつけることで、ポイント③で指定したボーダーとの間に余白をつけます。

ポイント⑤
擬似要素である:hoverを指定してスタイルを記述します。これによって、メニューの文字の周囲に色がつくのは、「カーソルを合わせた時のみ」になります。

注意

今回例示したホームページデザインは、この記事のために作成したものであり、実在の団体のホームページはありません。また、今回使用した画像は「pixabay」「PhotoAC」「Adobe stock」から、ロゴは「Canva」から取得したものです。どれも基本的に商用利用可能な素材を扱っています。

ただし、ご自身でご利用の際は、各素材サイトの規約をよく確認しましょう。商用利用の範囲はサイトごとに細かく決まっております。写真やロゴそのものの販売はNGであったり、ビジネスでの使用にはそれぞれの規約に基づいたアクション(料金の支払ってデザインを買い取る、クレジットの表記…)が必要になりますのでご注意ください。