11月になって1週間が過ぎてきてますね。

本格的な寒さになってきてるこのころ…

ニュースを見ると、北部のほうではもう初雪とか始めてるそうですね。

寒さが続く中、インフルエンザも蔓延してるみたいなんですが…

感染しないように気を付けてください。

さてと、話題を取り戻して…

Webページに空白の空け方のパターン

他業者が制作した空白の空け方が上下バランスを取れたものがあるし、上から下へ空白の空け方のバランスもありますね。

ただ、空白の空け方の単位の使い方が、バラバラなんですね。

「px」、「em」、「rem」などの単位の使い分けをしっかり区別してほしいものです。

こちらは基本的に、後者のことを考えて、「px」の単位を使用しています。

用途によって使い分けに「em」、「rem」を使ってます。

例えば、行送りの設定を行うときに「line-height:1.75em;」を使ったりしています。

emの単位をpxに直して計算するためにはどうしたらいいか？

親要素が「24px」に設定して、下の空白を「margin-bottom: 1em;」に設定した場合の「px単位」の計算

1em = 24px × 1.0em = 24px

つまり、「margin-bottom: 24px;」になります。

行送りが「line-height:1.75em;」に設定した場合、親要素のフォントサイズが「16px」に設定したときの計算

1.75em = 16px × 1.75em = 28px

行送りが「28px」になります。

計算が苦手な方もいますが、これだけは最低でも覚えてほしいです。

あと、計算苦手な方に、とっておきのサイトをご紹介しますね。

計算が苦手な文系のための コーディング単位計算ツール面倒なpxからemへの変換や、line-heightの計算、レスポンシブを考慮した横幅可変の計算など、コーディング時に計算機が必要になる値の変換をまとめて行えるツールです。

 coding-calc.com

いろんな単位の組み合わせもあって、いい味が出てますね。

でも、Webページには見やすさ、メリハリを気を付けてデザインをしてください。

では、また！