この記事は私たちの一部です 「Webレスポンシブデザインシリーズ」 - すべてのプラットフォームのユーザー向けのWebサイトを作成するためのツール、リソース、およびチュートリアルで構成されています。. ここをクリック 同じシリーズの他の記事を見る. デザイナーは今、以前よりもそれを厳しくしています。据え置き型デバイスだけでなく、タブレットやスマートフォンなどのモバイルデバイスも設計する必要があります。ここではさまざまな画面サイズと解像度について話しているので、それは肩を並べるのが大変な作業です。これを踏まえて, レスポンシブWebデザイン 最善の解決策かもしれません。それは単なる単純なモバイルテンプレート以上のものを提供します。代わりに、あなたのサイト全体のレイアウトは、あらゆる可能なスクリーン解像度に適合するのに十分柔軟であるように設計されています。. このような流動的な設計方式では、明らかな利点と欠点があります。レスポンシブWebデザインがモバイルデバイスへの移行をスムーズにする方法について、以下の私の例を検討してください. レスポンシブデザインの仕組み 私がその言葉を使うとき “敏感な” Webデザインに関しては、レイアウト全体がユーザーの画面解像度に基づいて応答することを意味します。このシナリオを想像してみてください。1つのタブレットでWebサイトを読んでいるときに、何らかの理由で別のデバイスに切り替えます。ブラウザウィンドウのサイズが変更されました。レスポンシブWebデザインのレイアウトは、優雅に分解してそれ自身を再発明するスキームとレイアウトを特徴とします。ユーザビリティの観点からは、これは素晴らしいテクニックです。. レスポンシブデザインとは、ブラウザやデバイスの画面サイズに関係なく、均一なエクスペリエンスを実現することです。私は自分のポイントを説明するために 'A List Apart'からの完璧な例を見つけました。それはまた動的な画像も含みます。幅は、ほとんどすべての内部コンテナ要素のパーセンテージを使用してCSSで設定されます。大規模なWebサイトでも、JavaScriptなどの動的コンテンツがサポートされていない場合に削除されるとうまく反応する. モバイル用に設計する理由? 外出先でのWebブラウジングだけでなく、より多くのユーザーがモバイル化することが明らかになりました。タブレットPCは、ユーザーが教室でオンラインになったときに状況が変わり始めました。モバイル向けの設計は、確かに現代のWeb標準における要件です。唯一の問題はあなたの開発方法を選択し、あなたの聴衆を適切にターゲットにすることです。. 特定の画面解像度のコーディングを始めると、対処するにはスタイルシートが多すぎます。 CSS3のメディアクエリを使用して、縦向きと横向きの両方のビュー用にiPhone固有のレイアウトを構築できます。あなたはピクセル密度を事前に決定することができるので、モバイル用のHTMLテンプレートを改良するのは簡単です。. （画像ソース：bradfrostweb） ただし、レスポンシブデザインのレイアウトをコーディングすると、モバイルの側面はデフォルトで処理されます。デスクトップとモバイルのどちらのユーザーにも同様のエクスペリエンスが提供されるので、外部のCSSプロパティについて心配する必要はありません。あなたが実行する必要がある唯一の研究は、可能な限り小さいディスプレイスクリーンを計画することです。 Google Analyticsのトラフィックデータはこれに非常に役立ちます。. すべてのブラウザを実行しているすべてのデバイスでWebサイトが100％機能することはおそらくありません。しかし、あなたはスクリーンの平均幅に基づいて大多数をターゲットにすることができます。旧式のiPhoneモデルは320×480のディスプレイ解像度を使用していますが、信じられないほどです。私はあなたがそれを収めることができれば240px、またはさらに小さい幅のために撃つだろう. デフォルトズームの削除 スマートフォンでWebを閲覧していた時間がある場合は、Webサイトが画面内に完全に表示されるように縮小されていることに気付くでしょう。ほとんどのWebサイトにはモバイル版がないため、これはユーザーの利便性のためです。したがって、フルレイアウトが最も安全な方法です。. しかし、レスポンシブモバイルデザインを構築する際には、オートズームによってレイアウト要素が本当に乱れることがあります。具体的には、画像やナビゲーションコンテンツが、レイアウト内で小さすぎたり大きすぎたりすることがあります。あなたがほとんどのAndroidとiPhoneデバイスでこれをリセットするドキュメントヘッダに追加できる特別なメタタグがあります....
