Webブラウザがパーセンテージ値を使用してディスプレイをどのように決定するかを学ぶ
レスポンシブウェブデザインの学生の多くは、幅の値のパーセンテージを使用するのが困難です。 具体的には、ブラウザがこれらのパーセンテージをどのように計算するかと混同しています。 レスポンシブウェブサイトでの幅計算のためにパーセンテージがどのように機能するかについての詳細な説明があります。
幅値にピクセルを使用する
ピクセルを幅の値として使用すると、結果は非常に簡単です。 CSSを使用してドキュメントのヘッダー内の要素の幅の値を100ピクセル幅に設定すると、その要素は、Webサイトのコンテンツまたはフッターまたは他の領域の100ピクセル幅に設定された要素と同じサイズになりますページ。 ピクセルは絶対値なので、文書内のどこに要素が表示されても、100ピクセルは100ピクセルです。 残念ながら、ピクセル値は理解しやすいものの、応答性の高いWebサイトではうまく機能しません。
Ethan Marcotteは、このアプローチに3つの主要なプリンシパルが含まれていると説明する、「レスポンシブウェブデザイン」という用語を作成しました。
- 流体グリッド
- 流体媒体
- メディアクエリ
最初の2点である流体グリッドと流体メディアは、ピクセルの代わりにパーセンテージを使用して値のサイジングを行います。
幅の値のパーセンテージの使用
要素の幅を設定するためにパーセンテージを使用する場合、要素に表示される実際のサイズは、ドキュメント内の位置によって異なります。 パーセンテージは相対値です。つまり、表示されるサイズはドキュメント内の他の要素との相対的なものです。
たとえば、イメージの幅を50％に設定した場合、イメージが通常のサイズの半分で表示されるわけではありません 。 これはよくある誤解です。
イメージがネイティブに600ピクセル幅の場合、CSS値を使用して50％で表示しても、Webブラウザーでは300ピクセル幅になるとは限りません。 このパーセント値は、画像そのもののネイティブサイズではなく、その画像を含む要素に基づいて計算されます。 コンテナ（ディビジョンまたはその他のHTML要素）が1000ピクセル幅の場合、イメージはコンテナの幅の50％であるため、500ピクセルで表示されます。 含まれる要素の幅が400ピクセルの場合、画像はコンテナの50％であるため、画像は200ピクセルでのみ表示されます。 ここで問題になっている画像は、それを含む要素に完全に依存する50％のサイズを持っています。
応答性の高いデザインは流動的です。 画面サイズ/デバイスが変更されると、レイアウトとサイズが変わります 。 あなたが物理的な、ウェブ以外の言葉でこれを考えるならば、それはあなたが梱包材で満たしている段ボール箱を持つようなものです。 箱にその材料が半分入っていると言えば、必要な梱包量は箱の大きさによって変わります。 ウェブデザインの幅のパーセンテージについても同様です。
他のパーセンテージに基づくパーセンテージ
画像/コンテナの例では、反応する画像がどのように表示されるかを示すために、包含する要素のピクセル値を使用しました。 実際には、包含する要素もパーセンテージに設定され、そのコンテナ内の画像または他の要素はパーセンテージのパーセンテージに基づいて値を取得します。
実際にこれを示す別の例があります。
サイト全体が「コンテナ」（一般的なウェブデザインの実践）のクラスを持つ部門内に含まれているウェブサイトを持っているとします。 その部門内には3つの別々の部門があり、最終的には3つの垂直な列として表示するようにスタイルを設定します。 そのHTMLは次のようになります。
さて、あなたは、その "コンテナ"部門のサイズを90％と言うようにCSSを使うことができます。 この例では、コンテナ部門にはボディ以外の要素がありません。これは特定の値に設定されていません。 デフォルトでは、ボディはブラウザウィンドウの100％としてレンダリングされます。 したがって、コンテナ部門のパーセンテージは、ブラウザウィンドウのサイズに基づいています。 そのブラウザウィンドウのサイズが変わると、この "コンテナ"のサイズも変わります。 したがって、ブラウザウィンドウの幅が2000ピクセルの場合、この区分は1800ピクセルで表示されます。 これは、ブラウザのサイズである2000（2000 x 90 = 1800）の90％として計算されます。
「コンテナ」内に見つかる「col」区画のそれぞれが30％のサイズに設定されている場合、これらの各区画はこの例では540ピクセル幅になります。 これは、コンテナがレンダリングする1800ピクセルの30％（1800 x .30 = 540）として計算されます。 そのコンテナのパーセンテージを変更した場合、これらの内部ディビジョンも、要素を含む要素に依存するため、レンダリングするサイズが変更されます。
ブラウザウィンドウが2000ピクセル幅のままであると仮定しましょうが、コンテナのパーセンテージ値を90％ではなく80％に変更します。 つまり、現在は1600ピクセル幅でレンダリングされます（2000 x .80 = 1600）。 3つの "col"区画のサイズに対してCSSを変更せずに30％にしても、サイズが変更されたコンテキストである包含要素が変更されているため、異なるレンダリングが行われます。 これらの3つの桁は、それぞれ480ピクセルの幅でレンダリングされ、1600の30％、またはコンテナのサイズ（1600 x .30 = 480）になります。
さらにこれを考慮すると、これらの「col」区画の1つに画像があり、その画像がパーセンテージを使用してサイズ調整されている場合、そのサイジングのコンテキストは「col」自体になります。 その "col"部のサイズが変わったので、内部のイメージも変わりました。 したがって、ブラウザまたは "コンテナ"のサイズが変更された場合、それは3つの "col"分割に影響し、 "col"内の画像のサイズを変更します。ご覧のとおり、これらはすべてパーセンテージ駆動のサイジング値になります。
Webページの要素が、その幅に対してパーセンテージ値が使用されたときにどのようにレンダリングされるかを検討するときは、その要素がページのマークアップ内に存在するコンテキストを理解する必要があります。
要約すれば
レスポンシブウェブサイトのレイアウト作成には、パーセンテージが重要な役割を果たします 。 サイズに応じてイメージのサイズを変更するか、パーセンテージ幅を使用してサイズが相対的に大きい本当に流動的なグリッドを作成する場合でも、あなたが望む外観を達成するにはこれらの計算を理解する必要があります。