• ベストアンサー

スマートフォンで荒れない画像

スマートフォンでホームページをみていると、 画像のところで拡大しても画像が荒れないページと、ピクセルが見えてしまうページがあります。 一般サイトだけでなく、スマートフォン用に幅を狭くしているサイトでも 同様の違いがあるようです。 HTMLをどのように記述すれば、画像のところで拡大(ガラスの上で指をピンチアウト)しても 画像をきれいに見えるようにできるでしょうか。CSSかスクリプトを使っているのでしょうか。 アンドロイドとiPhoneを想定しています。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

ある程度大きなサイズの画像を、imgタグで表示する際にwidth, heightを小さく指定しているのではないでしょうか。 そうすれば拡大してもジャギーが見えないと思います。

goldensea
質問者

お礼

そんな感じのようです。

その他の回答 (1)

回答No.2

スマートフォンでは解像度が高いので、 iphoneでは横幅640px以上のものを使えばある程度きれいに表示されると思います。 iphoneでは横幅が320pxなので、 約二倍の大きさですね。 画像を320pxで作ってしまうと、 画像が荒れてしまいます><

goldensea
質問者

お礼

解像度をあげておけば問題なさそうです。

関連するQ&A

  • スマートフォンで適切に見られるPCサイトの幅は?

    私はPC用のホームページ作りをしています。 携帯サイトは作ったことがありません。 このたび、やっとiPhoneを買って自分のサイトを見ることができました。 そうすると、PCサイトの幅が広いので拡大しないと調子が悪いです。 そこで、PCサイトのコンテンツの幅を狭くしようと思っています。 700ピクセルぐらいの幅にしようと考えていますが、そうすると通常のPCだとバランスがおかしい感じなので困っています。 サイトをスマートフォン専用のものにするような技量はありません。 スマートフォンも見られるようにするには、やっぱり700ピクセル以下にすべきでしょうか?

    • ベストアンサー
    • HTML
  • テーブルをスマートなソースで書く方法

    テーブルを作りたいと思っているのですが HTML・CSSでできるだけスマートなソースで書く方法がうまく思いつきません。 セルの枠とセル内の色のある部分を3ピクセルほど開けて背景の画像が透けて見えるようにしたいのですが、 1ピクセル幅で白い枠を作る&背景の透けている空白部分は3ピクセルの空セル、というやり方でHTMLのみで組んだり CSSのボックスを使って組んでみたりしましたが 画像どおりのものはできるもののもっと簡単な書き方があるように思えます。 なんだかものすごく簡単なことを聞いていて恥ずかしいのですが、案をお持ちの方どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スマートフォンのことで

    スマートフォン用のサイト作ってます。HTML5とCSSです。 WIKIペディアのように、概要などのボタンを押すと本文が表れてくるようにするにはどうしたらいいのでしょうか? 実際にWIKIのスマホサイトを見てからご回答頂ける方のみお答えを希望します<(_ _)>

  • 画像拡大機能のjsをスマホで読み込まない

    ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ(iPhone・Android)で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。

  • ホームページビルダーでの画像挿入の疑問

    ホームページビルダー16を使っています。 ページ内に表を作り、その中に画像を挿入するとします。 例えば表の幅を200ピクセルにして、その中に200ピクセル幅の画像を挿入すると 表自体の幅が若干広がってしまいます。 200ピクセル幅の表に、200ピクセル幅の画像を挿入しているのに、 これはなぜなのかがわかりません。 そのため、わざわざ画像幅を198ピクセルなどに縮めて挿入しています。 作業効率が悪いので何とかしたい (200ピクセル幅の表に、200ピクセル幅の画像を挿入しても表の幅が広がらないように) のですが、なにか良い方法はないものでしょうか? また、なぜこのようになってしまうのでしょうか?

  • Firefoxで見ると画像が・・・

    CSS入門者なのですが質問させていただきます。 IEで見るとイメージどおりなのですが、 Firefoxで見ると画像が変形(DIVの大きさまで拡大)されてしまいます。 HTMLでサイズ指定できるかと思いwidthとheightを指定してみると、 高さのみ指定したとおりになりました。でも幅は変わらず大きいまま、デザイン全体が崩れてしまいます。 ご回答、よろしくお願いいたします。

    • 締切済み
    • CSS
  • アップロードした画像のケータイでの拡大表示

    アップロードした画像をケータイで拡大表示できる無料サイトを探しています。 「拡大」と言うのは、「ケータイ画面幅いっぱいへの拡大」だけではなく、「画像の一部をケータイ画面幅いっぱいに拡大表示する」を含みます。 「大きな画面のスマートホンやiPADを使う」や「フルブラウザで見る」というのは無しでお願いします。

  • 1×1の小さな画像を見るには・・・?

    隠しページ探しのサイトで遊び始めました。 怪しそうなgif画像がありDLしてみましたが、1×1ピクセル(という単位でいいのでしょうか)しかないサイズで、中身を見る事が出来ません(実際の大きさは1000バイト程あるようです)。 どうやら数コマのアニメーションになっているようなのですが、どうしても大きくならず、ここ数日試行錯誤を繰り返しています。 paintで拡大し保存すればいいのかとやってみましたが、アニメーションではなくなってしまいます。 少し前にもこのような問題(小さい画像)に出会ったのですが、その時もどうすればよいのか分からず、結局諦めてしまいました。 このようなわざと小さくしてある画像を拡大するにはどうすれば良いのでしょうか。 アドバイス頂ければ幸いです・・・すみません。

  • GIMPで画像の質が落ちず拡大させる方法を教えてください

    バージョン1.2.5を使っています。 画像を作成→画像→拡大縮小でピクセル寸法の幅と高さの値を上げて保存してブラウザで確認しても画像が大きく移らないのです。 画像を拡大するにはどうすればいいのでしょうか?

  • WordPressで画像のロールオーバーをさせたい

    WordPressのブログや固定ページの記事の中で、 2枚の画像を使って、画像のロールオーバー(マウスオーバー)をさせたいのですが、 やりかたがわかりません。 Java Scriptではなく、CSSで行いたく思い、 検索していろんなサイトに行きましたがうまくできませんでした。 もし可能であれば、単純にこれをコピーしたらできる というCSSをご提示していただけないでしょうか。

専門家に質問してみよう