- ベストアンサー
pxからemへの変換に関して
サイトを構築する際に、単位としてpxを利用してきました。フォントサイズは%を利用しています。 今後リキッドレイアウト、もしくはエラスティックレイアウトに移行したいと思います。 その際に、単位としてemを利用すると思いますが、pxからemへの数値変換方法が良く分かりません。 計算方法もしくは、変換ツールが有れば紹介して頂きたいと思います。 検索した際に「Em Calculator」と言うツールがあるみたいですが、今はサイトが存在しないみたいです。 何かヒントでも有ればと思います。 横方向は文字数と言うことで、イメージが出来るのですが、高さ方向の数字を取得する悩んでいます。 もしかすると高さを指定することが間違い？？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
つい先日まで、Em Calculatorというサイトがあったのですが、今調べたらサーバーが見つからないとのこと 代わりに font-size－スタイルシートリファレンス http://www.htmq.com/style/font-size.shtml とか CSSフォントサイズ比較表 http://www.geocities.co.jp/SiliconValley-Bay/4726/fontsize.html とか。 ただし、絶対単位(mm,in,cm,pc,pt)、相対単位(em,ex,px,%)をどう使うかは、一概に、リキッドレイアウトならこう、エラスティックレイアウトならこうと一律には決められないですね。 確かに、ブロックの幅をemで指定すると、一行の文字数がおよそ決められますが、どのブラウザでも同じというわけには行きません。数％から１０％くらいの文字数のずれは起きます。また、フォントを大きくしている訪問者の場合は、悪くすると横スクロールが必要になります。 本文ブロックのみ、エラスティックレイアウトを採用したとしても、ユーザー側のウィンドウ幅やフォントサイズの自由度が下がることは否めません。 また、高さ方向はウィンドウ幅と文字数により、変動すべきものです。特に縦型のディスプレイでは、意味ありませんし、そもそもCSS自体、縦の長さを扱うことは表のセル要素以外考慮されていません。 DTP出身の方に多く見受けられる傾向ですが、あまりに、レイアウトに拘るあまりに、HTMLの趣旨--世界中のあらゆるコンピューターで利用できる--に反してしまったら、本末転倒なのではないかと。 もし、それ(レイアウト)に拘るなら、PDFなどはるかに優れた方式があります。 私が、エラスティックレイアウトを使用するのは、そのページに印刷用スタイルシート(media="print")を用意したときのみ、印刷用スタイルシートで使用する程度です。 今のところ、ブロックの寸法は（ウィンドウ/親要素の幅）を基準にした％で組み立てるという、リキッドレイアウトのほうがベストなのではないでしょうか？
その他の回答 (2)
もう一つありました。 計算しやすくするためにもfont-sizeの指定は親子階層内での一番子供な要素（なんて言えばいいんでしょう？文字を囲っている直接の要素）に指定すると計算が簡単です。（一括でfont-sizeを指定するのではなく、部分的に指定するというか） これはフォントサイズの大きさが切り替わる単位がブラウザによって違う（Operaがわかりやすく、0.25%ごとに切り替わる）ため、何度もfont-sizeの指定が重なるとemがブラウザ間で統一できなくなるためです。 変換とは微妙に外れているかもしれませんが、テクニックということで。
お礼
再度のアドバイスをありがとうございます。 フォントサイズに関しては、何となく理解出来ているつもりなんですが、横幅、高さの単位に、em を利用した場合イメージが湧かなかった為質問させて頂きました。 質問させて頂き、もっともっと勉強しなくてはと言う思いです。 アドバイスを頂いた事は、参考にさせて頂きます。
私の場合ですがxhtml 1.0 strictの場合、まずhtmlかbodyに対してfont-size:medium;を指定します。 そうするとだいたいのブラウザではフォントサイズが16pxになり、1em＝16pxとなると思います。 これをemで全体をレイアウトしていきます。 文字で指定するのはbodyなんかでfont-size:10px;等とするとIEで問題が出るからです。 ちなみにHTMLが互換モードな時はfont-size:medium;は16pxになりません。多分smallが16pxだったと思います。 IE6で互換モードになるバグ等を含めると条件付コメントを利用してmediumとsmall（場合によってはsmallとx-small）を指定することになると思います。 リキッドレイアウトやエラスティックレイアウトの場合、ウインドウより幅が大きくならないようにmax-widthを使うことになると思います。 ですがIE6以下ではこれに対応できないため、javascript等を利用して別途対応する、もしくはリキッド等の指定に子供セレクタを利用して別途pxで指定し固定された値も指定するなど一手間欲しいと思います。 まぁ突き詰めればやることはたくさんあるとおもいますが頑張ってください。
お礼
アドバイスをありがとうございます。 DTP 関連の人間ではないですが、文字の大きさを変更して、横幅が自動で広がるので有れば、高さ方向も広がらないかなと言う思いでした。 また。単位を純粋に、px から em に移行するにはと言う思いで質問しました。 今後ブラウザのバージョンが上がり、ブラウザのズーム機能が主流になれば、エラスティックレイアウトと言う考えも無くなるかもしれません。 エラスティックレイアウトにするには、単位を em にすれば良いとのことでしたが、現実的に 100px は、em にするにはどのような計算をすれば良いのと言い疑問でした。 色々試行錯誤してみてます。