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

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

UI要素のスタイルを表示を確認しながら値を調整できるオンラインツール

shaper
shaper -GitHub

shaperの特徴

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

スペースの量を調整

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

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

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

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

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

shaperの使い方

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

上部のパネル

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

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

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

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

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

サイトのキャプチャ

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

サイトのキャプチャ

カラーのスタイル

サイトのキャプチャ

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

sponsors

top of page

©2021 coliss