こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSでPC用、他のスマホ用、PC用を扱うには?

こんにちは。

html5を準拠するようにサイトを構築している者です。CSSでPC用、スマートフォン用、iPhone用に分けようと考えています。

http://mnemoniqs.com/web/one-css-smartphone/
上記のサイトにて、

1<!--メインCSS-->
2<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
3<!--スマホ用CSS-->
4<link media="only screen and (max-device-width:480px)" href="css/smartphone.css" type="text/css" rel="stylesheet"/>

この様に書いてありますが、私はauのAndoroidスマホを使用していまして、widthが481px以上になる環境です。それで自サイトをみると、PCでは3ペイン、スマホでも縮小された左右のペインがあります。iPhone、他のスマホでは左右のペインをなくして、メインだけを表示したいのです。

例として http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。

ちなみにPCブラウザで http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html を表示するとリダイレクトでPC用サイトに行ってしまいますので調べることが出来ませんでした。


どなたか1ページをCSSを使ってPC用、iPhone用、普通のスマホ用にする事が出来ないでしょうか?

お導きの事よろしくお願い申し上げます。

投稿日時 - 2013-02-16 22:40:04

QNo.7948966

困ってます

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

ウェブ開発なら、当然Firefoxをお使いだと思いますが、
開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )を使用すると、各種端末のテストができます。
 示されたページは存在しませんでしたが・・
少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス( http://www.webcreatorbox.com/tech/smartphone-snippets/ )
 などを参考に再挑戦してみてください。

投稿日時 - 2013-02-17 18:08:54

お礼

ORUKA1951さん、ご回答ありがとうございます。

仰る通りFirefoxでFireMobileSimulatorを使用しています。
とても参考になるサイトをご紹介下さり、大変ありがとうございます。

参考に致します!

投稿日時 - 2013-02-17 20:04:42

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問