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

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


よくあるヘッダー5選 〜デザイン編〜」でご紹介したホームページのヘッダーデザイン5パターンとその応用編について、photoshop×CSSで実装していきます。

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

本記事は、〜実装編 Part1〜の続きですが、今回のPart2から初めてもOKです!

縦並びメニュー

横書きの文字を縦に配置したメニューです。さて、どのようにコーディングしたらよいでしょうか?

…実は、とっても簡単です!

メニューをリスト要素として組み込むと、各要素がデフォルトで改行されて、上記のとおりに表示されます。

HTML
<div class="first-view">
<div class="firstview-img">
<img src="./images/logo-1.png" alt="ロゴ" class="logo">
</div>
<ul class="menu">
<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>
</div>
<div class=image>
<img src="./images/firstview-img.png" alt="">
</div>
/*本文のメッセージメッセージメッセージ…部分のコーディングは省略*/

CSSで特にスタイルを指定しなくても、リストの表示は横書き縦並びになります。

CSS
.first-view {
display: flex;
justify-content: space-between;
}

ul.menu li{
list-style: none;
}

ul.menu li a{
color: #522810;
font-size: 1.2rem;
}
/*画像のサイズ調整に関しては省略*/

さらに、ロゴ画像とメニューを横並びの両端配置にするために、これらの親要素であるdiv(class=”first-view”)に対して、flexboxjustify-content: space-between;を指定するとよいでしょう。

あとは、li要素に対してデフォルトのスタイルを外す指定をし(list-style: none;)li内のa要素に対して文字サイズや色の指定を行います。

縦並びメニュー 〜応用編1〜

次は、こちらをコーディングしてみましょう。

メニューの各項目は、リスト要素に入れればよいだけなので、簡単ですね。

HTML  
<div class="first-view">
<div class="nemu-bar">
<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>
<div class="contact"><a href="#">お問い合わせ</a></div>
</div>
<img src="./images/firstview-img.jpg" alt="">
</div>

 

CSS
.first-view {
display: flex;
}

.nemu-bar {
height: 100vh;
width: 20%;
background-color: #020202;
border-right: #fcfcfc solid 1px;
position: relative;
}

img {
height: 100vh;
width: 80%;
}

/*以下省略*/

ここでのポイントは、画面を2:8に分けてメニューバーと画像を配置することです。

メニュー項目のリストが入ったdiv(class=”nenu-bar”)と画像をフレックスボックで横並びにして、それぞれのwidthを20%および80%に指定します。

そして、メニューバーの背景色を黒にします(background-color: #020202;)。

縦並びメニュー 〜応用編2〜

こちらは、〜応用編1〜と同じパターンですね。ただし、メニューバーの背景(白グラデーション)をコーディングするのは少々難しいです。…そんな時は、photoshopで画像自体を加工してしまいましょう。

photoshopでのグラデーション加工は以下のように行います。

まず、背景画像の上に新たにレイヤーを作成します。そのレイヤー上で、グラデーションを入れたい部分に長方形を乗せます。さらに、その長方形にレイヤーマスクを指定します。

次に、グラデーションツールを指定し、グラデーションパターンを選択します。この状態で、先ほど作成した長方形の上で、グラデーションをかけたい方向にドラッグすればOKです。

 

あとは、ドラッグの開始・終了点を調整することで、グラデーションのかかり具合を調整していきます。何度かやり直して(Ctr+zで元に戻せます)、目的のグラデーションを作るコツを掴んでください。

縦書きメニュー

〜縦書きリストの横並べ〜

次は、縦書きのメニューを横並びにしてみましょう。…これは、言い換えると「縦書きリストを横並べ」にする操作です。

文字に縦書きを指定するスタイル(writting-mode: vertical-rl;)は、どの要素に対して記述すればよいでしょか?

答えは…ulに対してです。

(※HTMLは本記事1題目と同じです。)

なお、縦書き指定をliに対して記述してしまうと、以下のような表示になります。

なぜなら、liに対して縦書きをしてするということは、「リスト要素の中身」のみを縦書きにするということで、その親要素のulはデフォルトのままだからです。

つまり、下図のように指定したことになります。

liの要素がひとつ表示されるたびに、デフォルトでの改行(横でなく、下段に進行)が適用されています。(このため、「縦書き」の文字列として見ると、あたかもリスト要素の改行がなされていないように見えるのでややこしいですね。)

liの親要素であるulに縦書きの指定をすることで、子要素であるliも縦書きになるとともに、改行も横方向に進行します。

〜縦書きリストの縦並べ〜

では、下記左側のメニューを表示させるにはどうすればよいでしょう?

このように、縦書きリストを縦並びにしたいときは、(ひとつ前に学習したことを逆手にとって)liに対して縦書きスタイル(writting-mode: vertical-rl;)を指定すればよいですね!

あとは要素のpaddingを調整して間隔を整えます。

注意

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

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