on:2015年1月26日sponsorsレスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。複雑しているのが配置の名称。Fixed、、、スタティックとはどこが静的なのか、アブソリュートはどこに依存するのか、それらがよく分かるアニメーションを使った解説を紹介します。design下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。彼らの他の記事もいくつか翻訳しています。アニメーションでの解説が非常に分かりやすくオススメです。-固定配置おわりにZ-indexまずは、この「z-index」があらゆるタイプの配置方法にどのように影響を与えるのかを見てみましょう。z-indexはデザイン用のアプリにあるレイヤーに似ており、手前なのか後ろなのかというシンプルな方法です。z-indexの使いどこボタンなど、クリック可能な要素を手前にする時。z-indexの注意点そのクリック可能な要素の手前には何も配置しないようにします。クリックできなくなります。静的配置はデフォルトの配置方法です。その名称は何も動いていないことを表現しているように見えますが、そうではありません。「Static」とは、要素が流れに沿ってスタティックであることを意味しています、もし一つの要素が動けば、他の要素も同様に動きます。positionの使いどこ全てのブラウザで安全に利用できる配置方法です。水平・垂直方向に最大・最小サイズを設定することで、デザインは完璧な状態を保つことができます。positionの注意点コンテンツの内容が変化するテキストブロックには十分注意してください。デザインを壊してしまうことがあります。絶対配置はX軸とY軸で要素の位置を定義する配置方法です。気をつけたいのは絶対値なのか、親に対しての相対値なのか、ということです。必要がなければ絶対値が楽です。絶対値で配置された要素は、他の要素には影響を受けずに配置することができます。静的配置で置かれたあらゆる要素の上に表示することができます。positionの使いどこロゴやメニューなど、ページ上でに常に手前に表示しておきたい要素など。絶対配置はレスポンシブWebデザインと相性がよくありません。相対的に配置された要素は、静的に配置されたように振る舞います。絶対的に配置された子供の要素はローカルのフレーム的な役割をします。positionの使いどこ絶対配置で置く要素の容器となる親要素。positionの注意点ロゴやバッジなど、常に手前にしなければいけないものには向きません。相対的な要素でそれらを内包するのは避けたほうがよいです。「Fixed」が意味するのは、そのポジションがブラウザのビューポートに対して常に固定されていることです。positionの使いどこブラウザの最上部に常に見えているナビゲーションなど。固定配置の背後に隠れてしまった要素はクリックできません。おわりに実際に配置する時には、これらのいろいろな配置方法がミックスされます。バナーの配置を考えると、最初に表示された時には静的に見え、スクロールしバナーが上部に移動すると絶対的に配置になる場合、JavaScriptを使うことでうまく配置することができるでしょう。floatプロパティを使って、インラインブロックにして調整することが多いでしょう。コードの保守を容易にすることを考えると、主に静的配置とマージンを組み合わせるのがベストです。彼らは、レスポンシブWebデザインの便利ツールもリリースしているのでお試しを。