携帯とスマホの両方で見栄えの良いサイトの作り方

質問

QRコードからサイトに飛ぶ
サイトには簡単な文章と写真とユーチューブへのリンクのみ

という風に考えています。携帯サイトをスマホで表示するとしょぼそうだけど、スマホサイトを携帯で表示は無理（５KB以内ですよね？）。共通の、よさげなものを作りたいのですが、どこかに良いチュートリアルサイトはないでしょうか？
もしくはスマホと携帯からのアクセスごとに違うサイトを見せることはできるのでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

＞携帯サイトではスタイルシートが使えないと聞きましたがいかがでしょう？
　古い携帯電話は別にして、必ずしもそうではありません。mediatype="tty"が携帯電話など固定ピッチ端末です。しかし外部スタイルシートを読まない、あるいはスタイルシートそのものを解釈しないとても古い携帯電話があるのも事実です。
　しかし、HTMLの属性での指定は解釈しますから、属性でデザインを指定してスタイルシートで上書きすればよいことです。属性値での指定は詳細度が[0]と解釈されます。
(スタイルシート属性での詳細度は[1000]、それ以外はセレクタで詳細度を考慮すれば良い)

　「共通の、よさげなものを作りたい」ためのHTMLでありスタイルシートですよ。--これこそ、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を書いて、スマホと携帯で見えるような、簡単なサイトに仕上げるのが一番簡単なようですね？

回答No.1

ORUKA1951

というか、利用者は携帯電話やパソコンやスマートフォンだけじゃない。テレビで利用されたり、印刷されたり、点字端末や読み上げソフトで利用されるかもしれませんし、さらには検索エンジンも訪問してくる。そもそも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文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　よって
＞スマホと携帯からのアクセスごとに違うサイトを見せることはできるのでしょうか？
　は意味を成さない。

　少なくとも、サイトのトップページだけは、サイズも小さくしてどの端末でも情報が伝わるようにつくり、それぞれの端末ごとにメニューへのリンクを表示させれば良い。

＞共通の、よさげなもの
　と言う意味は、HTMLに関しては文書構造がきちんと示されているという意味です。決してデザインではありません。デザインはスタイルシートに任せましょう。
→6.13 出力メディア ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-media-descriptors )

補足

＞デザインはスタイルシートに任せましょう。
携帯サイトではスタイルシートが使えないと聞きましたがいかがでしょう？

携帯向けサイトでは、一切のスタイルシートが使えません。
もともと、スタイルシートとは細かな装飾方法をアレンジするためのものなので
携帯の小さな画面でこれを使う理由は特に無いでしょう。
http://www.limy.org/program/mobile/list1.html