web-dev-qa-db-ja.com

CSSでピクセルを操作するのは悪いですか?

CSSでパーセンテージの代わりにピクセル数を使用することは互換性の点で悪いですか?低解像度はどうですか? 1〜100の範囲でそれらを使用しても大丈夫ですか?

82
loya

答えは主にあなたの状況に依存するので、これは難しい質問です。

ピクセルはそれほど悪くはありません。私もほとんど使用しています。 (フォントサイズの場合もあります。)
私は通常、レイアウトの外側のブロック要素を特定のサイズ(固定幅のレイアウトのピクセル、流動的なレイアウトのパーセンテージ)で固定し、内側の要素では可能な限りパーセンテージを設定します。

パーセンテージやemsで単純にスタイルを設定できない要素がいくつかあります。特に、そのような原則を理解していないグラフィックデザイナーからのより凝ったものがあります。

例:サイトにシンプルなスタイルの列がある場合、その幅をパーセンテージに簡単に設定できますが、特定の幅の背景画像がある場合はスケーリングを考慮して設計されたものではなく、固定幅でのみ見栄えがします。このような場合、ページの残りの部分が残りの幅を正しく占めるようにする必要があります。

パーセンテージ付きのピクセルを一緒に使用できることに注意してください。
たとえば、これは私の最新のWebアプリの1つからのスニペットです。

min-width: 800px;
width: 80%;
max-width: 1500px;

選択は、実現したいデザインまたはレイアウトにも依存します。

fixed-widthレイアウトの場合、ピクセル値は問題ありません。デザイナーが、サイズ変更の方法を考えるのも非常に複雑な、本当に凝ったものを含むPhotoshop画像を提供する場合は、間違いなくこれを選択する必要があります。

レイアウトをdynamicにする必要がある場合は、パーセンテージを使用して、解像度の変更に応じてレイアウトが拡張されることを確認する必要があります。上記のコードスニペットを使用して、そうでなければ異常に見えるシナリオで見栄えを良くします。

一部のレイアウト(たとえば、StackOverflowがすべてのスペースを占めるかどうかを想像してください)は、たとえば、幅がかなり醜いように見えます。 1920ピクセル-線幅がめちゃくちゃ高いので、読むのが非常に不便になります。
これは何 max-widthはです。一部の動的レイアウトでも、使いやすさと読みやすさを最大化するために、サイトの最大幅を制限する必要があります。

また、小さい画面も考慮に入れてください。
800×600のデスクトップを使用する人はもういないのは事実ですが、多くの人がさらに解像度の低いモバイルデバイスでWebを閲覧しています。
これは何 min-width for:動的に拡張されたレイアウトを小さな解像度で混雑していないように見せるため。

これがお役に立てば幸いです。

編集:

Smashing Book は、この主題について非常に素晴らしい考えを持っています。

編集2:

訪問者にピクセ​​ルベースのサイズ設定を強制するように投稿を表示したくありません。
(どうやら、コメントの中には私をそのように誤解している人もいます。)

それをクリアするには:

理想的なレイアウトは、可能な解像度や設定にうまく調整できるレイアウトだと思います。
しかし、すべてを完璧に行えるとは限りません。時間/リソースとターゲットオーディエンスは、サイトがその高度な機能を必要とするかどうかを判断するための鍵です。

与えられた仕事に正しいものを使うことをお勧めします。

サイトのより高度な調整を必要とする訪問者のかなりの割合がいるサイトを開発している場合は、それだけの価値があるかもしれません。
(もちろん、自分たちが正しい方法で物事を行っていると感じるためにそれを行うこともありますが、必ずしも経済的に健全な決定であるとは限りません。)

それでも、レイアウトを決定する前に、どのようなサイトになるのか、誰が訪問者になるのかなどについて適切な調査を行い、それらを流動的またはより動的にするために時間をかける価値があるかどうかを判断する必要があります。

39
Venemo

すべての測定には独自の目的があります。

  • ピクセルベースのものにはピクセルを使用、境界線のように。幅が1.3422ピクセルになる境界線はおそらく必要ありません。

  • テキストベースのものにはテキスト中心のメジャー(em、ex)を使用、コンテンツ領域、ラベル、入力ボックスなど。これは、特定の長さと幅のテキスト用のスペースがあることを確認する簡単な方法です。

  • ウィンドウベースのものにはパーセントを使用、列のように。

もちろん、例外もあります。たとえば、最小列幅をピクセル単位で指定したい場合があります。ただし、上記に従うと、ページが適切に拡大縮小されます。常にページをズームインおよびズームアウトして、さまざまなフォントサイズやブラウザの形状でどのように機能するかを確認してください。後で驚かないでください。

37
Alex Feinman

フォントサイズ

