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

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

output要素とは?

計算結果やユーザの操作による結果を示すための要素です。

例)font-sizeと単位なしのline-heightをinput要素で設定すると、上下何px行間として足されるかをoutput要素で出力して確認できるようにしてみます。

/ =

属性名 値を示すもの 指定可能な値
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

参考:こんなCSSからはそろそろ卒業しよう
 
ちょっと無理やリまとめた感が出てしまいましたが..
便利なhtmlやCSSをどんどん取り入れて、効率的かつ汎用性の高いコーディングを極めていければと思います。💪

  
Twitte🍠🥔🥕🥦@_kohimoto_
Instagram🍠🥔@_kohimoto_

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA