質問: スマートフォンとかに対応する為のもんらしいのですが、 色々調べるとCSSのwidthが関わっているらしいですが、 イマイチ解りません。 解りやすい解説をできましたらお願いします。
回答: 御存知のとおり、元々HTMLでウェブページを作成する最大の目的--唯一の目的と言っても良いのは、とても重要な 【引用】____________ここから HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。 ・・・【中略】・・・ HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( )]より でしたね。 レスポンシブであろうとなかろうと、ウィンドウの幅に依存しないデザインをされてきたと思います。width="auto"がデフォルトですが、例えばその上でwidth:80%;min-width:480px;max-width:900px;とか・・ ところがそれでは、やはりスマホでのアクセスが多い現在、そのような狭いディスプレイに合わせて、デザインそのものを変えようと言うのがレスポンシブです。 これは、CSS2の時代から存在した、media指定の拡張です。 HTML4.01 ⇒14.2.4 出力メディア型( ) CSS2.1 ⇒7 メディアタイプ( ) まず、これらをしっかり理解すること。 今まで、メディアタイプでスタイルシートを切り替えてこられたと思いますが、メディアタイプでは、screen(PCやスマホ)、print(印刷)、handheld(携帯電話やPDA)、embossed(点字端末)とかに限られていましたが、レスポンシブ( mediaquery )は、さらに表示幅に対応して、デザインを変えるだけです。 ⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き( ) ⇒ウェブサイトをスマートフォン対応するために必要な5つの事 | コノルブログ( )