今回は練習なので、ブレークポイントをいっぱい入れても仕方ない
ざっくり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を切るかどうかはむつかしい問題で、
pcでもわざと幅を狭くして見るタイプの人もいる
その場合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
https://fontawesome.com/
フォントでアイコンが用意されている
サンプルhtmlのツイッターアイコンとかはこれを使っているらしい
イラレでsvgで保存して使ってもいいらしい
