デザイナー：このデザイン通りコーディングお願いします
エンジニア：これ、画面幅縮めると文章が改行されますけどいいですか？
デザイナー：ダメです。改行するとカッコ悪くなるので改行せずに実装お願いします。
エンジニア：物理的に無理ですね。
・横にスクロールさせる
・文章を短くする
・余白を小さくする
などの落としどころを見つける必要があります。
デザイナー：んー強いていうなら余白ですかね。
でもこの画面サイズでは今の余白を保ちたいです。
そして改行はどの画面サイズでもさせたくありません。
こんな状況、結構遭遇します。あなたならこんな場面に出会ったらどうしますか？
ほとんどのデザインカンプは主にpc、タブレット、スマホの３パターンくらいしかデザインが用意されてません。
その間のデザインや画面サイズの変更中の挙動はエンジニアのセンスに任されがちです。
このような場面でデザイナーの意見を再現しつつも、落とし所を適切に、センスよく実装するのもスキルです。
そんな時に使えるテクニック紹介します。
余白をうまくコントロールする
まず、このような場合どのように解決すべきでしょうか。
文章が入っている箇所はボタンになりますので、改行してしまうとカッコ悪くなる感覚はあると思います。
そして、ボタンは多くの場合CTA（コンバーション）となり、目立って欲しいので文字サイズを小さくすることも得策ではありません。
スクロールも画面から見切れるのでCTAエリアには得策ではないですね。
となると、余白を小さくするしかありません。
pcからタブレットまでの余白が問題ですが、この余白を段々と小さくしていく必要があります。（いきなり小さくするとパーツが中央によってしまい、カッコ悪くなるので）
【一気に余白を落とす実装】
余白を段々小さくさせるという方法もありますがタブレットの画面幅になるまでメディアクエリを刻むことになってしまいます。
物凄い数のメディアクエリを用意する必要が出てきますのでこれもなるべく避けたい方法です。
理想としては、
- ある画面幅〜ある画面幅の間で画面サイズに比例して余白のサイズが変更されるようにしたい
これですね。
【理想の挙動のデモGIF】
これ、実は他の記事で似たようなことを紹介しています。こちらです。
これを応用することでこのような場面をうまくた対処することができます。
実装方法
今回は応用なので、コードと使い方のみを解説します。
詳しい説明はこちらを参考にしてください。
mixin.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* フレキシブルな余白の生成 ----------------------------------------*/ @mixin flexMarginLeft($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; margin-left:calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } @mixin flexMarginRight($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; margin-right:calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } @mixin flexPaddingLeft($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; padding-left:calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } @mixin flexPaddingRight($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; padding-right:calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } |
style.scss
|
1 2 3 4 5 6 7 8 9 |
@media only screen and (max-width:1023px){ margin-left:30px; } @media only screen and (min-width:1024px){ @include flexMarginLeft(10,40,1024,1200); } @media only screen and (min-width:1200px){ margin-left:40px; } |
まず、ある画面幅〜ある画面幅の間で画面サイズに比例して余白のサイズが変更されるように値を調整してくれる計算式を書きます。
長いのでmixinにまとめて簡単に使い回す事ができるようにします。
基本の形は以下です。
|
1 2 3 4 5 |
@mixin 関数名($minSize, $maxSize, $minMq: デフォルト値, $maxMq: デフォルト値) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; プロパティ名: calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } |
これをpadding-leftバージョン,padding-rightバージョン,margin-leftバージョンと言うように必要に応じて用意します。
そしてこのmixinを使用したい場所で召喚し、使用します。
|
1 2 3 |
@media only screen and (min-width:1024px){ @include flexMarginLeft(10,40,1024,1200); } |
この計算式はあくまでも「ある画面幅〜ある画面幅の間の途中の値を計算してくれるもの」なので、そのある画面幅を超えた時の値も設定する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ある画面幅〜ある画面幅を1024px〜1200pxに設定 -----------------------------------------*/ //1024pxを下回った場合 @media only screen and (max-width:1023px){ margin-left:30px; } // 1024px〜1200pxの間 @media only screen and (min-width:1024px){ @include flexMarginLeft(10,40,1024,1200); } //1200px以上になった場合 @media only screen and (min-width:1200px){ margin-left:40px; } |
以上
コメント