今回練習なのでブレークポイントいっぱい入れても仕方ない。
ざっくり630pxぐらいで設定しましょう
横並びになっているものを縦並びにすることが多いので、
googleの検証開きっぱなしにしてelementを右側に表示させ、
そこで実際いろいろコードを書き換えてみるといいらしい
横幅が630px以下の時に上書きするスタイル
前の設定は生きているので、上書きしたいものだけ記述。
上書きさせたいもののクラスなどの指定方法も合わせること。（前の方がセレクタの点数が高いと書き換えが起こらない）
ここまで--->
@media screen and (max-width: 630px){
body{
background-color: #eee;
}
.flex{
flex-wrap: wrap;
}
nav{
flex-basis: 100%;
}
}
デザインデータがあればそれに合わせる。
なければ、HOMEなどのリンクは文字がちいさくて押しにくいので
→
①フォントサイズを上げる
②上下のmarginを増やしてやる
などのことをする
nav{
flex-basis: 100%;
font-size: 2rem;
margin: 1.5rem 0;
}
いまから自分でスマホ用にデザイン作ってみますよ。
→手も足も出ませんでした。
先生の解説
①hoverがいらなくなる（消さなくてもいい）
②main p.messageの横幅が狭いですね
main p.message {
width:80%;
margin: 3rem auto;
}
この青い部分をみて、そのままここからコピーしてクラスの点数が同じまたは上回るようにしてやるといい
③flexを切るというより、flexを縦並びにするという方法がある
④col imgとtextの左右のpadding3％もいらない
⑤section同士がくっついて見えるのでcol_01の下にマージン
⑥newsの部分も幅80％に 横並びにしたくない
⑦もろもろ
hoverを切るかどうかはむつかしい問題で、ｐｃでもわざと幅を狭くして見るタイプの人もいる。その場合hoverを切るのは不親切だし残すのがよろしくなってくる。その場合はまたjQueryでこまかく指定することもできるらしい。
--->モバイル変更部分はこうなる
@media screen and (max-width: 630px){
/*横幅が630px以下の時の上書きするスタイル*/
/*前の設定は生きているので、上書きしたいものだけ記述*/
/*上書きさせたいもののクラスなどの指定方法も合わせること*/
/*前の方がセレクタの点数が高いと書き換えが起こらないかもしれない*/
body{
background-color: #eee;
}
a:hover{
color: #555;
text-decoration: none;
}
main .btn a:hover{
background-color: #257a01;
}
.flex{
flex-wrap: wrap;
}
nav{
flex-basis: 100%;
font-size: 2rem;
margin: 1.5rem 0;
}
main p.message {
width:80%;
margin: 3rem auto;
}
main .main_visual div{
text-shadow: 1px 1px 5px #333;
}
/*
//今回はこの方法ではない
section.flex{
display: block;
flex-basis: 100%;
}
*/
main .column section.flex{/*1,10,1,10点＝22点*/
flex-direction: column-reverse; /*row-reverseは上書きされている*/
}
main .column section .col_img,main .column section .col_text{
padding: 3% 0;/*左右のpaddingを切る*/
}
main .column section.col_01,main .column section.col_02{
margin-bottom: 3rem;
}
main .news{
width: 80%;
}
main .news dl.flex dt,main .news dl.flex dd{
flex-basis:100%;
}
/*上の記述は↓でもいい。
main .news dl.flex{
flex-direction:column;
}
*/
main .btn a {
width: 80%;
}
footer{
flex-direction:column;
}
footer ul {
text-align: left;
margin-buttom: 2rem;
}
}
--->index.html追加部分
<meta name="viewport" content="width=device-width,initial-scale=1">
デザインがちょっと崩れたとしても、情報がきちんと伝わるのが大事。
作っているときに分からなったら調べればいい。
font-awesome
フォントおーさむ
フォントでアイコンが用意されている。サンプルhtmlのツイッターアイコンとかはこれを使っているらしい。
イラレでsvgで保存して使ってもいいらしい。
