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

締切り済みの質問

レスポンシブWebデザインでテキストの振分について

現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。

そこで疑問に思ったことがあります。

私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/
パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。
※もちろん、スマホで見れば、スマホに最適化された表示になっております。

一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。
しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。
私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。

このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか?
もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト(文章)の振り分もできるということなのでしょうか?

レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。

以上となります。
どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。

宜しくお願い致します。

投稿日時 - 2015-03-17 18:11:14

QNo.8937669

すぐに回答ほしいです

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

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

-広告-
-広告-

回答(4)

ANo.4

最近、C#の勉強をしていて、マイクロソフトのWEBサイト作成技術のひとつである「MVC5」が目に入りました。
その宣伝用の動画を見ていると、「このVisualStudioでMVCを使って開発すると、自動的にレスポンシブWEBデザインになります」と言われていました。

原理は、ひとつのHTMLを作成し、端末ごとにCSSを用意するだけで、PC用、タブレット用、スマホ用と切り替えてくれてました。
ちょこちょこと作成したと見えるデモ画面では、画面サイズの変化に応じて、上下配置、左寄せ、センタリング、画像サイズなどが変化し、見やすくなっていました。
CSSは、VisualStudioで用意されたものが使われているようでした。また、メールやfacebook等のアカウントを使った認証システムも自動生成してくれるようです。
jQueryも使わず、HTML5を使わないといけないってこともないそうです。
ただし、デザインによってはゼロからCSSを記述する必要があったりして、それは大変なこともあるそうです。

昔と比べて、とても便利になっていますね。

投稿日時 - 2015-04-04 08:23:43

その通りだと思います。

http://www.sumitomocorp.co.jp/ も参考のために、参照してみました。
レスポンシブの考え方には、コンテンツファーストと、モバイルファーストの二つがあります。
私は、WEB開発当時から、コンテンツファーストを貫いています。
振り分けは、.htacsessで行ったり、Javascriptで行いますが、最近では、MediaQueryというCSSを使う手法が、多くなりました。(私もこちらをお勧めします)

WEBの考え方からするとおかしい?・・・
バーナーズ・リー博士の、HTMLを考案した考え方からも、遠く離れているし、情報の共有という考えからしても、PC用・WEB用などと分けてコンテンツを制作すること自体が、おかしいと思います。

参考URL:http://www.8341web.com/

投稿日時 - 2015-03-20 22:37:06

ANo.2

> ありがとうございます。その場合ですが、HTMLのファイルは2つ作成して、2つのファイルがあるのでしょうか?

システムの設計次第ですが、通常は完成したHTMLそのものが在るのではなくテンプレートデータがあって、データベース等から持って来たデータを加えてHTMLを完成させ出力します。
テンプレートはデバイスタイプ別、会員・非会員別など、そのサービスの形態によって何種類か用意する事になります。

投稿日時 - 2015-03-18 09:36:14

ANo.1

アマゾンのようなサイトは、サーバサイドで動いているプログラムがクライアントを識別して表示するHTMLを出し分けています。
そのため、同じURLでも違うHTMLが表示されます。

投稿日時 - 2015-03-17 18:17:58

お礼

ありがとうございます。その場合ですが、HTMLのファイルは2つ作成して、2つのファイルがあるのでしょうか?

投稿日時 - 2015-03-17 18:36:50

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-