- cotorier cafe
- pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。
- もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。
- display flexはレスポンシブ対応に向かないのかもしれない。まだ知識が不足しているだけなのかもしれないけれど…
- メディアクエリーの記述した後に、リセットからあとのスタイルシートをコピーして貼り付ける。
- いらない記述を、決して不用意に消さない！
- ついついやってしまうと、訳がわからなくなる。あるいは、PC用のスタイルシートをプリントアウトして見ながら作業するのがいいかもしれない。
- デバイスの画面は可変しない。デバイスの画面は固定値だから、可変する状態を動きで見ることはない。
- うまくブロックが作れていないと感じたら、ためらわないでhtmlを書き換えるのが近道。
- 高さを指定した、headerやfooterは高さを指定しないで、height: auto;にする。
- margin、paddingなど、pcのスタイルシートと同じように書かないとダメ。例えば、pc用にmargin-left;で記述したらtablet用もmargin-leftで指定する。追加する場合はその後に書き足す。
- pc用のスタイルシートを書き換える、ということ。
- <dt><dd>はtablet,sp用のスタイルシートでは横に並べないほうが賢明です。縦に並べるようにする。
- <dt>と<dd>の間は狭く、<dd>と<dt>の間は広くする。どの行と行が関連しているのか一目瞭然にする。
css メディアクエリーの後
@media screen and (max-width:959px){
#container{
width: 98%;
}
.text{
line-height: 1.6;
}
#header{
width: 100%;
height:auto;
margin-bottom: 1rem;
overflow: hidden;
position:static;
}
#header .img{
width: auto;
max-width: 100%;
position: static;
float: left;
margin: 0.5rem;
}
#wrap0{
float:right;
height: auto;
padding: 0.5rem;
box-sizing: border-box;
}
#header h1{
position :static;
text-shadow: 1px 1px 1px #ffffee;
}
#header .text{
position :static;
}
#header nav{
float: left;
overflow: hidden;
height: 60px;
width: 100%;
margin: 0;
}
#header nav>ul>li{
float: left;
width: 33.33%;
height: 60px;
margin-left: 0;
}
#header nav>ul>li>a{
line-height: 60px;
}
/*
---------------------------------------------------------------header*/
#main {
margin-bottom: 1rem;
}
#wrap1{
width: 56%;
margin-left: 0;
margin-bottom: 1rem;
}
#wrap1 h2{
font-size: 1.5rem;
margin-bottom: 1rem;
}
#main img{
width: 43%;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 1rem;
}
#main .link{
width: 100%;
height: 50px;
margin-left: 0;
float: left;
}
#main .link a{
line-height: 50px;
}
/*main
------------------------------------------------------------------*/
#wrap2{
width: 100%
margin-left: 0;
margin-bottom: 1rem;
text-align: center;
}
#wrap2 h3{
font-size: 1.5rem;
width: 100%;
float: none;
margin-bottom: 1rem;
}
#wrap2 p.link{
width: 50%;
height: 40px;
float: none;
margin: 0 auto;
}
#wrap3{ この部分は修正しました。下に追記あり。
margin-left: auto;
width: 480px;
margin: 0 auto;
}
.menu{
float: left;
width: 220px;
height:360px;
margin-right: 0.5rem;
margin: 0.5rem;
}
.menu h4{
margin-bottom: 1rem;
}
.menu img{
border-radius: 4px;
max-width: 100%;
}
/*menu
---------------------------------------------------------------------*/
#info{
margin-bottom: 1rem;
margin-left: 0;
}
#wrap4{
float: none;
width: 100%
margin-right: 0;
}
#wrap4 h3{
font-size: 18px;
}
#wrap4 dl{
width: 100%;
margin-bottom: 0.5rem;
}
#wrap4 dt{
float: none;
margin-right: 0;
height: 25px;
}
#wrap4 dd{
height: 25px;
margin-bottom: 0.5rem;
text-decoration: underline;
}
#wrap5{
float: none;
width: 100%;
margin-right: 0;
}
#wrap5 h4{
font-size: 18px;
margin-bottom: 1rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap5 ul{
overflow: hidden;
width: 100%;
}
#wrap5>ul>li{
width: 50%;
height: 40px;
margin-bottom: 0.5rem;
margin-left: 0;
float: left;
}
#wrap5>ul>li a{
display: block;
line-height: 40px;
}
#wrap6{
margin-left: 0;
overflow: hidden;
margin-bottom: 2rem;
}
#wrap6 h3{
font-size: 18px;
float: left;
margin-right: 3rem;
text-shadow: 1px 1px 1px #aaa;
}
#wrap6 p.link{
width: 220px;
height: 40px;
float: left;
}
#wrap6 p a{
line-height: 40px;
display: block;
}
#wrap7{
overflow: inherit;
margin-bottom: 1rem;
}
dl.adress{
margin-left: 0;
float: none;
overflow: inherit;
margin-right: 0;
}
dl.adress dt{
width: 100%;
height: 25px;
float: none;
font-weight: bold;}
dl.adress dd{
width: 100%;
height: 50px;
}
dl.open {
overflow: inherit;
}
dl.open dt{
width:100%;
height: 25px;
float: none;
font-weight: bold;
}
dl.open dd{
width: 100%;
height: 25px;
}
/*access
--------------------------------------------------------------------*/
#footer{
width :100%;
height: 160px;
background: #4A0000;
text-align: center;
margin-bottom: 1rem;
}
#footer p{
line-height: 160px;
color: #ffffee;
}
}
20160618加筆修正
- メニュー画像４枚が、フルードイメージになっていなかった点を修正。
- .menuで４枚の画像をwrapしている。
- だから、imgの親は、.menu。
- .menuは親（#container）に対して、100%.
- imgは親（.menu）に対して、48%。（marginを1%つけたから）。
- floatさせるものに高さをピクセルで指定する、と覚える。
#wrap3{
margin-left: 0;
width: 100%;
margin: 0;
}
.menu{
float: left;
width: 48%;
height:520px;
margin-right: 0;
margin: 1%;
}
.menu h4{
font-size: 14px;
margin-bottom: 1rem;
}
.menu img{
border-radius: 4px;
width: 100%;
}
