CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper
Post on:2021年9月6日
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。
![UI要素のスタイルを表示を確認しながら値を調整できるオンラインツール](http://coliss.com/wp-content/uploads-202103/2021090401@2x.png)
shaperの特徴
shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。
例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。
![スペースの量を調整](http://coliss.com/wp-content/uploads-202103/2021090405.gif)
スペースの量を変えてみた
フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。
ライトモードとダークモードにも対応しており、上部のパネルで変更できます。
![ライトモードとダークモード](http://coliss.com/wp-content/uploads-202103/2021090402.gif)
ライトモードとダークモード
shaperの使い方
使い方は、簡単です。
上部のパネルの各スライダーで値を変更できます。
![上部のパネル](http://coliss.com/wp-content/uploads-202103/2021090404-00.png)
スライダーで簡単に値を変更できる
ページの基本的なレイアウトには、下記のUI要素が揃っています。
![ページの基本的なレイアウト](http://coliss.com/wp-content/uploads-202103/2021090404-01.png)
ページの基本的なレイアウト
上部のパネルの「Spec」をクリックすると、各UI要素と値が一覧表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021090404-02.png)
タイポグラフィとスペースのスタイル
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021090404-03.png)
カラーのスタイル
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021090404-04.png)
レイヤーとダークモードのスタイル
sponsors