[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール

Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。

ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。また、SCSSもサポートされているのも便利ですね。

Gridlover

Gridloverは完全無料で、登録などの面倒なことも一切不要です。
下記ページの「Try Gridlover」をクリックすると、ツールを利用できます。

Gridlover

ツールは、3つのパネルで構成されています。
左から、HTML、プレビュー、CSS、です。

3つのパネル

上部のボタンで、それぞれの表示を変更できます。

上部のボタン

テキストはHTMLのパネルで、自由に編集できます。
head内も編集できるので、フォントを指定することもできます。

HTMLの編集

HTMLは一度編集したら必要ないので、非表示にします。

プレビューとCSS

CSSとグリッドをオフにすると、全画面でテキストが表示されます。

全画面プレビュー

文字周りのデザインを調整するのは、簡単です。
上部のツールを利用して、「Font size」で基本サイズ、「Line height」で行間を決め、「Scale」で見出しや本文の倍率を適用します。

基本サイズと行間、倍率を定義

サイズの単位は、px, rem, emを利用できます。

サイズの単位

コードはCSSだけでなく、SCSSもサポートされています。

SCSSのサポート