自社で作成したツール「Liquid Layout CSS Generator」の紹介です。

グラデーションを表現したり、綺麗な模様を描いたり、アニメーションを実装したりと、少し難しいCSS表現を簡単に出力してくれる「CSSジェネレーター」は、Web制作に携わっている方であれば何度かお世話になったことがあるのではないでしょうか。

コーディングをより効率的に！楽にHTMLやCSSを生成できるジェネレータ8選（おまけあり）【2020年度版】

筆者も時折利用しているのですが、リキッドレイアウトに対応したものはあまり見かけたことがないなと思い至ったのが制作のきっかけです。本ツールでは、下図のようなリキッドレイアウト対応した図形のCSSを簡単に出力することができます。

▼ツールから出力した星形（常にウィンドウ幅の1/4の大きさになります。）

本ブログではツールの紹介に加え、vwを使ったコーディングの仕方についても少々数学的な観点から簡単に解説していきます。

リキッドレイアウトとvw

まずは、リキッドレイアウトが何なのかというところです。
以前BRISKの記事でも取り上げたことがあるので、宜しければこちらの記事もご確認ください。

リキッドレイアウトでデザインするコツ!!コーディングのやり方まとめ

リキッドレイアウト

今これを見ているのはPCから？スマホから？それともタブレットから？
iPhoneやiPad, MacにAndoroidなどWebを閲覧できるデバイスは多種多様ですが、それらの大きさはすべてまちまちです。近頃のWeb制作においては、PCに合った横並びのレイアウト、スマホに合った縦積みのレイアウトといったように、ユーザーがどのデバイスで見ても見やすいページを考えるのがスタンダードになっています。
たとえば横幅を500pxの要素があるとして、それをウインドウ幅1000pxのデバイスで見るときれいに全体が映りますが、ウインドウ幅400pxのデバイスで見たときは画面からはみ出してしまいます。

▼例：横幅が500px固定の菱形（スマホでご確認ください）

それを解消するのが、レスポンシブデザインです。
レスポンシブデザインにもいくつか種類がありますが、今回取り上げるリキッドレイアウトの最大の特長は、どんなウインドウ幅であろうと常にその幅を100％として要素の大きさを指定する点です。
たとえば上記の例だと、ウインドウ幅1000pxのデバイスでみたときに500pxで映ればよいので、常にウインドウ幅に対して50％の大きさで映るように調整すれば、ウインドウ幅が400pxのデバイスでもはみ出さず全体が映るようにできます。

▼例：横幅がウィンドウ幅の50%の菱形（スマホでご確認ください）

リキッドレイアウトでは基本的にpxに代わり、vwという単位を多用することとなります。

vwの使い方

「vw」とはviewport widthの略で、pxや％と同様にオブジェクトの幅や高さの指定に使用できる単位です。一度コーディングでよく使う単位についてまとめてみます。

単位①：px

px（ピクセル）といえばご存知の通り、画面表示の最小単位です。
コーディングで扱うピクセルは厳密にはこれと異なり、デバイスごとに設定されているCSSピクセルというものと結びついています。

▲例：デバイスごとのCSSピクセル
参考) https://webdesign-abc.com/tech/resolution-list/

pxで指定された値はいわゆる絶対値です。
「width:500px」で指定すれば、横幅は500CSSピクセルで描画されます。

単位②：%

pxの次によく使うのは%表示です。
%を指定した要素は、その直前の親要素の幅に対しての相対値で幅が決定します。

上図は、800pxの親要素に対して子要素を25%ずつにして表示させた例です。
親要素の幅が固定値であれば子要素もそのまま固定値になり、親要素の幅が可変であれば子要素もそれに合わせて値が変動します。

単位③：vw

vwと%は相対値で指定するという点では同じですが、%が親要素に対しての比率であるのに対して、vwはウインドウ幅（＝ビューポート）に対しての比率になります。
親要素の影響をそのまま受ける%とは違い、vwで指定した要素はウインドウ幅の値に常に比例し続けます。

▲ウインドウ幅1400pxのとき

▲ウインドウ幅960pxのとき

まとめるとこのような形です。

結局どうしてvw？

%もvwもどちらも相対値であることには変わりませんが、基準となるのが親要素か全体かというのが肝です。親要素とのバランスを重視したい場合（flexデザインのリストなど）は％、比較的孤立したオブジェクトである程度一定の見映えを保ちたい場合（背景画像など）はvw、というように使い分けが大事になります。
vwを使えばブレイクポイントを細かく設定しなくて済みますが、常にvwにすると逆に見にくくなる場合もあるので、どこに％を使ってどこにvwを使うかはある程度コーダーの経験に依るところが多いです。適切な場面で適切にvwを使えるコーダーは中・上級者といって差し支えないでしょう。

本ツールは「すべてのウィンドウ幅で、常に一定の比率で映る図形を作成する」というコンセプトで進めているため、すべての値をvwにして作成しています。

ツールのご紹介

ようやく本題となりますが、本ツールのご紹介です。

実際の使用例

