#author("2024-04-12T07:25:56+09:00","default:massy","massy")
#author("2024-04-12T07:26:53+09:00","default:massy","massy")
*1emは何ピクセルか知りたい [#jc124e01]
100%=1em=1rem＝16px

そこで各要素の文字サイズの基準となるhtmlの文字サイズがとなるよう、下記の値を設定します。


em（エム）による指定
冒頭でも説明したように「em（エム）」はもともと活版印刷のころに大文字の「M」の大きさを元にして1文字分の大きさを表す単位として使われていた単位で、Webサイトにおける文字サイズ設定でも、「1.5em＝親要素の文字サイズの1.5文字分」というような形でサイズ指定を行う形で用いられます。

基準とする親要素の文字サイズを「10px」と指定した場合、
1.4em＝14px
2em＝20ｐｘ
というように、デザインデータとの文字サイズの整合性も取りやすく、デザイン制作時にも「文字サイズの1.5倍」というように指定されることの多い行間や他の要素のサイズ指定についても、このemを使用することで、全体のサイズ比率を保って画面全体の見た目を調整しやすい、というところが特徴です。

しかし、上の「％」のところでもご説明したとおり、「em」での文字サイズ指定においてもも親要素の文字サイズに依存した指定のため、要素が入れ子構造になっているような場所では文字サイズが意図したように設定しづらい場面が出てきます。

パソコン工房NEXMAG
https://www.pc-koubou.jp/magazine/23912#:~:text=100%25%3D1em%3D1rem%EF%BC%9D16px&text=%E3%81%9D%E3%81%93%E3%81%A7%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E6%96%87%E5%AD%97,%E5%80%A4%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%BE%E3%81%99%E3%80%82
https://www.pc-koubou.jp/magazine/23912#section01
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS