メディアクエリの書き方について

  • PC版のCSS部分をコピぺして、変えたいところだけにする
  • and (　の間は半角スペース入れないとエラーになる。
  • Web版とレスポンシブ版のセレクタ名は統一する。じゃないと、セレクタの得点でうまくいかなくなる。
  • コーディング始めてからブレイクポイントを変更するのはNG。ワイヤーフレームの段階で考えておく。タブレットの大きさで1つ、小さめのスマホの大きさで1つが良さそう。
  • 一番小さいスマホ機種はiphone5/SE。それ以下になった時のことは考えなくてOK

①画面幅によって画像変えたい→基本はpictureタグ使う

imgだと複数の画像を希望の箇所読み込み、は難しい。img srcsetではできる？

※backgroundの場合は高さを指定の上、urlやbackground-position（画像の切り取り位置。leftは左側、centerは真ん中）やbackground-sizeを指定すれば行けるはず。

<picture>タグの場合　
HTMLにもmedia、CSSにも@mediaを書く

HTML：小　PC
　　　 ↓
　　　　大　スマホ
　　　　の順に書く。

CSS：大　PC
　　　↓
　　　小　スマホ
の順に書く。
順番違うと効かないので、注意！！

＆、必要ならbodyも調整

②横並びを縦並びにする

基本

display:flex;になっている親をdisplay:block;にする
＆flexでwidth=50％などで横並びになっている子のwidthを
100％とすればよい。→縦になる

縦になった画像や文章の順番を変えたいときは、以下①～③。（写真・文章・写真・文章にしたい）

①HTMLにorder;と入れる
②CSSに擬似クラスnth-of-typeとorderつける
③1つの写真・文章を1セットとしてdivで囲み、違うやつだけclassつけて、flex-direction:column-reverse;やflex-direction:row-reverse,をつける