PukiWiki/1.4/ちょっと便利に

Category:Design, CSS

テーブルレイアウトいやーん


テーブルレイアウトを排除したときの注意 -- reimy

テーブルによるレイアウトを排除した場合、Opera 6/7では正常に表示できない場合があるので注意しましょう。

具体的には、

<div>
  <div style="float:right"><!-- (B) -->
     ほげほげ
     ........
     ........
     ........
     へげへげ
  </div>
  <div><!-- (A) -->
     ほげらほげら
     ............
     ............
     <div style="clear:both"></div><!-- (1) -->
     へてらへてら
     ............
     ............
  </div>
</div>
<div style="clear:both"></div><!-- (2) -->

とあった場合、(1)にclearがあっても親ブロック(A)の外側にあるBブロックのfloatが解除されてはいけないのですが、Opera 6/7は解除してしまいます。

|ほげらほげら|ほげほげ|
|............|........|
|............|........|
|へてらへてら|........|
|............|へげへげ|
|............|

となるべきものが、Opera 6/7では

|ほげらほげら|ほげほげ|
|............|........|
|............|........|
|            |........|
|            |へげへげ|
|へてらへてら|
|............|
|............|

になってしまいます。

Internet Explorer 5/6、Netscape 6/7、Mozillaでは親ブロック(A)の外側にあるBブロックのfloatが解除されることはないので、正常に表示されます。

これで問題になるのは、本文とメニューバーをfloatで左右に並べているとき(テーブルレイアウトを排除した場合は、通常はこうなっているはず)、本文中でclearが現われた場合です。

clearが親ブロックの外側のfloatまで解除してしまうOperaのバグです。

対策は左右を逆にする。floatを指定していない側のブロックにclearがなければ、Operaでも正常に表示できますので、左右のブロックを逆にすればよい。

PukiWikiの場合、一般にメニューバーのブロックには原則としてclearがないので、本文のブロックを先に記述してfloatするとよい。つまり、メニューバーを左に置いた場合には上記の問題は発生しない。この場合、メニューバーよりも先に本文を記述することになるから、テキストブラウザや音声ブラウザのアクセシビリティも向上する。

<div>
  <div style="float:right"><!-- (A) -->
     ほげらほげら
     ............
     ............
     <div style="clear:both"></div><!-- (1) -->
     へてらへてら
     ............
     ............
  </div>
  <div><!-- (B) -->
     ほげほげ
     ........
     ........
     ........
     へげへげ
  </div>
</div>
<div style="clear:both"></div><!-- (2) -->

別の方法 [質問箱/318]より移行

PukiWiki のコマンドが並ぶ navigation 部をカスタマイズしたいと考えています。 コマンドを左寄せと右寄せの1行で表現したくて、HTML だと以下のようになります。

<table width="100%">
  <tr>
    <td align="left">左寄せ</td><td align="right">右寄せ</td>
  </tr>
</table>

これを CSS で表現するにはどう書けばいいのでしょうか? PukiWiki というよりも、CSS の質問で恐縮ですが返信頂けると助かります。

回答

IE6 と Mozilla系列 での挙動の違い

<div style="width:20%; float:left;">
サイドバー hogehoge hogehoge hogehoge hogehoge hogehoge
</div>
<div style="width:79%; float:right;">
本文 hogehoge hogehoge hogehoge hogehoge hogehoge
</div>
<div style="clear: both;" /> 

のような % 指定では Mozilla でみた場合は問題ないが、IE の場合、 ウィンドウのサイズを狭めていくと回りこみが発生する。 詳しくは、1単語が画面20%におさまらなくなったら発生する。 IE の CSS では "word-wrap:break-word;" と1単語が収まらなくなったら単語の途中でも改行させるプロパティがあるが、 サイドバーでは検索フォームを使用する場合も多く、 検索フォームはさすがに途中で改行させられないため簡単に画面20%を超えうる。 右本文にはまだまだ余裕があるのに、左側が20%しか使用できていないのだ。 やり玉にあげるようで申し訳ないが、例えば official:自作スキン/irid official:自作スキン/OrangeBox は現状この状況。Let's try irid - Wiki.Youjing.ws

変わりに

<div style="width:100px; float:left;">
サイドバー hogehoge hogehoge hogehoge hogehoge hogehoge
</div>
<div style="margin-left:100px">
本文 hogehoge hogehoge hogehoge hogehoge hogehoge
</div>
<div style="clear: both;" /> 

とするのが王道だろう。昔の pukiwiki.org は reimy 氏の手によりこのようにデザインされていた。 この場合、右本文の1単語が画面中に収まらなくなったら回りこみが発生するが、 右本文は「ウィンドウの幅 - 100px」を一杯に使用でき、たった 20% ではないためさしたる問題にはならない。

サイズを % 指定したい場合はテーブルを使用せざるを得ないだろう。

コメント



添付ファイル: fileno_table.diff 2001件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-07-23 (木) 10:38:26
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.280 sec.

OSDN