レスポンシブウェブデザインを作る6つ方法②

レスポンシブウェブデザインを作る6つ方法②

2019.01.11

約300pxの幅でプレビューした画像は、ユーザーが最も使いやすいディスプレイになっているので、それから、ビューポートを300pxから少しずつに拡大してみましょう。全部の要素正しく表示されていると思います。 ただし、サイズを大きくすると、見易くするために各要素の幅が画面に合わせて、調整されていることが分かるでしょう。それは「ブレークポイント」と呼びます。表示のとおりに調整するためにメディアクエリを使用して、そのブレークポイントをスタイルシートに設定してから、ビューポートのサイズをもう一度大きくしていきましょう。



最初に小さい画面からを設計して、ビューポートのサイズを少しずつ大きくしてブレークポイントを見つけます。

5.ビューポートメタタグを設定する
この手順は非常に簡単です。まずビューポートのメタタグでビューポートのデフォルトを設定します。ピクセルはデバイスピクセル、CSS ピクセル、物理ピクセルで分かれます。

Physical Pixelsは、実際のピクセル数でデバイスの仕様に基づきます。たとえば、iPhone 3は320×480、iPhone 4は640×960です。

CSSピクセルは、CSS宣言に使用するピクセルです。例えば、width:320pxか、font-size:16pxで、画面をズームしていない場合、通常のCSSピクセルは物理ピクセルと同じでしょう。しかし、ズームしたら、画像も拡大されます。なぜなら、これはWebブラウザがCSSピクセルを大きなサイズに拡大します。逆に縮小すると、CSSピクセルは小さくなり、画像も小さくなります。



100%のズームでは、CSSピクセルはPhysical Pixelと同じです。



縮小すると、CSSピクセルはPhysical Pixelよりも小さくなります。



CSSピクセルにズームインすると、Physical Pixelより大きくなります。

最後に、Device Pixelsは、アプリケーションがさまざまな要素のサイズを決定できるようにするピクセルのようなものです。ユーザーの視点の適合性を一致させることができます。物理ピクセルに応じて、加算されませんが、画面のサイズに応じて増加します。

例えば、一つのデバイスの画面サイズがわずか5インチだけですが、物理ピクセルが1280ピクセルであるデスクトップとほぼ同じと仮定すると、CSS Pixelsに基づいたビューポートに反応します。画面は5インチしかありませんが、その外観はデスクトップに表示されるようになります。

Device Pixelsで簡単に解決することができます。このようなコードを書いてviewportメタタグでviewportをdevice-widthに基づくように変更しましょう。



上記のHTMLコードは、CSSピクセルの代わりにデバイスピクセルを使用するためにビューポートに割り当てられており、最初のズームを100%に設計されます。レスポンシブウェブデザインを作る際には必ず上記のコードを追加してみましょう。

6.実際のデバイスで確認する
最後のステップです。 それが実際に作成したウェブサイトをデバイスで確認します。なぜ最後のステップとしてデバイスで確認するのをするでしょう。どうしてやりながら、テストするの?。それは必要がありません。良い作業計画があれば、 今まで言ったステップを理解するでしょう。 そして丁寧にに従ってくださったら、 ウェブサイトは自動的に美しく表示されるでしょう。ポイントはステップ3と4にあります。ステップ3では、すべての要素に対して相対的なサイズを設定し、要素のサイズを調整します。ステップ4では、主にコンテンツを見ながらさまざまなブレークポイントを設定しますので、最初に小さいのスクリーンから始めて、それからビューポートのサイズを少しずつ大きくしていきます。その点をブレークポイントとして定義してから、メディアクエリを書きます。

それは自動的にさまざまなデバイス上で動作するのに、なぜまだ確認しなければならないのでしょうか。デバイスにはさまざまなものがあるため、ビューポートだけでなく、OS、ブラウザ、およびデバイスによって違いがあります。実際のデバイスで確認し、主要なデバイスだけを選択することです。



必ず0から作成しましょう。
最後に、レスポンシブウェブデザインは0から開発する必要があります。たまにすでにウェブサイトを持っていて、レスポンシブウェブデザインに変えをため、コードを使い回すのはお勧めしません。また今後色々な問題がありますので、最初からレスポンシブを前提に設計されていなかったので、開発上の困難があります。一つ問題を解決してもまた別の問題が発生するかもしれません。最初からデザインした方が必ずいい出来上がりでしょう。


Top