on:2018年8月3日sponsorsWebデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。SCSSもサポートされているのも便利ですね。GridloverGridloverは完全無料で、登録などの面倒なことも一切不要です。Gridlover」をクリックすると、ツールを利用できます。Gridloverツールは、3つのパネルで構成されています。左から、HTML、プレビュー、CSS、です。3つのパネル上部のボタンで、それぞれの表示を変更できます。上部のボタンテキストはHTMLのパネルで、自由に編集できます。head内も編集できるので、フォントを指定することもできます。HTMLの編集HTMLは一度編集したら必要ないので、非表示にします。プレビューとCSSCSSとグリッドをオフにすると、全画面でテキストが表示されます。文字周りのデザインを調整するのは、簡単です。height」で行間を決め、「Scale」で見出しや本文の倍率を適用します。サイズの単位コードはCSSだけでなく、SCSSもサポートされています。