web-dev-qa-db-ja.com

HTML / CSSのピクセルとポイント

HTMLページを作成するとき、marginsのようなものをピクセルまたはCSSのポイントで指定する必要がありますか?

それらのうちの1つは、他のものよりも優れた実践であると考えられていますか?どちらかに長所と短所はありますか?

49
Mehrdad

pxまたはemを使用

ポイント(pt):ポイントは伝統的に印刷媒体(紙などに印刷されるもの)で使用されます。 1ポイントは1/72インチに相当します。ポイントは固定サイズの単位であり、サイズを拡大縮小できないという点で、ピクセルによく似ています。

通常、1em = 12pt = 16px = 100%

[結論]

勝者:パーセント(%)。

  • JohnBのメモ:これはTEXT。のためです。明らかに、「マージンのようなもの」について尋ねました。 (paddingも意味すると思います。)そのためには、pxまたはemをお勧めします。個人的には、特定の状況に応じて切り替えます。

その他の記事

ポイント値は印刷CSS専用です!

(下のコメント)

ポイントは印刷用ですか?いいえ

ポイントは印刷専用ではありません。理論的には、ポイントは絶対的な尺度を定義するためのものです。画面と選択した定義(解像度ではない)によって、解像度(1インチあたりのピクセル数)が大きくなる(150dpi)か、非常に小さくなる(75dpi)ため、ピクセルは絶対的ではありません。つまり、ピクセルはサイズ、またはその半分のサイズになります。つまり、画面上で完全に判読できるように設計したテキストは、クライアントの画面上で大きすぎる(「テキストを小さくしてください」)か、隣人の画面で読むには小さすぎる(「ねえ、あなたのウェブサイト先日話してくれましたか?あなたがあなたが取り組んだと言ったのは…まあ私はテキストをとてもうまく読むことができませんでした、それはとても小さいです」。

ポイントはこの問題の解決策です。ただし、ブラウザとオペレーティングシステムはそれらを管理する必要があります。基本的に、次のことを意味します。

ブラウザは、指定された値(10ptなど)と画面の実際の解像度を使用して、ピクセル単位で表示サイズを計算する必要があります。オペレーティングシステムは、デフォルト値ではなく、実際の現在の解像度を伝達する必要があります。

また:

34
JohnB

経験則は次のとおりです。

画面表示用のピクセル。印刷のポイント。

'em'または '%'(およびあまり知られていないrem)は、より柔軟なレイアウトに適しています。

emは、現在のフォントの文字「m」のサイズに基づく測定単位です。 emでサイズを指定すると、フォントサイズに基づいてサイズを設定できます。つまり、フォントを変更でき、それに合わせてレイアウトが変更されます。

ただし、固定サイズを使用する必要がある場合がたくさんあります。その場合、ほとんどのWebページはピクセルベースの画面に表示されるため、通常pxが最適です。しかし、大量に印刷されるページを作成する場合は、ポイントベースのレイアウトを持つ印刷固有のスタイルシートを作成できます。

一般的に、emまたはpxよりもptをお勧めします。 pxを使用している場合、ページ上に画像などのピクセル単位の要素があり、これに準拠するにはレイアウトの残りの部分が必要です。この場合、画像はピクセル単位であるため、スタイルシートも同様です。また、ポイントは印刷の測定単位であるため、画面上での表示方法の保証はありません。pxは画面ベースであるため、画面上のクロスブラウザーおよびクロスプラットフォームでより一貫した外観が得られます。

ちなみに、このページではさらに詳細な情報が得られる場合があります。 http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

9
Spudley

ポイントは、高さが1/72インチなので素晴らしいです。テキストの高さを知っています。ピクセルの問題は、解像度が高いほど小さくなることです。 ピクセルは、背景画像の周りにテキストをラップしたい場合に最適です。少し手間がかかりますが、見栄えの良いページになります。ピクセルはIEでサイズ変更できないと聞いたことがあります。したがって、フォントサイズを大きくしたい場合はできません。IEを使用しないでください。言うことはできません。 EMは、ブラウザでフォントサイズを定義する方法を自分に任せます。Emsとパーセンテージを使用すると簡単になります。常にポイントを使用します。

[...]

いいえ、ポイントは最良ではありません。このスレッドを見つけた人には、それを読んだことを忘れてください。これはWebデザインフォーラムです。画面メディアにページを表示するため。 ポイントは、印刷デザインの目的のためだけにCSSに含まれています。印刷メディアのスタイルシートの場合%およびemsはなのでスケーラブルではありません。あなたが何らかのウェブデザイナーなら、ページにアクセスできるようにする必要があります。ポイントを使用することは、それに対するすぐ上の攻撃です。

http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

おもしろいです、誰もが「ピクセルまたはポイント」ではなく「ピクセルまたは%/ em」と答えます。

両者に違いがあるとは知りませんでした。

詳細

編集: さらに詳しい情報...公式のもの!

font-sizeをptで指定したり、画面スタイルシートのその他の絶対的な長さの単位を指定したりしないでください。プラットフォーム間で一貫性のないレンダリングが行われ、ユーザーエージェント(ブラウザなど)によるサイズ変更はできません。 固定された既知の物理的特性(例:印刷)を備えたメディアのスタイリングにそのようなユニットを使用し続ける.

6
Kraz

上記のジョンBの答えは、最良かつ最も正確です。私は彼の上の答えによって生じた混乱の可能性を指摘したかっただけです。タイポグラフィの「em」は、選択したフォントの文字「m」の幅です。フォントの高さを指定するために、プリンタ/タイプセッターは「x height」を使用しました。これはフォントの小文字のxの高さです。

ジョンが指摘するように、ptは1/72インチに等しい測定単位です。モニターはさまざまなピクセル密度(72 /インチ、96 /インチ...)を持っているため、HTMLドキュメントで物事のサイズを決めるのは一般的に良い方法ではありません。

Emは、古いタイポグラフィユニットに直接関係し、優れた相対的な尺度になります。画面サイズが拡大縮小されると、それに合わせてフォントサイズも拡大縮小されます。マージンにemを使用する場合、フォントサイズに応じてスケーリングされます。これは一般的に良いことです。

ただし、マージン、パディング、および直接フォントに関連しないすべてのものについては、remまたは「相対em」を使用するのが最善です。これを行う最善の方法は、最初に本文またはhtmlタグのデフォルトのフォントサイズを宣言することです。 body font-size = 16pxのようなものが開始するのに適した場所です。次に、ドキュメント内の他のすべての場所で、テキストにemを使用し、その他すべてにremを使用します。または、パーセンテージを使用します。どちらも正常に動作します。 emやremのように、%は元の16px = 100%のフォントサイズに相対的です。

ドキュメント内のすべては、16%の100%フォントサイズの初期設定に比例して拡大縮小されます。そうすれば、ドキュメントでピクセル測定を1回だけ使用できます。これは、後でメディアクエリを設定してサイズとマージンを調整し、異なるデバイスディスプレイで異なるピクセル密度に対応する場合に便利です。 bodyタグには、その1つの初期宣言に対するクエリのみが必要です。それ以外はすべて調整され、変更する必要はありません。

ただの考え、maxw3st

2
Max West

ピクセルを使用するように言っている人は誰でもwrongです。ピクセルは正常に機能しますが、単に必要ではありません...ポイントは絶対的な尺度を指定するための完璧な方法であり、私たちがウェブ上で一般的に取り組んでいるスケールでは、それらはより頻繁に好ましい尺度ではありません。

ポイントの横には、パイカ、インチ、センチメートルなどもあります。これらのどちらかを選択することは、「この部屋をフィート単位またはインチ単位で測定する必要がありますか?」というようなものです。常識をガイドにしましょう。彼らはすべて仕事を成し遂げます。

いくつかの答えで出てきたEmは、適切な場合にのみ使用する必要があります。つまり、「このことをスケーリングするとき、私はこの他のことをスケーリングしたい」ということです。それが相対的な対策の目的です。それがあなたの元の質問の範囲を超えていることは知っていますが、「常にemを使用する」ことについてのナンセンスのいくつかに対処しなければなりませんでした。

ところで、ピクセルは物理的なピクセルに等しくありません。今日、スタイルシートのpxは1/96インチを意味します。これが私がそれらを使用しないと言う理由です。ほとんどの人はこれを知りません。実際のピクセルを指定していると考えて使用します。これらの人々を真剣に受け止めることはできません(人々を非難するわけではありませんが、物事の状態の紛らわしい性質を非難するため、ピクセルをなくすキャンペーンをしています)。さらに、ピクセルが本当にピクセルを意味する場合、寸法を指定する恐ろしい方法になります。制御できない任意の画面解像度に基づいて、物事がランダムに縮小および拡大するという事実について話します。いいね!ピクセルに近づかない!!!実際には機能しますが、ブラウザメーカーやOSの人々の目に見えない努力を怠るだけで、理論上は意図を特定する恐ろしく曖昧な方法です。

2
Blake Taylor

Pixelsは私にとってより美的であり、より良い実践と考えられていると思います...

1
Teak

それはあなたが何をしようとしているかに依存すると思います。

重要な質問は、距離がウィンドウに合わせてサイズ変更する必要があるということです。いくつかの単位は相対的ですが、いくつかは(ピクセルやポイントのように)相対的ではありません-簡単な説明は here です。

ポイントはあまり使用されていませんが、絶対測定が必要な場合はpxがより一般的です。

1
brabster

答えは次のとおりです。何のためにマージンを使用していますか?それらはバランスのとれた、サイズ変更可能なレイアウトの統合された部分ですか、それともエッジの周りにガターを提供するだけですか?最初のケースでは割合がよく機能し、2番目のケースではピクセルが適切に機能します。

さまざまな可能性を試して、ドキュメントに最適な方法を判断する必要があります。この場合「正誤」はないため、最適な答えを選択できます。

0
George Cummins

ほとんどすべてにピクセルを使用しています。

私にとっては、より正確にコントロールできるように感じます。

ウィンドウに合わせて動的にサイズを変更する必要があるいくつかのことについては、パーセントを使用します。

編集:

「em」とは?

0
Sparky