.レスポンシブウェブデザインについて

Question

.レスポンシブウェブデザインはすでにwebクリエーターの仕事をする上でそのように作るのは当たり前なのでしょうか？ 
JQUERYのプラグインなどでやっているのでしょうか？
現場ではどんな方法でやっているのでしょうか？
それともまだ不要だったり、今後消える可能性もあるのでしょうか？

その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？
 
%は計算が大変で画面のサイズが大きい場合はラッパー外の画像をたくさん表示して、小さい場合はラッパーの後ろに画像が入るようにするデザインが出来ないのでしょうか？
 ラッパーを80%などにするのでしょうから、そうしたい場合小さい画面でも常に画像が同じ割合表示されてしまいますよね？
 何か良い方法はあるのでしょうか？

tkmojo · Accepted Answer

> .レスポンシブウェブデザインはすでにwebクリエーターの仕事をする上でそのように作るのは当たり前なのでしょうか？

Webサイトの制作はビジネスですので予算によります。
レスポンシブは結構コストがかかるのでお客さん次第じゃないですかね。
ちゃんと作ってればPCサイトはタブレット、スマホで問題無く閲覧できるので
個人的にはレスポンシブは作り手の自己満足に近いと考えてます。

また、レスポンシブにすればそれだけでSEOに効果があるというのも眉唾です。
http://www.suzukikenichi.com/blog/responsive-web-design-is-not-a-ranking-factor/

色々な事を総合的に判断してレスポンシブにするのかどうかを決定しましょう。

> その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？

「%ですべて指定して作るやり方」というのは普通のリキッドデザインという事ですね。
レスポンシブとは違います。
ただのリキッドデザインでは、幅によってカラムを意図的に落としたりメニューの表示方法や位置を変えたりする事は出来ません。
@mediaで指定して、幅ごとに異なるスタイルを指定して作成したのがレスポンシブウェブデザインです。

例えば、上記サイトに挙げたサイトのサンプルを下に転記しますが、
下記の様な場合に#containerに対して%を指定するかpxを指定するかは作り手の自由です。
max-width部分はpxです。（ここが%なら何をやってるのかわからないので。）

@media screen and (max-width: 1000px) {
#container{
width : 95%;
}
}

■px指定の例
http://www.saintmedia.co.jp/corp/

■%指定の例
https://www.chozai-ma.jp/

勿論全体の囲みだけでなく、表示方法を変える所は幅ごとにいちいち指定を上書きする必要があります。

nanden1548 · Answer

レスポンシブデザインは、閲覧者の環境にあわせ、最適な表示をするための手法の一つです。
考え方の違いで、その手法はさまざまです。

WEBの基本は、すべての閲覧者に対し、その情報を正しく伝えるというものです。
デザインとは全く異なった考え方から生まれたものなので、その辺を正しく学ぶ必要があるのでは？・・・

あらゆるデバイスに対し、閲覧者の環境に合わせ、最適な表示を行う！
この基本を理解すれば、なぜレスポンシブにするのかが、ご理解いただけるのでは？・・・

ORUKA1951 · Answer

そもそも、ラッパーってなんでしょう。・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。　HTML4.01仕様書　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ・HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。　HTML5で追加された新しい要素　( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ・　⇒【問題2】文書内に埋め込まれた「意味」が不明確　HTML5が解決する、Webの“3つ”の問題とは　( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) 　リンク先を読まれるとわかるようにラッパーなんて文書構造はありません。　　　　

　　とか・・・。ひょっとしてデザインのためにHTML書いてませんか？？？。それじゃ「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」を目的にHTMLとスタイルシート分けた意味がない。＞JQUERYのプラグインなどでやっているのでしょうか？　jQueryはあくまで補助です。言い方悪いが素人のクライアントに派手でインタラクティブな様子を見せて点数稼ぐため以上のものではありません。喜んでくれるので良く使いますけどね。＞その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？　上記だと外枠は div.header,div.section,div.footer{ width:100%;min-width:630px;max-width:1000px; margin:0 auto;padding:5px; } で、480～1010pxまでは追随・・ div.header{ background:url() aqua no-repeat; background-image:cover; position:relative; } div.header h1{ margin:0;height:20px;width:100%; background-image;url(); background-size:cover; text-indent:-100em; overfow:hidden; } とか・・・。HTMLには文書しか書いてないので、別にHTML見なくても書いていけるはず。 HTMLの内容の改定も楽ですし、スタイルの全面的変更もHTML触らなくて良い。言い換えれば、スマホ用にmediaquery使っても良いし、印刷用のスタイルシート用意しても良い。　その上で、mediaquery使って、端末の解像度でスタイルを切り替えればよいです。配置にpx使うと一番困るのが、Ctrl+＋などでフォントサイズを変えられたとき。　デザインにいくら凝っても、所詮自己満足、内容が伴わなければ誰も見に来てくれない。

poyopoyo111 · Answer

現在、PCのアクセスよりもスマホのアクセスが5割を超えている状況にどこのホームページもなっていますので、スマホ対策が重要な課題となっています。

またスマホで知り得た情報をfacebookや電子メールで共有することも増えてきましたので、その点では連絡された相手が適切な状態で閲覧できないホームページでは困ったことになってしまいます。

このことから、最近ではホームページについてはレスポンシブウェッブデザインにて作成され、CSSはモバイルファースト、画像を％やemで指定し、pxによる絶対指定でなく記述することが好ましいと思います。

自分よりまずは利用されるお客様が大切です。

JavaScriptによってPCサイトをスマホに飛ばすケースがありますが、その逆もできず、またTOPにしか飛ばないサイトに関してGoogleは好ましくなくと表明していますので、気をつけましょう。

.レスポンシブウェブデザインについて

> .レスポンシブウェブデザインはすでにwebクリエーターの仕事をする上でそのように作るのは当たり前なのでしょうか？

レスポンシブデザインは、閲覧者の環境にあわせ、最適な表示をするための手法の一つです。

そもそも、ラッパーってなんでしょう。

現在、PCのアクセスよりもスマホのアクセスが5割を超えている状況にどこのホームページもなっていますので、スマホ対策が重要な課題となっています。

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

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

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