PC用サイトをスマホに最適化するためには？

Question

こんにちは。

私は400ページくらいのサイトを運営しております。内容は映画関係。
どうやらHTML4.01にさえ準拠していないので、HTML5にするには相当時間がかかると存じます。それからCSSなどでスマホ用にも作れたらと思っています。

そのためにまずは既存の準拠していないページをスマートフォンで見られればいいかな！って思った次第です。でも見に来た人がスマホなのかパソコンなのか判断するのにCSSやJavaScriptが必要なんではないのかな！？と考えています。

で、CSSやJSでスマホと判断したらスマホ用のページに飛ばすという。ただ、これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならないのではと困惑しています。

どなたか、道を照らして頂けませんでしょうか？

よろしくお願いいたします。

ORUKA1951 · Accepted Answer

HTML4.01であってもスマホで問題ないのですが、大事なことはHTML4.01であってもstrictに準拠というか・・・HTMLにはプレゼンテーション--見栄え---に関わることは一切無くて、文書構造だけ記述してあり、プレゼンテーションはスタイルシートでのみ指定してあるか・・だけです。
　そうすれば、スタイルシートを用意するだけで、幅広のディスプレイやスマホのみなせず、携帯電話もスクリーンリーダーも・・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLでは、著者は出力メディアの別を問わない文書作成ができる。これによりユーザは、非常に多様な装置やメディアによってWebページにアクセスできる。多様な環境とは、例えば、Windows、Mac OS、X11などのシステムが走っているコンピュータのグラフィックディスプレイや、インターネットテレビ、携帯電話組込み機器やPDAベースのモバイル機器、音声ブラウザ、点字出力環境、などである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

長くなりましたが、
＞まずは既存の準拠していないページをスマートフォンで見られればいいかな！って
　これは、無理です。
＞これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならない
　ますますもって無駄です。

文書構造とプレゼンテーションを分離することで、たった一つのHTMLを作成するだけで、様々なユーザーエージェントに対応できますし、ユーザーが任意のスタイルを選択することもできます。
「なぜならただ1種類の文書しか作る必要がなくなるからだ。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」
　折角作成するなら、いずれにも対応したHTMLを作ればよいです。そして順次切り替えていく。時間的にも労力的にも無駄にならないでしょう。

＞

b0a0a · Answer

最近のスマホは高解像度です今年度中にフルHDの機種も続々と出ます
縦持ちでもよこ1080dotあるわけです
よって比較的文字の少ないページなら横のスクロールがないよう
ページ毎拡大縮小させて画面にフィットさせるだけでいいです
実際そうしている超大手企業サイトもありますし、最高ではないですがそれで案外困りません
あとは沢山文章があるところは文字サイズをインチとかで指定すればいいんじゃないですかね

kiyomac#1 · Answer

r360studioさんがCSSを使いPCからスマフォまで対応サイトサンプルを公開してます。

http://r360studio.com/dgcr/dgcr-extra22/test3.html
CSSはこちら
http://r360studio.com/dgcr/dgcr-extra22/grid.css

PC上で画面サイズを変更すると変化します。

＊ページは一つでメタタグで切り替えてます。

lv4u · Answer

「Webサイトのスマートフォン対応 7つの基本ルール」というのがありました。
http://web-tan.forum.impressrd.jp/e/2011/01/31/9607

これをみると、ＣＳＳを駆使するとしても、やはりスマホで使いやすいページにするためには、それ相応の修正が必要になるようです。

地道にスマホ対応に修正していくって手もあるでしょうけど、これを機会に、新しいサイト構築の環境に乗り換えるってのもありかもしれません。
新しいもの、メジャーなものは、プラグインとかテンプレートなどで、スマホ対応を可能としているみたいです。

ちなみに、私は、concrete5っていうＣＭＳを使ってサイトを作っていますが、これにはiPhone用のプラグイン？みたいなのが提供されていて、お手軽にＰＣ用サイトをスマホ対応にできるみたいです。私はiPhoneユーザではないのですが、アクセスする人にiPhoneユーザが増えてくると思えるので、試してみようかな、なんて思っています。

axuaxua · Answer

スマホ用に作成するのが、ユーザーとしては使いやすいです。(軽量化が出来る）

ちゃんとCSSで作っているならCSSをスマホ用に用意すれば一応できます。以下URL参照。
http://mnemoniqs.com/web/one-css-smartphone/

画面サイズが変わっただけでかなり大変ですが頑張ってください。

PC用サイトをスマホに最適化するためには？

最近のスマホは高解像度です今年度中にフルHDの機種も続々と出ます

r360studioさんがCSSを使いPCからスマフォまで対応サイトサンプルを公開してます。

「Webサイトのスマートフォン対応 7つの基本ルール」というのがありました。

スマホ用に作成するのが、ユーザーとしては使いやすいです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング