Web Technology > Visual Studio for Designers

相対座標でレイアウトする

VS.netのデフォルトでは、コントロールは絶対座標指定で、レイアウトされます。そのため、ヴィジュアルコードのスタイルには、「position:absolute」が必ず設定されるようになります。

全てのコントロールが絶対座標でレイアウトされていると、必ずしも、コントロールの並び順と、ヴィジュアルコードのタグの記述順は一致しません。とくに、途中で仕様が変わり、コントロールの追加や削除がなされた場合、コントロールの並び順とIDの番号、ヴィジュアルコードの並び順には、関連性がなくなります。
あるフォームでは、10行目に書かれていた、idがLabel5のLabelコントロールが、値を渡して開いた先のフォームでは、最終行にあってidもLabel7になっている、といったことが起こりえます。

プログラマが、Photoshopで作られたラフを見ながらコントロールをレイアウトする場合、コントロールが見かけ上正しい順番に並んでいれば、それでOKだと判断してしまいがちです。DataGridやDataListを使ったり、コントロールをプログラムで生成するなどの処理で、コントロールのHeightが定まらない場合、その下にボタンをレイアウトするには、どうしても部分的に、絶対座標指定が必要になります。
そのような場合、プログラマは、できるだけラフの並び順にしたがって、コントロールをレイアウトするように、心がけてください。

デザイナがVS.netを使ってレイアウトして、プログラマに渡したとしても、仕様変更にプログラマが対応する場合は、注意が必要です。コントロールを追加した場合は、必ず、そのコントロールが、ヴィジュアルコードの中でも、追加すべき位置に書かれていることを確認しておいてください。もし、所定の位置に書かれていなけば、順番を入れ替えておく程度の配慮はしておきましょう。
そうすれば、プログラムが全て完了し、ヴィジュアルデザインを微調整する段階で、ヴィジュアルコードを変更しやすくなります。

もし、必ずしも、絶対座標指定が必要でないなら、相対座標指定でレイアウトした方が、デザイン上の融通が利きます。
VS.netを起動した際、次のようなメッセージが、画面中央に表示されています(vs_layout1.gif)。
VS.netのデフォルトでは絶対座標指定
この手順に従って、documentのプロパティを表示し、「GridLayout」から「FlowLayout」に変更します(vs_layout2.gif)。
documentのプロパティを変更する
すると、相対座標指定でレイアウトできるようになります(vs_layout3.gif)。
相対座標指定でレイアウトしていく

ユーザの閲覧環境を限定しない場合は、ユーザのマシンで設定されている文字サイズ、ブラウザ、画面解像度、ユーザの環境のデフォルトの書体などにより、絶対座標でレイアウトすると、コントロールや文字が重なるなどの不具合が発生することがあります。
多少のアキなどはブラウザのCSS解釈が異なる以上、やむをえませんが、ボタンが重なって押せないなどの不具合は避けなければなりません。
ですので、問題の発生を防ぐ意味でも、できるだけ相対座標指定でデザインする方が望ましいでしょう。

開発も納期間際になると、バグ修正とデザインの微調整、どちらも急ぐという状況になることが、往々にしてあります。
本来は、デザインの微調整を行ってから、バグ修正という手順でしょうが、デザイナが、コントロールとidの対応表を作り、電卓をはじいて座標値計算をし、コードの上下を入れ替えてはmarginを調整しなければならないといった作業に時間を使っていては、プログラマはバグとり作業に、なかなか着手できずに焦ってしまうことでしょう。
できるだけムダや手間を省き、バグの発生をおさえるためにも、コントロールのレイアウトという一見何でもない問題にも、真剣に取り組んだほうがよいと思います。

もどる