- 上のPC用ページをレスポンシブに変える。
- 方針
- ロゴはヘッダーのようにトップに置く。
- 画像、キャプションと交互に表示する。
- 画像は背景なのでwidth: 100%; height: 0; padding-bottom: で写真の領域を確保する。backgroundの画像をレスポンシブにする時はこのパターンを使うように決めてしまおう。
- 画像の下にmargin: 180pxをとる。ここに出来たスペースにキャプションを入れる。
- まずはここまで。
/*responsive*/
@media screen and (max-width:767px){
#container{
width: 96%;
position: relative;
}
.upper, .bottom{
overflow: inherit;
}
/*layout
--------------------------------------------------------------------*/
header{
background: #eeeeee;
height: 92px;
padding-top: 24px;
}
.logo {
width: 60px;
height: 60px;
position: static;
margin: 0 auto;
z-index: 0;
}
/*header
-------------------------------------------------------------------*/
.photo{
float: none;
margin-bottom: 180px; 下に来るキャプションの高さを確保している。つっかえ棒
/*position: relative;/*子要素.captionのabsoluteを設定するため。*/
}
.upper .photo{
width: 100%;
height:0;
padding-bottom: 46%;
}
.bottom .photo{
width: 100%;
height: 0;
padding-bottom: 70%;
} backgroundの画像をrwdにするパターンとして頭に入れる。
/*layout for images
------------------------------------------------------------------*/
p.text{
padding-bottom: 3%;
}
/*layout for texts
------------------------------- ---------------------------------*/
.caption{
background: rgba(150, 150, 150, 1);
position: absolute;
top: 100%; /*親要素の縦幅に対して*/
transition: none;
height: 180px; 前で決めた.photoのmargin-bottomを同じにする。
}
.upper .caption{
padding-top:3%;
padding-bottom: 2%;
}
.bottom .caption{
padding-top:3%;
padding-bottom: 2%;
}
.caption:hover{
background: none;
}
.upper .caption:hover{
top:0;
}
.bottom .caption:hover{
top:0;
}
/*layout for caption
-----------------------------------------------------------------------------*/
footer{
background: #ffffff;
color: #000080;
font-size: 12px;
}
- 終わってしまいました！