私はあなたが最初に問題を理解する CSSのピクセルを扱うことに存在する必要があると思います:

  • 古いブラウザのズームは壊れています。たとえば、 IE6およびIE7はズーム時にテキストのサイズを変更しません 。行の高さも風変わりな場合があります。これらの問題は最近のブラウザには存在しませんが、多くの人がフォントサイズにピクセルを使用することを躊躇する理由です。
  • フォントサイズをピクセル単位で指定すると、誰もが同じサイズのテキストと表示されます。ブラウザの段落のデフォルトサイズは16pxであるため、emおよびその他の相対サイズのみを使用する場合は、これを変更するユーザーの決定を尊重するになります。これは、特に年配のユーザーが多い場合は特に、テキストの多いサイトで特に重要です。一方、サイトのデザインが重要な場合は、pxを使用して、使いやすさを損なうことなくフォントサイズを指定することが可能であり、正当であると思います。

結局、自分で決める必要があり、状況にもよるが、フォントサイズをピクセル単位で指定しても大丈夫だと思います。

ちなみに、emを使用してフォントサイズを指定する場合は、良いアイデアbodyfont-size: 62.5%に設定することをお勧めします。つまり、基本フォントサイズは10pxなので、1emは10px、1.6emは16pxなどになり、emsを使用して設計するときにピクセルで考えるが簡単になります。特にemsの値がカスケードする場合、このように動作するのはまだイライラします。 PXtoEM.com のような非常に便利なサイトがいくつかあります。

レイアウトの問題

画面はピクセルベースのレイアウトであるため、ピクセルは多くの点で直感的な選択です。ここでの主な問題は、ユーザーごとに画面サイズが異なるであるということです。他の人が指摘しているように、ピクセル単位のmin-widthmax-widthをパーセント単位のwidthとともに使用すると、サイトが不当に押しつぶされるのを防ぎながら、画面のサイズを尊重するのに役立ちます。または非常に小さいウィンドウと非常に大きいウィンドウに引き伸ばされます。

ただし、私は通常、このアプローチを避けて CSSメディアクエリ を優先します。次に、固定幅のチャンクを使用して、画面サイズが大きくなるにつれてレイアウトを(とりわけ)広くすることができます。ただし、CSSメディアクエリは、すべてのクールなWebテクノロジと同様に、ブラウザのサポートが不足しているという問題があります。特に、JavaScriptの修正はありますが、IE8以前はそれらをサポートしていません。一方、iPhoneやその他のハンドヘルドデバイスはそれらをサポートしているので、これらのデバイスでサイトを美しく見せたい場合は、これらを強くお勧めします。

固定幅グリッドで問題ないだと思います。 960グリッドシステム のような固定幅グリッドシステムはそれ自体で十分に人気があり、固定幅を持つサイトは他にもたくさんあるので、これを行うと多くの苦情が聞こえるとは思えません。大画面を持たないハンドヘルドデバイスが問題になりますが、ここでCSSメディアクエリを使用する必要があるため、すべてをピクセル単位で指定できますデスクトップとオンでサイトを美しく見せることができます。 iPhone。

結論

最終的には、すべてはユーザーが誰であるか、サポートする必要があるもの、サイトをどのように見せたいかによって異なりますが、CSSでピクセルを使用することに本質的に問題はありません

12
David Johnstone

基本的に、それは誰があなたを雇っているのか、そして結果としてあなたの作品の聴衆に依存します。制度上の目的(政府のプロジェクトのようにコンテンツが形に優先する必要がある場合)では、.emまたは%を使用する方が適切であり、制御が困難ですが、アクセシビリティの点で非常にユーザーフレンドリーです。

私たちが企業のウェブサイト(形が取引である場合)について話す場合、ピクセルは彼のブランドに関する顧客の期待を満たすためのより正確なツールになります。液体インターフェース(%、. em)は、スマートに実行される場合は常に優れたものですが、極端な条件下で設計をチェックし、安定していることを確認することを忘れないでください。

ピクセルを使用する場合、サイトの最終的な外観を完全に制御できますが、一部のユーザーがピクセルを効率的に操作することは不可能であると想定する必要があります。

最良のオプション:すべてのプラットフォームと互換性のあるWebサイトを設計するのではなく(複数の欠陥のある設計になります)、あらゆる需要に適合したサイトの特別なバージョンを顧客に提案します。これは、設計者にとってもより良い実践であり、より良いビジネスです。 ..

4
Moustard

それはあなたがスタイリングしているものに依存します。たとえば、列の場合、幅はテキストサイズに依存して、複数の解像度/画面で最適に表示されるようにする必要があります。ページを2つの部分に分割する場合は、パーセンテージを使用する必要があります。ただし、解像度に関係なく、これら2つの部分の間に1pxの境界線が必要な場合は、ピクセルを使用します。

4
Ruud

特定の場合を除いて、可能であればそれを避けると思います。

たとえば、細い境界線の場合は、1pxを指定するだけで問題ありません。

max-およびmin-スタイル属性についても問題ありません。ただし、可能であれば、非最大/最小属性をパーセンテージにします。

2
Earlz

