デザインやコーディングの文字組に最適？よくある日本語フォントをリアルタイムで調整→確認するツール

みなさんは、デザインを造ったり、もしくはデザインなしでコーディングを始めるとき、文字組みをどうしていますか。

など。

PCかスマホ、どちらを優先して考えるかにもよりますが、僕の場合は正直IllustratorやPhotoshop上でデザインをしていても、実際の画面で表示された時の、文字が画面を占有する具合などは正確につかめない時が多いのです。でもちょうどいい文字組のサイトがみつからなかったり。

じゃあ簡易的に編集しつつみれればいいよね、ということで、「日本語フォントの按排（あんばい）確認帳」なるものを作りました。

サイトデザイン、コーディング時の日本語フォントのline-heightやfont-weightなどをチェックするオンラインツール！

レイアウトにflexboxを使っているため正確なレイアウトで閲覧してこそのツールということで、ブラウザはIE10+の環境でご覧ください。ほかモダンブラウザに関してはある程度大丈夫だと思います。

ツールではグレーの背景のデモ部分にｈ１～h6と、pタグを使用しています。

これらはmarginの調整などを行っていないので、ブラウザのCSSのみが適用されている状態となってます。

Google Fonts + 早期アクセスで使える日本語フォントも、ツール上で再現が可能です。（2016年12月現在）

ニコモジとかも使えます。

HTML5からのcontentEditable属性を指定しているため、見出しや本文をクリック・タップするとその個所を編集してご覧いただけます。

また、メニューからは一括で編集できます。

IE10+, Edge, Chrome, Safari, Firefox, Android5.0+,iOS

一部未検証ですのでバグあったら教えてください。。

でわ！