画面の配置方法

質問

こんばんは。今回皆様からのアドバイスを頂きたく、書き込みさせていただきます。
今まで私が使っていた画面（JSP＆サーブレットの勉強用に作った画面）なんですが、レイアウトが汚いのと（画面六枚あるのに、統一性なし）、テーブルを使って配置しているので、肝心のプログラムがタグに埋もれてしまってソースが見にくいのとで、スタイルシートをつかって、すっきりさせたいと思っています。そこでスタイルシートの勉強をしているのですが、疑問が。
私はブラウザの伸縮によってレイアウトが変わってしまうようなものではなく、固定のレイアウトにしたいと思っています。
その際に、１画面十数個もある部品（ボタンとかテキストとか）の位置を一つ一つ指定するんですよね？
今日試したみたのがpositionを使ってのピクセル指定なのですが、これがまた、タグを記述しては実行してみてちょっとずれてたらまた微調整して、みたいな感じで大変手間がかかります。（今まではテーブルで大体の位置を指定して、ブラウザの大きさによってレイアウトが変わりました）
ホームページのレイアウトをスタイルシートを使って作成する際に（テーブルは使わずに）、普通皆様はどのように作成しておられるのでしょうか？
綿密に計算してから作成するのか、私みたいにとりあえず書いてみて「あ、もうちょい右っ側かな」と修正するのか、はたまたもっと便利な方法があるのか…。
もし宜しければご教示頂けないでしょうか？
宜しくお願い致します。

回答No.2

noname#199778 · ベストアンサー

私の場合は、あんまり厳密な配置をしないということもありますが、だいたい目算とトライ&エラーでやってしまいます。 慣れれば、それなりに予測できると思いますよ。

質問文にあるように、ボタンの配置やテキストの配置などを逐一決めて打ち込むのでは少々手間がかかりすぎると思いますが…
インライン要素については、その親のブロックレベル要素で表示位置を決めてしまうのが良いと思います(すべての部品に指定を入れる必要はないでしょう)。 また、ブロックレベル要素については、まとめられる分は一つのブロックレベル要素(div要素が使いやすいと思います)に格納してしまって、その取りまとめたブロックレベル要素で表示位置を決めていくのが、楽だと思いますよ。
例えば、こんな感じです。

<div style="position: absolute; top: 40px; left: 400px; width: 100px; border: 1px solid black;">
<p>テキスト表示部。 p要素には表示位置指定のスタイルは入れていません。</p>
<p>まとめられる部分はこれでまとめてしまって、後で親ボックスの位置や表示範囲を適切に決めていくのではいかがでしょう。</p>
</div>

必要以上にスタイルシートでの指定を入れすぎると、テーブルでレイアウトした時のようにソースが混乱して見通しが悪くなるかもしれません。 なるべくまとめられるものはまとめてしまって、簡潔に記述していくのが良いと思います。

なお、スタイルシートでレイアウトを決める上では、やはりスタイルシートで指定できるプロパティを数多く知っておいたほうが有利です。 知っている手段が増えれば、それだけできることの幅も増えますし、工夫もしやすくなります。 ですので、スタイルシートを使うのであれば、スタイルシート全般を見渡しながら身に付けていくのが良いと思いますよ。
とりあえず、レイアウトを決める上では、position(top,left,right,bottom)、width、height、margin、padding、float、overflowあたりのプロパティを把握しておくのが良いと思います。 特に、ブラウザのウィンドウサイズに左右されないページを作るのであれば、widthやheightなどで表示範囲を指定してしまう必要があると思います。
あとは、工夫次第でしょう。

もしすべてスタイルシートでレイアウトをしているページを簡易に作りたいのであれば、ホームページビルダーのどこでも配置モードで作成するのもひとつの選択肢かと思います(どこでも配置モードは非常に評判の悪い編集モードですが…)。
それでページを作ってみて、ソースを参考にしてみるのも良いかもしれません。

参考まで。

お礼

いかに綺麗に素早くレイアウトできるか、って慣れみたいな部分もありそうですね。
lead1976さんの仰ることを参考に実践してみたいと思います。って言っても平日は無理なんで週末になっちゃいますが^_^;

＞もしすべてスタイルシートでレイアウトをしているページを簡易に作りたいのであれば、ホームページビルダーのどこでも配置モードで作成するのもひとつの選択肢かと思います(どこでも配置モードは非常に評判の悪い編集モードですが…)。

なるほど！　丁度手元にホームページビルダーもあることですし、もし行き詰ったらこれでソースを確かめてみたいと思います。

書き込み、ありがとうございました。

回答No.1

ikazuchi

テーブル+CSSで設定する

不可視タグ<!--*** -->を必要な部分に入れて
見やすくすればそんなに埋もれることは無いはずです。

お礼

うーん、できればテーブルは使いたくないんですよ。
そもそもスタイルシートを使おうと思ったのも、私の個人的に作ったJSPのソースを会社の人に見てもらったとき、
「テーブルはごちゃごちゃしてて見にくいから、スタイルシート使ったら？」と言われたからなんです^_^;

書き込み、ありがとうございました。