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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

既存サイトの再構築 header部分の制作

ナビゲーション部分

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

参考資料(実際のボタン画像は自身で作成)

f:id:yachin29:20160906003642p:plain



スライド部分

今回のテーマは全面レイアウトを意識したスライダーです。

今回のスライダーの仕様

  • ブラウザー幅一杯にスライドを表示させる
  • 左右の画像は半透明のブラーがかかっている
  • レスポンシブサイトなので、フリックにも対応


black-flag.net

<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/photo01.jpg" alt="" /></a></li>
<li><a href="#2"><img src="img/photo02.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/photo03.jpg" alt="" /></a></li>
<li><a href="#4"><img src="img/photo04.jpg" alt="" /></a></li>
<li><a href="#5"><img src="img/photo05.jpg" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->