[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール
Post on:2018年8月3日
Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。
ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。また、SCSSもサポートされているのも便利ですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080310.png)
Gridloverは完全無料で、登録などの面倒なことも一切不要です。
下記ページの「Try Gridlover」をクリックすると、ツールを利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080312.png)
ツールは、3つのパネルで構成されています。
左から、HTML、プレビュー、CSS、です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-01.png)
3つのパネル
上部のボタンで、それぞれの表示を変更できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-07.png)
上部のボタン
テキストはHTMLのパネルで、自由に編集できます。
head内も編集できるので、フォントを指定することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-06.png)
HTMLの編集
HTMLは一度編集したら必要ないので、非表示にします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-02.png)
プレビューとCSS
CSSとグリッドをオフにすると、全画面でテキストが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-03.png)
全画面プレビュー
文字周りのデザインを調整するのは、簡単です。
上部のツールを利用して、「Font size」で基本サイズ、「Line height」で行間を決め、「Scale」で見出しや本文の倍率を適用します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-08.png)
基本サイズと行間、倍率を定義
サイズの単位は、px, rem, emを利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-04.png)
サイズの単位
コードはCSSだけでなく、SCSSもサポートされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018080311-05.png)
SCSSのサポート
sponsors