すべてのブラウザ上で、アンチエイリアスを無効にするには？

法人・ビジネスホームページ・Web制作 2012/12/04 17:51

ブラウザ上で、Imgタグを使って画像を拡大表示させると、勝手にアンチエイリアスがかかり、ピントがぼやけたような画像になってしまいます。
このアンチエイリアスをさせないで画像を表示させるHPを作りたいのですが、どのような方法で実現可能でしょうか？

IEとFirefoxでは、CSSに以下の記述をすれば可能になることが分かりました。

-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

しかしOreraとGoogleChromeで実現させる方法が分かりません。
どなたかご教授いただければ幸いです。
よろしくお願いします。

Hajestiaさん（長野県 / 男性 / 31歳）

回答：1件

芹川隆
パソコン講師

ブロック要素とインライン要素をご存知ですか？

2012/12/10 09:33 詳細リンク

: (3.0)

はじめまして、GadgetShopの芹川と申します。

下記ご質問ですが…

>空のSPAN要素の「Width指定」が効かないのはなぜ？
>Span要素を使って、文字と文字の間に、20ピクセルの空白を空けたいのですが、なぜか上手>行かないのです。
>HTMLはこんな感じ↓です。
>あいうえお<span style="width:20px;"></span>かきくけこ

ブロック要素とインライン要素をご存知でしょうか。
width(幅)とheight（高さ）を指定できるのはブロック要素のみで、今回のspanはインライン要素になっております。見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージになります。

今回、Hajestiaさんがこのソースのまま空白を空けたいのであれば、インライン要素に「display: inline-block;」という指定が別途必要になります。
※ただし、今回のspan要素は下記理由により別の要素に置き換えて頂くことをオススメ致します。

～説明～
仕様でwidthとheightが指定できるインライン要素は5つあります。

・img要素
・input要素
・object要素
・select要素
・textarea要素
・button要素

今回で言うとspanは適用されない要素になりますので、あいうえおとかきくけこをそれぞれ「div要素」や「p要素」で囲みスタイルを適用してはいかがでしょうか。

----------------------------------------------------------------
今回のように特定の箇所ではありませんが段落の文字間隔を設定する
"letter-spacing"というスタイルもあるのでぜひ調べてみてください。
----------------------------------------------------------------

>DOCTYPE宣言を未指定の場合は意図どおりになるのですが、以下のDOCTYPE宣言を指定した
>場合は上手く行きません。
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >"http://www.w3.org/TR/html4/loose.dtd">
>空のSPAN要素は非推奨なのでしょうか？だとしたら、それはなぜでしょうか…？

DOCTYPE宣言は未指定というのはあまりオススメできません。
きちんと指定してマークアップしていくことをオススメ致します。

こちらで回答になりましたでしょうか。

Gadget Shop 芹川

補足

他の質問に対する回答がこちらに反映されてしまいました。大変失礼致しました。

>ブラウザ上で、Imgタグを使って画像を拡大表示させると、勝手にアンチエイリアスが
>かかり、ピントがぼやけたような画像になってしまいます。
>このアンチエイリアスをさせないで画像を表示させるHPを作りたいのですが、どのような
>方法で実現可能でしょうか？
>IEとFirefoxでは、CSSに以下の記述をすれば可能になることが分かりました。
>
>-ms-interpolation-mode: nearest-neighbor;
>image-rendering: -moz-crisp-edges;
>
>しかしOreraとGoogleChromeで実現させる方法が分かりません。
>どなたかご教授いただければ幸いです。
>よろしくお願いします。

上記のご質問ですが、image-rendering プロパティは、
OperaやSafariとGoogleChrome(WebKit)ではまだサポートされていないものだという認識です。

下記URLを参考にご利用頂いているプロパティの対応状況など一度チェックしてみると良いかもしれません。ご参考までに。

◆CSS3プロパティ＆ブラウザ対応一覧
http://ebisu.com/memo/css3