すべてのブラウザ上で、アンチエイリアスを無効にするには? - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

法人・ビジネス ホームページ・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件

芹川 隆

芹川 隆
パソコン講師

- good

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

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

質問
HTML
仕様
文字
見た目

評価・お礼

Hajestiaさん

2012/12/10 21:27

芹川様
ご回答ありがとうございます。
やはりアンチエイリアスを無効にはできないのですか…。
それにしてもなぜ、有効ができて無効ができないのでしょう?
技術的には簡単だし、それが必要な場面もあるのに…。
この件については不思議でならないので、別質立ち上げさせていただきました。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

なぜアンチエイリアスを無効にできないのか? Hajestiaさん  2012-12-10 21:29 回答1件
どうしても画像がずれてしまいます yurimonさん  2009-06-02 07:55 回答1件
動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
サイトマップのGoogleインデックス登録について mrtcさん  2013-10-25 18:09 回答2件
Amebaブログのデザイン変更について tcnさん  2013-10-04 08:51 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)