読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

レスポンシブサイトのナビボタンを画像で作る

レスポンシブデザイン

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。


参考画像
f:id:yachin29:20160906003642p:plain

f:id:yachin29:20160906003714p:plain


nav要素の高さ:50px
li要素の高さ:30px
ホバーしたら出てくるborderの幅:3px

今回のポイント

以前はPC用とSP用に2つのnav要素を用意して、display:block と display:none で表示・非表示をコントロールしていましたが、今回は1つのnav要素でPC・SP共に使いまわす方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
</head>

<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->
</body>
</html>