レイアのサイズ( 1 )
最終更新日：

前へ 目次 次へ

　DHTML の基本はやはり、レイアを使いこなすことでしょう。
今回から数回連続で、レイアのサイズに関する話題を採り挙げたいと思います。

　まず、最初はタイトなレイア作成に関する食えない事情です。 f(^^;

　サイズの分かっているイメージぴったりのレイアは

<style type="text/css"><!--
#sample{ position:absolute; width:128; height:128; ... }
--></style>
<div id="sample"><img src="cat.gif" ... ></div>

という具合に書きます。例えば、これが文字だったらどうしましょう？
これは Cross Browser DHTML では、結構難しい問題を含んでいます。

<style type="text/css"><!--
#sample{ position:absolute; }
--></style>
<div id="sample">吾輩は猫である</div>

このように記述すると、ブラウザが適当にレイアのサイズを決めてくれます。
が、そのルールは NN4 と IE4 では違います。

◆NN4 の場合
吾輩は猫である


◆IE4 の場合
吾輩は猫である
ウィンドウの右端 →|

　つまり、NN4 では含まれる文字列のサイズのレイアが作成されるのに対して、 IE4 では width を指定しないとページの右端まで伸びたレイアになります。

*1
え？ブラウザでは表示に差がないって？ (@@;;
ああ、すみません。実際に確認するにはレイアに背景色をつけて下さい 
layer-background-color:orange; background-color:orange;
なんてね。 f(^^;

*2
IE5 では、このケースでは NN4と同じになります。 但し、レイアに含まれる文字列が長い場合、レイアの位置に関係なくウィンドウの幅まで、 伸長されます（IE5 の登場でさらに食えなくなった）。 f(^^;

　しょうがないので width を指定したくなりますが一体何ピクセルの幅があればいいでしょうか？ 文字サイズは基本的にブラウザ依存です。 解像度の高い CRTを使用している人がいたり、大きな文字を好む人がいたりします。

　「文字サイズ（ポイント数）を指定すれば良いじゃないか」という人もいると思いますが、 例え指定したとしても全てのプラットフォームで同じサイズになるとは限りません。 True Typeのフォント環境の場合もそうでない場合もあります。 それに、何といっても、ブラウザの設定を尊重したい気持ちもあります。 f(^^;

　そこで考えつくのが、指定したサイズより大きな要素が含まれる場合は、 クリップしない限り、レイアが自動調整されることを利用して

<style type="text/css"><!--
#sample{ position:absolute; width:1; }
--></style>
<div id="sample">吾輩は猫である</div>

と指定する方法です。 これは、レイアに含まれる文字列が「JavaScript」のようなアルファベット１単語の場合は 十分用を足しますが、上の例では

吾
輩
は
猫
で
あ
る

となります。 日本語の場合は英語のように単語の切れ目がないため １文字単位でラップされるためのようです（類推です）。

　しょうがない、<nobr> タグを使うか... (T_T)

<style type="text/css"><!--
#sample{ position:absolute; width:1; }
--></style>
<div id="sample"><nobr>吾輩は猫である</nobr></div>

これなら、一応うまく表示されます。いや〜、めでたい。めでたい。 (^o^)/

　でも、そう甘くないのが現実というものです。 上の記述の「吾輩」に違う色をつけてみましょう。

<style type="text/css"><!--
#sample{ position:absolute; width:1; }
--></style>
<div id="sample"
><nobr><font color="red">吾輩</font>は猫である</nobr></div>
◆NN4 の場合
吾輩
は猫である
◆IE4 の場合
吾輩は猫である

　あちら立てれば、こちら立たずですか。こうなれば、 <nobr> タグは忘れて、最終手段 <TABLE> タグの登場です。

<style type="text/css"><!--
#sample{ position:absolute; width:1; }
--></style>
<div id="sample"><table border=0 cellspacing=0 cellpadding=0
><tr><td nowrap><font color="red">吾輩</font>は猫である</td></tr
></table></div>

ふ〜っ。ようやく何とかサイズぴったりのレイアができました。

　単に文字列のサイズぴったりのレイアを作りたいだけのために、これほど苦労するとは。
...怒りさえ感じますね。

続きはとりあえず頭を冷やしてからってことで... f(^^;;;

前へ 目次 次へ

Copyright(c) 1999 ShinSoftAll rights reserved.