css - CSSでピクセルを扱うのは悪いことですか?

Question

CSSでパーセンテージではなくピクセル数を使うのは互換性の点で悪いですか? 低解像度はどうですか？それらを 1 ～ 100 の範囲で操作しても問題ありませんか?

score 41 · Accepted Answer

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

境界線など、ピクセルベースのものにはピクセルを使用します。最終的に 1.3422 ピクセルの幅になる境界線は、おそらく必要ないでしょう。
コンテンツ領域、ラベル、入力ボックスなどのテキストベースのものには、テキスト中心のメジャー (em、ex) を使用します。これは、特定の長さと幅のテキスト用のスペースを確保する簡単な方法です。
列など、ウィンドウベースのものにはパーセントを使用します。

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

score 41 · Accepted Answer

これは難しい質問です。答えは主に状況によって異なります。

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

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

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

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

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

選択は、実現したいデザインやレイアウトによっても異なります。

固定幅レイアウトの場合、ピクセル値は問題ありません。デザイナーから提供された Photoshop 画像には、どのようにサイズ変更するかを考えるのさえ非常に複雑な非常に凝ったものが含まれている場合は、間違いなくこれを選択する必要があります。

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

一部のレイアウト (たとえば、StackOverflow がすべてのスペースを占有する場合を想像してください) は、たとえば . 1920 ピクセル - 線幅が非常に大きくなり、非常に読みにくくなります。
これがmax-width目的です。一部の動的レイアウトでも、使いやすさと読みやすさを最大化するために、サイトの最大幅を制限する必要があります。

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

これが役立つことを願っています。

編集：

Smashing Bookには、このテーマについて非常に優れた考えがいくつかあります。

編集2：

私の投稿が、訪問者にピクセルベースのサイズ変更を強制してほしいという印象を与えたくありません。
（どうやら、コメントの中に私をそのように誤解している人がいたようです。）

それをクリアするには：

理想的なレイアウトは、可能な解像度や設定にうまく適応するものだと思います。
ただし、常にすべてを完璧に行うことはできません。時間/リソースと対象ユーザーは、サイトに高度な機能が必要かどうかを判断するための鍵です。

与えられた仕事に適したものを使用することをお勧めします。

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

それでも、レイアウトを決定する前に、どのような種類のサイトになるか、誰が訪問者になるかなどについて適切な調査を行う必要があります。

score 12 · Accepted Answer

フォントサイズ

CSSでピクセルを操作する際に存在する問題を最初に理解する必要があると思います。

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

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

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

レイアウトの問題

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

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

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

結論

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

score 4 · Accepted Answer

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

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

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

最良の選択肢: すべてのプラットフォームと互換性のある Web サイトを設計するのではなく (多機能の設計につながる)、すべての要求に合わせた特別なバージョンのサイトを顧客に提案します。これは、デザイナーにとってもより良い実践であり、より良いビジネスです。 ..

score 4 · Accepted Answer

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

score 2 · Accepted Answer

特定の場合を除いて、可能であれば避けてください。

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

スタイル属性についてもOKmax-です。min-ただし、可能であれば、非最大/最小属性をパーセンテージにします。

score 2 · Accepted Answer

これは本当に良い質問で、以前に何度も尋ねてきました。筋金入りの Web デザイナーではありません (私はどちらかというと開発側です) 一緒に仕事をしているデザイナーに彼らの意見を聞いてきました。

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

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

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

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

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

W3C は、柔軟性という理由から、サイジングとスケーリングのさまざまな方法を仕様に取り入れていることを覚えておいてください。視聴者にとって最適で効果的な方法を実行してください (Mustard が以前に述べたように)。

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

ほとんどの場合、ピクセルを好みます。例 - コンテンツのデフォルト幅: 960px。「1024」では、画面の両側に小さな空きスペースがあれば問題ありません。そこにグラデーションや背景を入れます。「1280」、「1440」、「1680」、または何でも - ますます大きなギャップがありますが、見栄えはします。はい、800 の場合、このサイトは見苦しくなります。しかし、誰が気にしますか？すべての主要なプレーヤーが 800 のサポートを打ち切りました。この解決策を持つ人は少なすぎます..

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

The building blocks of a screen are pixels. You can't go wrong with fixed pixel sizes. As other posters have mentioned, you can also use percentages or "em"s for a scalable substitute.

css - CSSでピクセルを扱うのは悪いことですか?

13 に答える 13

フォントサイズ

レイアウトの問題

結論

Related

Reference