JavaScriptとjQueryで文字サイズ・行高・行取り・見出し行数から見出しのマージンを自動計算
ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...
