コーディングこういう時どうする？

こんにちは。Keitaです。今回は久しぶりにコーディングの話題で、
コーディング作業をする上で、こういう場面に遭遇した時どうすればいいのかというのを書いていきたいと思います。参考になるかはわかりませんが、ヒントになれば幸いです。

デザインカンプがスマホがない
SVGが表示されない！
画像が重たい
1. TinyPngというサイトを使い圧縮
2. Gulpが使えればimageminを使うのも手
一番はクライアントとのコミュニケーション

デザインカンプがスマホがない

今までで、一番私が遭遇してきたのが、PCのみデザインカンプがあって、スマホがない状態でクライアントから渡されるケースがありました。最初の頃は困っていましたが以下のように対処できるようになりました。もちろん、発注者からの了解を得て質問してから作業に取り掛かってください。

スマホメニューを作る、ロゴ左、メニューボタン右

ロゴを左にし、右にメニューボタンを置き、メニューボタンをタップしたら、上もしくは右から開く形式で作ることです。メニューボタンの例は以下です

HTML

<div class="menu">
<span></span><span></span><span></span>
</div>

SCSS

.menu{
        background:(デザインのベースカラー）;
        width:50px;//できればvwがいい
        height:40px;//できればvwがいい
        position: relative;

 
   
    span{
        width:30px;
        height: 2px;
        display:block;
        border-top:2px solid (＃fffか#333);
        transition: all ease-in 0.4s;
     
        &:nth-child(1){
            position: absolute;
            top:pxtovw(30);
            left:50%;
            transform: translateX(-50%);
        }
        &:nth-child(2){
            position: absolute;
            top:pxtovw(40);
            left:50%;
            transform: translateX(-50%);
           
        }
        &:nth-child(3){
            position: absolute;
            top:pxtovw(50);
            left:50%;
            transform: translateX(-50%);
          
        }
　　　  &.opened{
　　　　　transition: all ease-in 0.4s;
        span{
            &:nth-child(1){
                top:pxtovw(40);
                transform:translateX(-50%) rotate(45deg);
                
            }
            &:nth-child(2){
                top:pxtovw(40);
                transform: translateX(-50%) rotate(135deg);
               
            }
            &:nth-child(3){
                display:none;
            }
        }
    }
}

解説

menuというクラスは、メニューボタンのべース、spanには3本線のメニューが入ります。
jsにクリックされたらmenuにopenedというクラスを付与し、
spanにはtransformのrotate（回転）を使い、×に変化させるという使い方をしております。

transitionでアニメーションさせてあげます。

VWとは？

以前までは%で可変するのが一般的でしたが、最近ではVWという単位を使うことで、
画面幅が広がっても縮まっても同じ見え方で表示されるようになります。
%やpxだと文字などが同じ大きさなため、拡大縮小した時、小さくなったり想定より大きくなったりしたりします。

vwの計算

これは流石にSassを使った方が早いです。

$viewport:375; //デザインカンプをみて設定
@function pxtovw($num, $width: $viewport) {
    @return floor-decimal(1vw * $num / $width * 100);
}

viewportという変数にデザインカンプの幅を設定し、デザインカンプの設定pxを

pxtovw(32)//32pxの場合

を設定すると自動的にvwにしてくれます。

右？左？上？

メニューボタンをクリックした時、メニューがどこからか開くかはこれは絶対に依頼された方に聞いてください。もし想定している以外だと手戻りが発生します。

画像が2〜３列あるもの

これは、flexにしろfloatにしろ、解除し、1列にした方が無難です。
インナー幅いっぱいに表示するようにしましょう。
書き出し画像によっては荒れて表示することがありますのでRetina対応した、2倍書き出しの画像で書き出すようにしましょう。

SVGが表示されない！

SVGで書き出した画像が表示されないケースがあります。

フォトショやイラレで書き出したSVGがChromeで表示されないケースがあります。

SVGをエディタで開いて

xlink：href = "data：img/png;　→　xlink：href = "data：image/png;

でに書き換え、保存すると表示されます。

画像が重たい

2倍に書き出していると画像が、サーバーにアップすると表示が重たいケースがあります。
通信に影響が出ますし、SEOにも影響が出てきます。

TinyPngというサイトを使い圧縮

PNGが画像の重たい一要因だと思いますので、圧縮しましょう。ドラックアンドドロップでできます。
https://tinypng.com/

Gulpが使えればimageminを使うのも手

いちいちサイトを使うのがめんどくさい人は、Gulpのユーティリティにimageminというものがあり、フォルダに入れれば自動圧縮できますので、Gulpが使えると便利です。
過去記事にGulpの記事がありますので、ご参照ください。
https://z-tree.jp/web/cording/sass-gulp/