レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説

Post on:2015年1月26日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。

さらに複雑しているのが配置の名称。
Static, Absolute, Relative, Fixed、、、スタティックとはどこが静的なのか、アブソリュートはどこに依存するのか、それらがよく分かるアニメーションを使った解説を紹介します。

Positioning in web design

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

彼らの他の記事もいくつか翻訳しています。
アニメーションでの解説が非常に分かりやすくオススメです。

Z-index
Static position -静的配置
Absolute position -絶対配置
Relative position -相対配置
Fixed position -固定配置
おわりに

Z-index

まずは、この「z-index」があらゆるタイプの配置方法にどのように影響を与えるのかを見てみましょう。z-indexはデザイン用のアプリにあるレイヤーに似ており、手前なのか後ろなのかというシンプルな方法です。

z-indexの使いどこ: ボタンなど、クリック可能な要素を手前にする時。
z-indexの注意点: そのクリック可能な要素の手前には何も配置しないようにします。クリックできなくなります。

Static position -静的配置

静的配置はデフォルトの配置方法です。その名称は何も動いていないことを表現しているように見えますが、そうではありません。「Static」とは、要素が流れに沿ってスタティックであることを意味しています、もし一つの要素が動けば、他の要素も同様に動きます。

Static positionの使いどこ: 全てのブラウザで安全に利用できる配置方法です。水平・垂直方向に最大・最小サイズを設定することで、デザインは完璧な状態を保つことができます。
Static positionの注意点: コンテンツの内容が変化するテキストブロックには十分注意してください。デザインを壊してしまうことがあります。

Absolute position -絶対配置

絶対配置はX軸とY軸で要素の位置を定義する配置方法です。気をつけたいのは絶対値なのか、親に対しての相対値なのか、ということです。特に必要がなければ絶対値が楽です。絶対値で配置された要素は、他の要素には影響を受けずに配置することができます。そして静的配置で置かれたあらゆる要素の上に表示することができます。

Absolute positionの使いどこ: ロゴやメニューなど、ページ上でに常に手前に表示しておきたい要素など。
Absolute positionの注意点: 絶対配置はレスポンシブWebデザインと相性がよくありません。