日林水産有限会社
豊後水道の美味しいブリなら日林水産有限会社。豊後水道の美味しいブリのご注文は日林水産へどうぞ。愛媛県宇和島市日振島から美味しいブリをお届けします。
今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。
全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。
今まで授業で習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。
参考サイト
www.vogue.co.jp
index.html
<!DOCTYPE HTML> <html ja> <head> <meta charset="utf-8"> <title>Vogueの習作</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style0.css"> </head> <body> <div id="container"> <div id="content"> <div class="top topL"> <a href="#"> <div class="cap"> <h2>ページタイトル</h2> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> <div class="top topR"> <a href="#"> <div class="cap"> <h2>ページタイトル</h2> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> <div class="bottom btmL"> <a href="#"> <div class="cap"> <h2>ページタイトル</h2> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> <div class="bottom btmC"> <a href="#"> <div class="cap"> <h2>ページタイトル</h2> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> <div class="bottom btmR"> <a href="#"> <div class="cap"> <h2>ページタイトル</h2> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> <div id="logo-svg"><img src="img/logo.svg" alt="#"></div> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } #content { width:100%; position:relative; height: 100vh; } .top { width:50%; height:50vh; float:left; position:relative; overflow:hidden; } .bottom { width:33.33%; height:50vh; float:left; position:relative; overflow:hidden; } .topL { background:url(../img/01.png) no-repeat; background-size:cover; } .topR { background:url(../img/02.png) no-repeat; background-size:cover; } .btmL { background:url(../img/03.png) no-repeat; background-size:cover; } .btmC { background:url(../img/04.png) no-repeat; background-size:cover; } .btmR { background:url(../img/05.png) no-repeat; background-size:cover; } .cap { padding-top: 28%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10; background: rgba(245,44,67,0); cursor: default; transition: ease 0.3s; } .bottom .cap { padding-top: 45%; } .cap:hover { top:-30%;/*ホバーした際に動く距離*/ left: 0; background: rgba(245,44,67,1); } .top h2{ padding-bottom: 8%; color: #FFF; font-size: 22px; } .bottom h2{ padding-bottom: 8%; color: #FFF; font-size: 22px; } .text { color: #FFF; font-size: 16px; margin-bottom: 60px; } .view { width: 40%; margin: 0 auto; font-size: 20px; color: #FFF; padding: 10px; border: 1px solid #FFF; transition: 0.2s ease-in-out; } .view:hover{ background:white; color: #111; cursor: pointer; } h1 { width:160px; height:160px; background:url(../img/logo.svg) no-repeat; background-size:cover; position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; z-index:1000; } @media screen and (max-width:767px){ #container { width:100%; } .top { width:100%; height:30vh; float:none; overflow: visible;/*PCで指定していたoverflow:hiddenを初期値に戻す*/ margin-bottom:200px; } .bottom { width:100%; height:30vh; float:none; overflow: visible; margin-bottom:200px; } .cap { padding-top:0; position: absolute; top: 100%; left: 0; width: 100%; height: 200px; background: rgba(245,44,67,1); transition: none; } .bottom .cap { padding-top: 0; } .cap:hover { top:100%;/*ホバーしても動かないように*/ } h2{ margin-top:20px; padding-bottom: 20px; color: #FFF; font-size: 20px; } .text { font-size:14px; text-align: center; } img { max-width:100%; } h1 { width:60px; height:60px; top:10px; left:10px; margin:0; } }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>transitonによるアニメーション</title> <style> /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } .box { width: 500px; height:300px; background: #06F; position:relative; overflow: hidden; } .cap { padding-top: 40%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10; background: rgba(245,44,67,0); cursor: default; transition: ease 0.3s; } .cap:hover { top:-40%;/*ホバーした際に動く距離*/ left: 0; background: rgba(245,44,67,1); } h3{ padding-bottom: 20px; color: #FFF; font-size: 22px; } .text { color: #FFF; font-size: 16px; margin-bottom: 50px; } .view { width: 40%; margin: 0 auto; font-size: 20px; color: #FFF; padding: 10px; border: 1px solid #FFF; transition: 0.2s ease-in-out; } .view:hover{ background:white; color: #111; cursor: pointer; } </style> </head> <body> <div class="box"> <a href="#"> <div class="cap"> <h3>ページタイトル</h3> <p class="text">ページの説明文、テキストテキストテキスト</p> <p class="view">view more</p> </div> </a> </div> </body> </html>
画像を可変(フルード)にするには、2種類のやり方があります。
imgタグで表示している画像にはフルードイメージの設定
img { max-width: 100%; }
background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高さを確保する必要はありませんが、背景画像の場合は背景画像を表示させる領域を確保する必要があります。固定値であれば、PXで指定するだけですが、フルードにしたい場合は値を%にしないといけません。幅に関しては%指定で問題ないですが、高さを%にすると色々と問題が出て来てしまいます。
そこで、高さに関しては%指定せずに代わりにpadding
で画像の表示領域を確保する方法をとります。
paddingはtopだろうがleftだろうがbottomだろうが、その要素の幅を基準とするので、その要素の横幅に対して画像の高さが何pxかを%に変換するだけです。
さらにbackground-size: の指定を忘れずにしましょう。
例
背景画像を表示したい領域が960px ✖ 420pxの場合、
固定値での設定
header { width: 960px; height:420px; background: url(img/mainvis_146.png) no-repeat; }
フルード化
header { width: 100%; height:0; padding-bottom:43.75% ; /*420px÷960px=43.75*/ background-size: cover; }
css3のtranstionを使って、画像をホバーしたらキャプションが出る設定にしてみましょう。
<li class="size-2x2"> <img src="img/ph01_l.jpg" alt=""> <div id="cap"> <h2>料理名</h2> <p>値段</p> <p>料理の説明</p> </div> </li>
/*キャプション*/ li{ position: relative; } #cap { width:100%; height:100%; background: rgba(255,255,255,0.5); position: absolute; top:0; left:0; z-index:100; opacity: 0; transition: ease 0.3s; cursor: pointer; } #cap:hover { opacity: 1; background: rgba(255,255,255,0.7); }
既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。
見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。
開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課題の1番のポイントです。
まずはギャラリーを作る際に、どういうサイズで画像をレイアウトしていけば良いか考えましょう。
Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール
またスマホレイアウトで、どういう見せ方にするべきか、またその為にどういう工夫がされているかを、制作しながら理解していきましょう。
PC時のギャラリー部分
スマホ時のギャラリー部分
画像素材
header周りの画像
http://yachin29.webcrow.jp/kirin/header-icon.zip