center-circle.net

今まで、特に意識をしていなかった「line-height」。
意識をしてなかったというのは、誤解があるかもしれないが、、、

ただ、案件をこなしていくなかで、どうも腑に落ちないことがあったので、
いろいろ検証してみた結果、ちょっとした法則を発見。

とても、当たり前な話なんですがｗ

WEB制作者にとっては、特にコーダーにとっては、
この問題は、しっかりと頭に入れておくべきだと思う。

ということで。
「俺流 line-heightの求め方」をご紹介。

▼俺流公式
———————————————————
line-height = ( FontSize + Font間余白 ) / (FontSize)
———————————————————
と言う具合になる。

具体的に数値を当てはめてみると。。。
———————————————————
●FontSize = 12px
●Font間余白 = 8px
———————————————————

上記の場合
———————————————————
●line-height
= ( 12px + 8px ) / 12px
= ( 20px ) / 12px
= 1.666666667
※小数点第三位以下を切り捨て。

∴
line-height = 1.66
———————————————————
これで、line-heightを簡単に求めることができる。

みなさんも試してみてください。

【余談】
「line-height」と「font-size」の関係って、意外と難しいと思ってた。
だけど、理屈が分かれば、なんてことはない。

歌手であり作家。
川上 未映子さん。
「乳と卵」で受賞。
面白そうですね。

受賞をきっかけに、CDも売れるんだろなー。

DOMとは？

W3Cから勧告されている、HTML文書やXML文書をアプリケーションから利用するためのAPI。
Level1～3まで勧告されている。
(wikipediaより引用)

• 「D」= ドキュメント
• 「O」= オブジェクト
• 「M」= モデル

便利な4つのDOMメソッド

getElementById

• 指定されたidを持つ要素ノードに直接アクセスすることを可能にする。
• ドキュメントオブジェクトに統合したファンクション。
  ファンクションの後ろには必ず引数を入れるカッコが付く
• getElementByIdが取る引数は1つだけ

document.getElementById(id)

getElementsByTagName

• 指定された種類のタグを、全て要素として含む配列にアクセス可
• 引数は1つだけ
  引数は要素名になる
• 複数の要素にアクセスできる

element.getElementsByTagName(要素名)

getAttribute

• ファンクションで引数は1つ
• 取得したい属性を取る
• 要素ノードオブジェクトにのみ使うことができる

object.getAttribute(属性)

setAttribute

• 属性ノードの値を変えるために使える
• 要素ノードにしか作用しないファンクション
• 引数を2つ取る

object.setAttribute(属性,値)