これは本当に私が以前に何度も尋ねた良い質問です。筋金入りのウェブデザイナーではありません(私は開発側にいます)私は通常、一緒に仕事をしているデザイナーに彼らの意見について尋ねました、そしてこれが私が蒸留したものです:

要素のサイズ設定などにパーセンテージとピクセルを使用することは、実際には個人的な好みや特定の場合の要件の問題です。スケーリングが必要な場合、または適切にスケーリングできる場合は、パーセンテージを使用します。そうでない場合は、ピクセルを使用します。ここの人々は、ページの主要な列の例を使用しており、流動的である必要があるかもしれませんが、境界線にはピクセル測定の精度が必要な場合があります。

明らかに、画像のサイズ設定は解像度とピクセル単位にかなり関係しているので、この場合は常にそれらを使用します。

ただし、テキストにemサイズとピクセルサイズ、さらにはポイントサイズを使用することは、まったく別の魚のやかんです。私が一緒に仕事をしている人のほとんどは、1emのサイズを約12pxに下げるフォントサイズの基本リセットスタイルを持っています。次に、emsを他のすべての場所(または可能な限り他の場所の近く)で使用して、テキスト要素のサイズを設定したり、コントロールを形成したりします。デスクトップやラップトップのさまざまなブラウザ、OS、DPIでうまく機能しているように見えるので、これが私が今も操作している方法です。ただし、モバイルデバイスを保証することはできません。

ただし、アクセシビリティが重要です。障害を持つ人々が何かを使えるようにしたり、箱から出してさまざまなデバイスで作業したりする必要がある場合は、古いと思われるものであっても、スケーリングが必要になります。最初からサイトを設計するためにモデルに組み込んでください。その場合、絶対的なピクセルサイズ設定は必要ないことに気付くかもしれません。

たとえば、アートを多用するデザインはおそらく単一のスケールでデザインされるでしょうが、障害を持つユーザー向けの新しい教育用Webサイトは、さまざまな状況で機能する必要があります。

W3Cは、柔軟性という理由から、仕様にサイズ設定とスケーリングを行うためのさまざまな方法を採用していることを忘れないでください。 (Moustardが以前に言ったように)あなたの聴衆にとって最もよく合ってうまくいくことは何でもしなさい。

2
Geoff Adams

私はcss/htmlの専門家ではありませんが、私が使用する規則は、外側のコンテナーにピクセルを使用し、内側のオブジェクトにパーセンテージを使用することです。

レイアウトを確認する人とのもう1つの経験則は、ピクセルルールです。すべてがそこにあるすべてのブラウザ内で正確に整列することはまれです。 3ピクセル以下のものを移動するメリットよりも、努力が重要であることに同意しました。

1
Stevko

デフォルトで正しいことをします。ユーザーがJavaScriptを無効にし、設定Cookieを使用せずにサイトにアクセスした場合は、できるだけ機能的でアクセスしやすいWebページをユーザーに提供する必要があります。

デフォルトスタイルシートは、ブラウザウィンドウについて何も想定せず、機能的なページをレンダリングする必要がありますが、320x320の解像度まで、無制限のサイズまでは恐ろしいものです。写真の忠実度が非常に重要で、ブラウザのスケーリングを信頼できない場合は、固定サイズの画像をカプセル化する要素のピクセル測定値(少なくとも最小値)を使用して、最終的には信頼できないことを確認する必要があります重要なことが隠蔽されています。最小幅とパーセンテージを指定すると、ユーザーに必要なアクセシビリティを提供しながら、必要な制御が可能になります。アクセシビリティは今のところ問題ではありませんが、サイトが成功すれば後で問題になります。

doブラウザウィンドウについて詳しく知っている場合、デザインを保持することの重要性が追加された作業を正当化するのであれば、代替スタイルシートで固定幅を使用しても問題ありません。

1
Chris

ほとんどの場合、私はピクセルを好みます。例-コンテンツのデフォルトの幅は960pxです。 「1024」では、画面の両側に小さな空きスペースがあり、問題ありません。そこにグラデーションまたは背景を配置します。 「1280」、「1440」、「1680」などでは、ギャップはどんどん大きくなりますが、見栄えは良くなります。はい、800の場合-このサイトは醜いでしょう。しかし、誰が気にしますか?すべての主要なプレーヤーは800のサポートをやめました。この決議を持っている人は少なすぎます。

さまざまなサイトがありますが、%%の方がはるかに優れたソリューションになります。

0
Davinel

固定サイズをターゲットにしている場合は、ピクセルで問題ありません。ただし、さまざまな解像度や画面サイズでレイアウトを美しく見せたい場合は、パーセンテージなどのより相対的な測定値に固執する必要があります。ほとんどの人は後者をターゲットにしています。

0
Daniel DiPaolo

それがあなたのクライアントを喜ばせるために必要なものであるならば、それは大丈夫です。ほとんどの場合、さまざまな画面サイズのスペースの量をパーセンテージだけでバランスを取ることはできません。 CSS3メディアクエリはここで役立ちますが、採用にはまだ問題があります。

0
artificialidiot