【絶対覚えて欲しい】修正激減、単価アップのvw関数を使用したコーディング方法

悩んでいる人

・コーディング工数を減らて単価アップしたい

・修正回数をなるべく減らしたい

・画面幅に応じて、デザインを崩さずにコーディングしたい

こんな疑問や悩みに答えます。

今回の記事は、コーディングをしている方にはぜひ実践してほしい、オススメのコーディング方法になります！

自分は３年間ほどコーダーを経験してきて、このコーディング方法にしたことで以下のメリットがありました。

コーディングスピード、単価アップ
画面幅での修正はほぼ0でストレス激減
クライアント様には毎回満足していただける
自分でも満足できるサイトを制作できる

正直メリットしかないので、ぜひこれを機に覚えてみてください。

1点注意点として、こちらの方法は新規サイトで制作する場合でしか使うことができません。
既存サイトを改修する場合は、既存サイトのコーディング方法に合わせる必要があるためです。

とらまる

このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。今年コーダーとして3年目で、これまでのWeb制作実績は60件以上になります。

この記事を書こうと思った背景は、自分がこれまでコーダーとして経験してきた中で、必ず修正に入ってくるのが、画面幅に応じてのデザインの崩れによる修正でした。
毎回修正対応に追われ、予定よりも工数がかかり、その分単価も下がっていました。
その中で見つけた効率的なコーディング方法になるので、ぜひ多くに人に参考にしてほしいと思い書くことにしました！

Scssでvwの関数設定
1. vwとは
2. vw関数の設定
vw関数を使用した記述方法
より早く実装するために
最後に

Scssでvwの関数設定

今回、自分が紹介するコーディング方法は、vwをうまく使用してコーディングする方法になります。

vwとは

コーディングをしているときに、要素や大きさを指定することがあります。その単位にpxや％をよく使用すると思いますが、その中に今回使用するvwがあります。他にvh、vmin、vmaxなどもあります。

これらは、画面幅に応じてサイズを変更する際に役に立つ単位になります。

vwとは、Viewport Height（ビューポートの高さ）の略で、画面の高さを基準に大きさを指定する単位になります。

例えば、画面幅が1400pxの場合、1vwは14pxになります。
この単位を使うことで、画面幅に応じて要素の大きさを自動的に調整することができます。

vw関数の設定

では、vwについて説明したところで今回使用する重要な関数について説明していきたいと思います。

まず、今回の関数設定やコーディングにおいて、必須のスキルがScssという技術になります。

簡単に言うとCSSよりも手間がかからずに書ける記述方法です。

こちらの技術を知らない方は、一度Scssと調べてScssの技術について学んでください。
今後コーディングを行う上では、必ずと言っていいほど使う技術にもなります。

では、本題のvwを使用した関数の記述を以下に表示させていただきます。
Scssファイルに以下の記述を追加します。

//PC幅の幅が可変に応じて、サイズ調整
@function get-pc-vw($value) {
  @return math.div($value, 1440) * 100vw;
}

//SP幅の幅が可変に応じて、サイズ調整
@function get-sp-vw($value2) {
  @return math.div($value2, 375) * 100vw;
}

上記は、PCサイズとSPサイズでそれぞれ関数を設定しています。

可変場所は、1440、375の数値部分になります。
1440と375については、デザインでいただいたPCとSP最大幅のpx値を入れてください。

vw関数を使用した記述方法

次にコーディングする際の記述方法について説明していきたいと思います。

簡単に説明するといつもpxで指定している全ての箇所を関数の記述方法にします。

以下に記述例を記載します。

.btn {
 font-size: 16px:
 padding: 12px 20px;
 border: solid 1px #000;
 
 @include mq(md) {
   font-size: 14px;
   padding: 12px 20px;
 }
}

↓↓↓↓↓↓
.btn {
  font-size: get-pc-vw(16);
  padding: get-pc-vw(12) get-pc-vw(20);
  border: solid get-pc-vw(1) #000;

  @include mq(md) {
    font-size: get-sp-vw(16);
    padding: get-sp-vw(12) get-sp-vw(20);
    border: solid get-sp-vw(1) #000;
  }
}

関数で指定した、get-pc-vw($value)、get-sp-vw($value2)を使用して、px部分を関数の記述にしています。一見めんどくさそうですが、慣れればそんなに苦労はしないです。
また、PCサイズとSPサイズで毎回関数を変える必要があるので、忘れずに記述してください。

より早く実装するために

上記をより早く実装していくために、get-pc-vw($value)、get-sp-vw($value2)の関数をスニペットとして登録しておくと良いです。

以下に自分が登録しているスニペットの記述を記載させていただきます。

	"vwpc": {
		"prefix": "vwpc",
		"body": [
			"get-pc-vw($1)",
		],
		"description": "pc用のvw調整"
	},
	"vwsp": {
		"prefix": "vwsp",
		"body": [
			"get-sp-vw($1)",
		],
		"description": "sp用のvw調整"
	},