ベストアンサー パソコンとスマホで、表示倍率をわけたい 2014/01/28 23:23 画像のサイズについて パソコンで表示するなら100%のサイズ、 スマホで表示するなら200%のサイズ、 と条件分岐するにはどうすればいいでしょうか? HTMLのタグかcssで可能ですか? みんなの回答 (2) 専門家の回答 質問者が選んだベストアンサー ベストアンサー yambejp ベストアンサー率51% (3827/7415) 2014/01/29 12:50 回答No.1 確実にやりたいならサーバー側のプログラムで エージェントを判断して設定を振り分けることになります なんとなくでよければjavascriptなどで環境にあわせて cssを変更する処理がよいかと 質問者 お礼 2014/03/01 13:00 ご回答ありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 その他の回答 (1) ORUKA1951 ベストアンサー率45% (5062/11036) 2014/01/29 14:11 回答No.2 質問の意味がわからないのですが、 >パソコンで表示するなら100%のサイズ、 >スマホで表示するなら200%のサイズ、 だと画像サイズの横幅が640pxだとパソコンだと480pxでディスプレイの数分の一、スマホだったらはみ出すかしてしまう。スマホだったら自動縮小されるのでもっと複雑。 普通にリキッドで製作するなり、CSS3のMedia Queriesを使ってスタイルシートを切り替えるのですが・・ 質問者 お礼 2014/03/01 13:00 ご回答ありがとうございました。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発HTML 関連するQ&A タグを入れてるのにスマホ用サイズで表示されない スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもPCサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか? htmlでのサイト作り、スマホでの表示 初めてhtmlでサイトを作りました。 金銭的に厳しく、タグもそこそこ勉強してメモ張だけで制作したのですが、 かなり自分の思ったように作ることが出来て満足していました。 そして今日fc2ホームページでサーバーをお借りし、初めてスマートフォンで 閲覧してみました。 するとパソコンで見ていたものと異なり、 大きな画像・テーブルは正常に表示されたのですが、 小さな画像・文字が変なところで改行されてしまい、見栄えが非常に悪く困っています。 スマホのページ自動調節機能を外せばパソコンで見た通りに表示されるので サイトマップに注釈を付けたのですが 見に来てくださった方々皆様にそのようなことを命令してしまうのは失礼だと思うんです。 なので、出来れば改善方法を教えてください。 どんなタグを追加すればいい等を知りたいです。 パソコンでの見栄えを悪くしたくないのでテーブルのサイズや文字一行の幅を削りたくありません。 全くの初心者なのでお手柔らかにお願いいたします。 また、スマホはAndloid、バージョン4.1.2を使用しています。 サイトのスマホ表示について教えてください。 同じHMTLファイルで、ディスプレイサイズに応じて異なる2つのCSSを読み込ませています。 サブドメインや、別ディレクトリーに、スマホ用のhtmlファイルはありません。 同じHTMLで別々のCSSです。 大手サイトでは「スマホサイトはこちら」、「PC版はこちら」というリンクをよく見かけます。多くのサイトは、スマホ用のディレクトリーやサブドメインに飛ぶようなのですが、これを、サブドメインやスマホ用のディレクトリーを使わずに、一つのhtmlファイルで行うには、どうすれば良いのでしょうか? ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム 素人なんですがホームページを作っております。 素人なんですがホームページを作っております。 質問の内容が「PCとスマホで違う大きさのバナーを表示したい」という事になります。 ホームページに大きなサイズのバナーを貼っています。 PCで見る分には問題ないのですがスマホで見るとはみ出ています。 なのでスマホで見る時には、別の小さなバナーを表示出来ればと思っております。 ネットで調べて見ると「ifを使うと出来る」「条件分岐でできる」と書いてあったのですがPHPやjavaスクリプトの知識が必要みたいなのです。 ただ素人でプログラムの知識が全く無いので、出来ればHTMLとCSSだけでバナーの条件分岐が出来るセレクタがあればと思うのですが可能でしょうか? 大変申し訳ございませんが宜しくお願いします。 HTML、CSS、スマホの時だけ全画面表示にしたい パソコン向けにサイトを作成しまして、横幅800pxと指定しているのですが、スマホで表示すると全画面表示の方が見やすいので、スマホの時だけ全画面表示にできるHTMLかCSSの指定方法はありますか? パソコンで表示させた時は、横幅800pxのままにしたいです。 グーグルカレンダーのスマホでの表示 グーグルカレンダーのタグをPCサイトに埋め込んでいるのですが、それをCSS でwidth="100%" にしても、左に偏って、画面も小さく見づらいどころか、 放っておくと縦に 伸びるという奇妙な動きをします。 グーグルカレンダーをスマホでうまく表示させるにはどうしたらよいのでしょうか? PCかスマホか判別し、CSSを振分ける方法はあるか いくつかサイトを持っていますが、現在のPCサイトをスマホにも対応させたいと考えております。 <私の認識><やりたいこと><質問>に分けましたので、よろしくお願いいたします。 <私の認識> 1.現状、まだHTML5に対応していないブラウザがある。 2.PC用サイトとスマホサイトをHTMLレベルで作り分けると、アクセス数が分散してしまう。 3..PC用サイトとスマホサイトをHTMLレベルで作り分けると、更新作業が煩雑になる。 <やりたいこと> 「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分けたい。」 1..PCサイトの画像数や表現力は維持し、スマホサイトは画像量を抑える為に、画像をCSSのbackground-image:url(xxx.png)で表示させれば、PCには大きい画像、スマホは小さい画像を使った表現ができるのではないか。 2.PCサイトは幅固定、スマホサイトはリキッドデザインにして各画面幅に対応させられるのではないか。 <質問> 1.上記<認識>で間違っている部分はありますか? 2.上記<やりたいこと>の、「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分ける」方法はありますか? 調べたところ、画面の幅に応じてCSSを振り分けることはできようですが、各幅毎にCSSを作るというのも難しいので、スマホはリキッドデザインで各幅に対応したいと思っています。 よろしくお願いいたします。 画像の表示について HTML,CSS,JAVAなどで、一つの画像をアップしたいのですが、サイズが横100px以上は100pxで表示させて、 100px未満のサイズはそのまま表示させるという 処理はどうしたらよろしいでしょうか? どの種類かだけでも結構ですので、宜しくお願いいたします。 ワードプレス パソコンとスマホでの画像表示サイズ 現在、ワードプレスでホームページを作成しています。 画像化したデータでランディングページのようなものを作成したいのですが、パソコンでの表示とスマホでの表示がイメージどおりにできず困っております。 【現状】 パソコン→全画面表示となっており表示サイズが大きすぎてみずらい スマホ→なぜか画像右側に余白ができ、全画面表示とならない 【理想】 パソコン→画像両サイドに若干の余白をもたせ、見やすくしたい スマホ→全画面表示とすることで見やすくしたい 色々と調べながら""width="100%;" height="auto;"とすることで表示サイズを大きくすることまではできましたが、まだまだ理想の状況からは遠い状態です。 下記は作成中のページです。http://uchikuru.jp/%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8 どうすれば理想の状態に近くなるのかどなたか教えていただけないでしょうか?? 携帯サイト(ガラケー)をスマホで表示時の文字サイズ 携帯サイトをスマホで表示した際に、文字サイズが小さく読みづらいので スマホでアクセス時のみ、文字サイズを大きくしたいのですが 以下のタグを、htmlファイルのbody内に追記したのですが iphoneは問題なく大きく表示されましたが androidでは携帯サイトの文字サイズのままになってしまいます。 <html style="-webkit-text-size-adjust:150%;"> androidでも文字を大きくしたい際にはどのようにすればよろしいでしょうか? 希望としては別にCSSファイルを作らずに、携帯とおなじhtmlファイルで出来ればと思います。 CSSの呼出方法と表示速度 (SEO) . HTML内で外部CSSファイルを呼び出す方法について、表示速度の面で記述を迷っ ている部分があります。 例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウ ェブサイトを仮定するとします。 そして、3つのページに共通するCSSをcommon.css それぞれのページに特有なCSS をindex.css、article.css、product.css とするとします。 【方法A】 HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについて<link > で記述し、index.css、article.css、product.css についてはその下に条件分 岐で記述して、CSSファイルを呼び出していく 【方法B】 HTMLのヘッダー部分をテンプレートパートにせず、ホームのページのHTMLにcommon.css 及びndex.cssを<link>で2つ記述、記事ページのHTMLにcommon.css及びarticle.css を<link>で2つ記述、製品ページのHTMLにcommon.css及びproduct.cssを<link>で 2つ記述、してCSSファイルを呼び出していく。 Bの方法は管理の手間はかかることになりますが、テンプレートパートを使い条 件分岐をするAと条件分岐をしないBで、各ページで表示速度に違いは出るもの なのでしょうか . スマホの画像がパソコンで開けなくなった。 スマホとパソコンを接続して画像を開きたいのですが、開くなってしました。ファイル名までは、表示されるのですが、画像の表示に至りません。従ってパソコンへの移動などができません。 今までは、こんなことはなかったのですが、何の不具合なのかわかりません。スマホにあるファイルの異常なのでしょうか、だとすれば、どうすればいいのでしょうか。スマホ自体では不具合はありません。 ちなみに スマホ:XperiaⅠⅡ よろしくお願いします。 AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム PC用サイトをスマホに最適化するためには? こんにちは。 私は400ページくらいのサイトを運営しております。内容は映画関係。 どうやらHTML4.01にさえ準拠していないので、HTML5にするには相当時間がかかると存じます。それからCSSなどでスマホ用にも作れたらと思っています。 そのためにまずは既存の準拠していないページをスマートフォンで見られればいいかな!って思った次第です。でも見に来た人がスマホなのかパソコンなのか判断するのにCSSやJavaScriptが必要なんではないのかな!?と考えています。 で、CSSやJSでスマホと判断したらスマホ用のページに飛ばすという。ただ、これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならないのではと困惑しています。 どなたか、道を照らして頂けませんでしょうか? よろしくお願いいたします。 スマホページの横幅調整 スマホのHPを作ったのですが、初期表示時、小さく表示されてしまいます。 たて表示をイメージして、横幅320pxの固定サイズで作成したのですが、 ほかになにか記述が必要なのでしょうか? (通常のHTMLとcssで作成しています) お手数ですが、ご存知の方、教えてください。 スマホのFBをパソコンで見たいのです。 スマホは、富士通のアローズM01 です。パソコンはウインドウズ 7 です。 昨日まで、スマホとパソコンは動機が取れて、同じ画面を見ることがでいたのですが、現在はスマホでは新しい投稿が受信できるのですが、パソコンではできません。スマホの受信しているURLはどこに表示されるのでしょうか。添付画像には表示されていないようなのですが。 よろしく お願いします。 レスポンシブサイトでの画像表示速度とSEOについて 独学でサイトをつくっている者です。 レスポンシブのサイトをつくっているのですが、皆様はブレークポイント時の画像切替をどう仕込んでいますか? ※例として、様々なバナー画像の場合。 今、素人的に検討しているのは ■1 htmlのimgタグで表示し、タブレットやスマホの場合はcssで適正サイズに縮小 ■2 htmlのimgタグで表示するが、jQueryやJavaScriptの仕組みで端末別に表示する画像そのものを変える 例:http://black-flag.net/jquery/20120808-4047.html ■3 cssのbackgroundで表示し、端末サイズ毎に表示する画像を変える 上記3つです。 ■1の場合、imgタグに色々施せるのできもちSEO的には有利かな?(もうホントきもち程度にですが・・・)とは思うのですが、結局PC端末でもスマホでも同じ画像を使うため、表示速度的には遅いですよね。ましてRetina対応は必須なわけですし・・・どうなんでしょうか。 ■2の場合、ギリギリ限界まで余計なものを排除したいスポンシブで、余計なjsを入れるのはどうなのだろうか?的な疑問が素人的にありました。ただ、これができれば早そうなイメージはあります。 ■3の場合、CSSスプライトもできるので表示速度は一番早そうな気がしますが、htmlの記述によってはSEO的にマイナス要素になってしまいそうな気が・・・と思い、これでSEO的に問題ないhtml記述方法などがあれば一番良いのかもしれないと素人的には感じました。 素人な質問で申し訳ありません。 以上の事を考えたのですが、表示速度やSEOを総合的に鑑みて、お詳しい皆々様のご意見なりアドバイスを頂けますと幸いです。 背景イメージの表示のさせ方 初歩的な質問ですみませんが、わからないので質問させてください。Windowsのメモ帳を使ってHTMLファイルを作っています。フリーの素材サイトから画像をダウンロードしてきて、背景に使用しているのですが、画像のサイズが小さくて、繰り返し(?)表示されてしまいます。ですので拡大した形でバーンと表示させたいのですが、どんなタグを使ったらできるのでしょうか。<img src=・・・>のタグはサイズを指定できるようですが…。 昨日からタグと格闘してる初心者です。よろしくお願いいたします。m(_ _)m スマホからアクセスしたサイトの表示について 質問お願いいたします。特にスマホに特化しているわけではなく、通常のPCサイト(HTML4+CSS)があるとします。 iOS、アンドロイドやブラウザに関係はしていないとおもいますが、サイトにより、いきなり全画面(横幅いっぱい)で表示される場合と、ページの左上(例えばこのページだと教えて!gooのアイコン周辺)が拡大されて表示される場合があります。 これらはなにか条件によって異なるのでしょうか? 現在、サイトを複数運営していますが、後者のように、どのページでも最初のアクセスでは拡大して表示が可能であればアドセンス広告などをその位置に貼りたいと考えています。 詳しい方、よろしくお願いいたします。 PHP 画像の表示 <input type="file">の文字が入るテキストボックスに画像を表示にしたいと思っております。 前提条件:画像がアップロードされている。 value値にHTMLタグを与えてもダメでしたので何かやり方があればお教えいただきたいと思っております。 絵をランダムに表示させるタグ あまりタグやらcssなど詳しくない初心者の人間です。 最近「YAHOOジオティース」というものでHPを作っています。 そのサイトでHPを作っていますが、TOP画面にランダムに絵を表示させたいのですが、そのジオティースはHTMLしか使用できないみたいで(たぶん)、絵をランダムに表示させるタグ(HTML)はないでしょうか?? HTMLじゃできない と聞いたこともありますが・・・。 参考になるサイトでもいいです。 よろしくお願いします。 (他のタグもお願いします。 一度試してみるので) 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
ご回答ありがとうございました。