コーディング

「em計算ツール」とは??

  • このエントリーをはてなブックマークに追加

皆さん、こんにちは。制作部の関です。

 

私がよく使う(というか必須)ツールサイトである、

「em計算ツール」のサイトについてご紹介致します!

 

「em計算ツール」とは??

 

 

そもそもemとはなんぞや??と言うところからご説明致します。

皆さん、通常であればフォントサイズなどは「px」

でcssを書かれているかと思います。

しかし実際の現場ではフォントサイズは

「px(ピクセル)」ではなく「em(エム)」で書かれている場合がほとんどです。

例えば子要素に16pxと指定すると

親要素がどんなフォントサイズを指定されていようと、

16pxと指定された16pxになるといういわゆる固定される「絶対単位」です。

一方、emは使われている書体(フォント)や、

CSSで指定している文字の大きさによって変化する相対単位になります。

例えば親要素が16pxなら、

子要素を2emにすると32pxとしてブラウザで表示されます。

これがどういうことかもうお分かりですよね?(ワ○ップジョ○ノ風)

 

つまり文字の大きさを修正する際に

一番大きい親要素だけpxや%にして

後の子要素のフォントサイズをemにしておけば、

後から文字の大きさを変えたいけど全体のバランスを崩したくない!!

という時に親要素だけ変えれば全体のバランスを崩すことなく、

文字の大きさを変えることができます!!!

 

 

ここで現場の話に戻ります。

我々コーダーはデザイナーさんから頂いたイラレデータを元にコーディングをするのですが、

そのイラレデータに入力されているのは全て「px」です。

便利なem に変えるためには計算をしなくてはいけません。。。。

 

そこで活躍するのがem計算ツールなのです!!!

親要素からの子要素を一発で素早く計算してくれます!

line-heightの計算もできますのでぜひ使ってみてください!

 

以上、制作部の関でした!