レスポンシブWEBでありますけど

質問

スマートフォンとかに対応する為のもんらしいのですが、
色々調べるとCSSのwidthが関わっているらしいですが、
イマイチ解りません。
解りやすい解説をできましたらお願いします。

回答No.2

tkmojo

解りやすい解説を、というか一言で済んでしまいます。
「ブラウザの幅ごとにcssを設定する」と言うものです。

具体的な作り方は「レスポンシブ 作り方」とかで検索すれば山ほど出てきますので割愛し、なぜそんな作り方をするのかという点についてもう少し具体的に書きます。

レスポンシブが一般的になる前から、スマホサイトが流行っていました。
いわゆるスマホサイトはPCサイトとは別のサイトを構築するというもので、PCサイトとはかけ離れた作り方が出来るので自由度は高いですが、メンテナンスのコストが2倍になります。

スマホが出て来てしばらくしてからは、iPadやタブレットが出てきました。
スマホサイトだと見難いしPCサイトだと能が無い、とタブレットに合わせたサイトを作る企業も多少ありましたが、これだとメンテナンスコストが3倍です。

そのあたりから急速に流行り出したのがレスポンシブウェブデザインです。
ブラウザの横幅の情報を取得し、幅ごとに適用するcssを変更する事で、ひとつのhtmlであらゆるデバイスに対応したサイトを作ろうというものです。
これだとひとつの更新にあたって何か所も更新する必要が無く更新コストは下がります。
レスポンシブデザインの一番の目的は「更新コストの軽減」です。

もう一つメリットとしてよく挙げられるのは、SEOに有利と言う点です。
スマホサイトを別に作った場合はURLが別なので、その時点で多少効果が軽減される恐れがあります。
PCサイトとスマホサイトで同じような情報がWeb上に二つあるので、ダミーサイトだと判断されると順位を落とされるという危険もある、という意見もありました。
（実際にはないと思いますが）

また、Googleがレスポンシブを推奨しているという情報が出て、SEOに有利だという噂が広がりました。単純にURLが一つだと1度のクロールで済むので検索エンジンに優しいのはある意味当然です。
ただ、その後改めてGoogle社員がレスポンシブだからと言ってランキングには影響しないと公表しました。
ですので、実際にSEOに有利かどうかは実際にははっきりしていません。
個人的にはあまり関係ないと思ってます。

レスポンシブはメリットばかりではなくデメリットも多いです。

・構築コスト
レスポンシブデザインでサイトを作るにはしっかりとした企画と技術力が必要になり、PCサイトとスマホサイトの二つを作るよりも制作コストがかかる事が多いので、ほとんどの場合で初期費用は上がります。

・通信量
PC用のコンテンツ分の容量を全て読み込むので、スマホサイトを作った場合とは異なり、通信量は上がり、単純にスマホサイトよりも表示速度が遅くなります。

・自由度の低さ
スマホ用サイトを作る場合はスマホ独自の機能をふんだんに使用できますが、レスポンシブは1コードなのでスマホに特化したコンテンツを作る事には向きません。
あくまで「閲覧できる」であって、「最適化」ではありません。

・スマホやタブレットではPCサイトを表示できない
スマホサイトには「PCサイトを表示」というようなボタンがある事が多く、PCサイトに慣れた方はそちらのほうが使いやすいと思う場合も多いと思います。
レスポンシブでは幅ごとにレイアウトが固定されますので、PCサイトを見る事は出来ません。
また、ブラウザの拡大機能を切ってしまうため、拡大する事も出来なくなります。

このあたりを踏まえて、コストに見合う効果があるかを考えて判断しましょう。
最近では、こういうネガティブな記事もあります。
http://www.domore.co.jp/mobilelab/oneweb/oneweb140716

回答No.1

ORUKA1951

御存知のとおり、元々HTMLでウェブページを作成する最大の目的--唯一の目的と言っても良いのは、とても重要な
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　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 )］より
　でしたね。

　レスポンシブであろうとなかろうと、ウィンドウの幅に依存しないデザインをされてきたと思います。width="auto"がデフォルトですが、例えばその上でwidth:80%;min-width:480px;max-width:900px;とか・・
　ところがそれでは、やはりスマホでのアクセスが多い現在、そのような狭いディスプレイに合わせて、デザインそのものを変えようと言うのがレスポンシブです。
　これは、CSS2の時代から存在した、media指定の拡張です。
HTML4.01 　⇒14.2.4 出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 )
CSS2.1 　⇒7 メディアタイプ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/media.html )

　まず、これらをしっかり理解すること。

　今まで、メディアタイプでスタイルシートを切り替えてこられたと思いますが、メディアタイプでは、screen(PCやスマホ)、print(印刷)、handheld(携帯電話やPDA)、embossed(点字端末)とかに限られていましたが、レスポンシブ( mediaquery )は、さらに表示幅に対応して、デザインを変えるだけです。
　⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き( http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ )
　⇒ウェブサイトをスマートフォン対応するために必要な５つの事 | コノルブログ( http://conol.co.jp/blog/archives/837 )