CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper

Post on:2021年9月6日

sponsors

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。

shaperの特徴

shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。
例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。

スペースの量を変えてみた

フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。

ライトモードとダークモードにも対応しており、上部のパネルで変更できます。

ライトモードとダークモード

使い方は、簡単です。
上部のパネルの各スライダーで値を変更できます。

スライダーで簡単に値を変更できる

ページの基本的なレイアウトには、下記のUI要素が揃っています。

ページの基本的なレイアウト

上部のパネルの「Spec」をクリックすると、各UI要素と値が一覧表示されます。

タイポグラフィとスペースのスタイル

カラーのスタイル

レイヤーとダークモードのスタイル