まずは、ツールの使い方を順を追ってご紹介します。今回は、正三角形を出力してみます。

Ⅰ.出力する図形の色を選択する

① CSSの出力形式

RGBに代表されるカラーコードですが、CSSではそのほかにもHEXやHSLという形式を用いて色を指定することができます。下記は、CSS上で黒を表現するカラーコードの例です。

「CSS Output Type」では最終的にCSSとして出力されるコードを、どのカラーコード形式にするか選択することができます。
どれを選択しても出力される色は同じなので、特にこだわりがなければHEXのままで問題ありません。

② 色の変更

「Color Setting Here」の円をクリックします。

すると画像のモーダルが開き、お好みの色を選択することが可能です。
カラーピッカーで大まかに指定してもいいですし、「Detail Settings」を開くとカラーコードの値を細かく設定していくこともできます。

Ⅱ.図形の選択

Figure Typeから図形を選択できます。今回は例として正三角形を選びます。

Ⅲ.パラメーターの設定

①Display Width

基準となる画面幅を選択します。デフォルトは、日本で最もシェア率の高いPCのCSSピクセルサイズである「1920px」を採用しています。
下限の320pxは、最初期のiPhoneのCSSピクセルサイズです。レスポンシブデザインは、この320pxから1920pxの間で崩れないように調整することが目標です。

②Parameters

図形を一意に定めるために必要な値を設定します。
正三角形の場合はWidth（横幅）とRotate（回転角度）の２つです。
Resetボタンを押すと、初期状態の数値に戻すことができます。

Ⅳ.プレビュー

設定した図形が、右側の「Preview」にリアルタイムで反映されます。
Preview領域の枠線を「Display Width」で設定した基準幅に見立てて描画しているため、実際の見え方をある程度確認することができます。

「CSS Code」の部分には、出力されたCSSのコードが表示されます。
Copy CSSからクリップボードにコピー可能です。

計算方法

さきほどの正三角形を例に、ジェネレーターの裏で動いている処理を少しご紹介します。
少々数学的な話になりますが、是非興味のある方はご確認ください。

Ⅰ.vwの計算

前述の通りvwは、ディスプレイの横幅を100としたときの相対比なので、画面幅とvwで指定したオブジェクトの幅は常に比例します。

例）一辺が25vwの正方形の実寸（px）
ウィンドウ幅1920pxでみたとき⇒ 一辺480px
ウィンドウ幅600pxでみたとき⇒ 一辺150px

例）一辺が60vwの正方形の実寸（px）
ウィンドウ幅1920pxでみたとき⇒ 一辺1152px
ウィンドウ幅600pxでみたとき⇒ 一辺360px

これを一般化すると、次の式でvwを求めることができます。

先程の正三角形の場合を例として考えてみましょう。

手順1）横幅の計算

Display Width が1000px、Widthが500pxなので、
W= 1000、w=500 として代入するとx=100 * 500/1000 = 50 となります。
これをそのままwidth : 50vwとして出力しています。

手順2）高さの計算

正三角形の一辺と高さは必ず 2 : √3 の関係にあるので、横幅が決まると高さも自動的に決まります。
手順1）の値を利用して、50 * √3/2 ≒ 43.3013なので、height: 43.3013vwと定まります。

Ⅱ.図形の成型

width : 50vw height: 43.3013vwだけではただの長方形になってしまうので、長方形をくりぬいて目的の図形に近づけます。このときCSSプロパティのclip-path:polygon()を使用します。

手順3）clip-path:polygon()で長方形を削る

正三角形の頂点は底辺のちょうど中央にあるので、元の長方形の上辺の中点と下辺の両端を結べばちょうど正三角形になりますね。
そこで使うのが clip-path:polygon() です。
今回の場合だと、clip-path: polygon(0 100%, 50% 0, 100% 100%); と付け加えてあげるだけで、元の長方形から正三角形に変形させることが可能です。

補足：clip-pathプロパティについて

clip-path:polygon()は、長方形の左上のxy座標を（0, 0）、右上を（100%, 0）、左下を（0, 100%）、右下を（100%, 100%）として、目的の図形の頂点の座標を polygon() の中に羅列していくことで、その図形通りに長方形を切り取ってくれるCSSプロパティです。
これを駆使すれば、どんな複雑な多角形であってもCSSだけで表現することが可能です。

▼例）正十二芒星
正多角形が外接円を持つことを利用して、三角関数で各頂点の円弧上の座標を取得し、clip-pathの％表記に変換して出力しています。

まとめ

いかがでしたか。
vwを用いたコーディングは今やスタンダードになりつつあるので、これからコーダーを目指す人にとって身に付けておくには十分な価値があるものだと思います。min()やmax()など、vwと併用して扱うとより簡単で柔軟なCSSを書けるようになる関数も多く用意されているので、是非普段から積極的に取り入れてみてください。

本ツールで出力されるコードはあくまで一例であり、CSSでの図形の表現の仕方は無限大です。自分に合った色々なやり方を探してみてください。
需要があれば、このツールも少しずつアップデートしていければと思います。