SPデザインのみのレスポンシブコーディングの爆速コーディング法

よくある”SPデザインのみでPCはSPデザインが中央に見えてればいいです”系コーディング
予算の少ないLPとかでよくあるパターン
だいたいこんな感じ

確かにデザインは1パターンしか出さないから工数がすくなるので予算抑えられてバッチグーです。
コーディングも全部画像でイケれば速攻終わるのでバッチグーです。

ただテキスト関係はプレーンだったり、細かくコーディングしないといけない場合
普通にレスポンシブコーディングなので時間かかります。

そこでSPデザインのみのレスポンシブコーディングの爆速コーディング法

sass使います。
通常、sassはgulpなりWebpackなり何かしらのタスクランナー使って中距離〜サイトで使うんですが
今回はvscordのプラグインEasy Sassでのコンパイルで十分です。なんせ爆速なので構築してる時間はない。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
https://marketplace.visualstudio.com/items?itemName=spook.easysass

通常はsp時のことを考えてできるだけ%でやっていこうと考えるんですが、
この方法だといったんspデザインの横幅(だいたい750px)に合わせてpxでコーディング。
難しいことは一切考えず。

scss

.blog {
  padding: 95px 0 120px;
}
.blog .blogTtl {
  margin-bottom: 450px;
  text-align: center;
}
.blog  ul {
overflow: hidden;
}
.blog  ul .blogList {
  width: 236px;
  margin-right: 12px;
  margin-bottom: 33px;
  float: left;
}

という具合にひたすらpxでコーディング
spでみると余裕で崩れて表示される状態。

ここからがみそです。
①メディアクエリの中にpcのpxコーディングの記述をコピー
②上から順に○○pxを○○/7.5+0vwに変えていく、数値指定以外の記述はかぶるだけなので削除していく

とこうなります。

scss

.blog {
  padding: 95px 0 120px;
}
.blog .blogTtl {
  margin-bottom: 450px;
  text-align: center;
}
.blog  ul {
overflow: hidden;
}
.blog  ul .blogList {
  width: 236px;
  margin-right: 12px;
  margin-bottom: 33px;
  float: left;
}
@media screen and (max-width:750px) {
.blog {
  padding: 95/7.5+0vw 0 120/7.5+0vw;
}
.blog .blogTtl {
  margin-bottom: 450/7.5+0vw;
}
.blog  ul .blogList {
  width: 236/7.5+0vw;
  margin-right: 12/7.5+0vw;
  margin-bottom: 33/7.5+0vw;
}
}

これをコンパイルするとこうなります。

css

.blog {
  padding: 95px 0 120px;
}
.blog .blogTtl {
  margin-bottom: 450px;
  text-align: center;
}
.blog ul {
  overflow: hidden;
}
.blog ul .blogList {
  float: left;
  width: 236px;
  margin-right: 12px;
  margin-bottom: 33px;
}
@media screen and (max-width: 750px) {
  .blog {
    padding: 12.66667vw 0 16vw;
  }
  .blog .blogTtl {
    margin-bottom: 60vw;
  }
  .blog ul .blogList {
    width: 31.46667vw;
    margin-right: 1.6vw;
    margin-bottom: 4.4vw;
  }
}

いい感じ、というか正確に計算してくれてる。

これでpc時はspデザインをデザインカンプサイズで表示、メディアクエリ以下のブラウザ幅では拡大縮小されて表示されるようになりました。
あくまで”SPデザインのみでPCはSPデザインが中央に見えてればいいです”系コーディングのみに通用するやり方ですが、
こういうケースでこのやり方以上に早いやり方ないと思ってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です