デザイン Edit : 2018.10.03 Update : 2024.11.07

HTML5の要素<output>を使ってline-heightの上下余白を計算する

私事ですが、最近HTML5 レベル1認定を取得しました。HTML5ではたくさんの要素が新しく追加されていて、今まで苦労していたものが簡単に実装できるようになったりしています。あとは対応ブラウザが追い付いてくれれば…
そこで最近学んだHTML5の<output>と、CSS line-heightの記載の仕方について、まとめて記事にします✍

Contents

output要素とは?
ちなみに….

output要素とは?

計算結果やユーザの操作による結果を示すための要素です。
例)font-sizeと単位なしのline-heightをinput要素で設定すると、上下何px行間として足されるかをoutput要素で出力して確認できるようにしてみます。

<form onsubmit="return false" oninput="lines.value=((a.valueAsNumber*b.valueAsNumber)-a.valueAsNumber)/2">
  <label>font-size: <input name="a" type="number" style="width:80px;"></label> /   <label>line-height: <input name="b" type="number" style="width:80px;"></label> = <output for="a b" name="lines" style="display:inline-block;"></output>
</form>

<label>font-size: <input name="a" type="number" style="width:80px;"></label> / <label>line-height: <input name="b" type="number" style="width:80px;"></label> = <output for="a b" name="lines" style="display:inline-block;"></output>

</form>

属性名	値を示すもの	指定可能な値
for	計算元となったフォーム部品を示す	計算元となった要素のid属性やname属性の値(空白文字区切り)
name	フォーム部品の名前	テキスト
form	フォーム部品を特定のform要素(id属性の値で指定)と関連付ける	id 属性の値

ちなみに….

line-heightを単位なしで設定するメリットは ❛レスポンシブのときにPCもSPもほぼ同じ行間を保てて便利!❜という点です。
例)font-size:16pxの場合でline-heightをそれぞれ以下のように設定した場合の上下余白まとめ

単位つき line-height:20px	(line-height – font-size) / 2 の数値が上下に行間として足される	(20px – 16px) / 2 = 2px
%つき line-height:150%	((line-height * font-size) – font-size) / 2	((1.5 * 16px) – 16px) / 2 = 4px 150% = 150 ÷ 100 = 1.5
数値のみ line-height:1.5	((line-height * font-size) – font-size) / 2	((1.5 * 16px) – 16px) / 2 = 4px