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

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

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

サイトのキャプチャ

Positioning in web design

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

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

Z-index

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デザインと相性がよくありません。

Relative position -相対配置

相対配置のアニメーション

相対的に配置された要素は、静的に配置されたように振る舞います。しかし、絶対的に配置された子供の要素はローカルのフレーム的な役割をします。

Relative positionの使いどこ
絶対配置で置く要素の容器となる親要素。
Relative positionの注意点
ロゴやバッジなど、常に手前にしなければいけないものには向きません。相対的な要素でそれらを内包するのは避けたほうがよいです。

Fixed position -固定配置

固定配置のアニメーション

「Fixed」が意味するのは、そのポジションがブラウザのビューポートに対して常に固定されていることです。

Fixed positionの使いどこ
ブラウザの最上部に常に見えているナビゲーションなど。
Fixed positionの注意点
固定配置の背後に隠れてしまった要素はクリックできません。

おわりに

実際に配置する時には、これらのいろいろな配置方法がミックスされます。例えばバナーの配置を考えると、最初に表示された時には静的に見え、スクロールしバナーが上部に移動すると絶対的に配置になる場合、JavaScriptを使うことでうまく配置することができるでしょう。

もしも二つの要素を一列に並べようとするとしたら、どうしますか? floatプロパティを使って、インラインブロックにして調整することが多いでしょう。コードの保守を容易にすることを考えると、主に静的配置とマージンを組み合わせるのがベストです。

彼らは、レスポンシブWebデザインの便利ツールもリリースしているのでお試しを。

サイトのキャプチャ

FROONT -Responsive Web Design Tool

10プロジェクトまで無料で利用できます!

sponsors

top of page

©2018 coliss