[[PukiWiki/1.4/ちょっと便利に]]
RIGHT:&size(12){Category:[[Design>:Design]]};
* テーブルレイアウトいやーん [#vaf0eb51]
#ref(no_table.diff)
**テーブルレイアウトを排除したときの注意 -- [[reimy]] [#j81bcf7c]
~テーブルによるレイアウトを排除した場合、Opera 6/7では正常に表示できない場合があるので注意しましょう。
~具体的には、
<div>
<div style="float:right"><!-- (B) -->
ほげほげ
........
........
........
へげへげ
</div>
<div><!-- (A) -->
ほげらほげら
............
............
<div style="clear:both"></div><!-- (1) -->
へてらへてら
............
............
</div>
</div>
<div style="claer: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="claer:both"></div><!-- (2) -->
**別の方法 [質問箱/318]より移行 [#r436a69d]
PukiWiki のコマンドが並ぶ navigation 部をカスタマイズしたいと考えています。
コマンドを左寄せと右寄せの１行で表現したくて、HTML だと以下のようになります。
<table width="100%">
<tr>
<td align="left">左寄せ</td><td align="right">右寄せ</td>
</tr>
</table>
これを CSS で表現するにはどう書けばいいのでしょうか？
PukiWiki というよりも、CSS の質問で恐縮ですが返信頂けると助かります。
:回答|
-[[reimy]] &new{2003-11-13 (THU) 18:42:02};
~<table>タグのwidth属性、<td>タグのalign属性はXHTML 1.1でも使用可能なので、とくにCSSで指定しなくてもいいです。あえてCSSで指定するなら下記のようになります。
<table class="table_width">
<tr>
<td class="left">左寄せ</td><td class="right">右寄せ</td>
</tr>
</table>
-
.table_width{
width:100%;
}
.left{
text-align:left:
}
.right{
text-align:right;
}
-[[とんび]] &new{2003-11-13 (THU) 20:39:05};
~返信ありがとうございます。では TABLE 使わずに表現するにはどうすればいいでしょうか？
具体的には以下を CSS でコントロールしたいです。
<div id="navigator">
<div id="navi_left">
左寄り
</div>
<div id="navi_right">
右寄り
</div>
</div>
-[[reimy]] &new{2003-11-13 (THU) 22:19:55};
~下記のようにすれば可能です。
<div id="navigator">
<div id="navi_right">
右寄り
</div>
<div id="navi_left">
左寄り
</div>
</div>
<div class="dummy"></div> ←この行はたぶん無くても大丈夫
-
.navigator{
width:100%;
}
.navi_left{
text-align:left;
}
.navi_right{
float:right;
text-align:right; /* 右揃えにしたい場合 */
}
.dummy{
clear:both;
}
~なお、floatを使う場合の注意は、[[しろくろのへや:PukiWiki/覚え書き]]参照。
-[[とんび]] &new{2003-11-13 (THU) 23:40:03};
~やりたいことがバッチリできました。ありがとうございました。
**コメント [#v8e843a1]
-差分を当てると、注釈、添付ファイル一覧、アイコンメニュー、フッターなどがすべてメニューバーの右側に表示されてしまってます([[サンプル>しろくろのへや:PukiWiki]])。このページの下のように、これらはメニューバー・本文とは別に下に表示されるべき。 -- [[reimy]] &new{2003-12-24 (水) 13:38:50};
-差分はrelativeやabsoluteを使って強引に表示してますが、MenuBarや$bodyの大きさが不定であるPukiWikiの場合、この方法ではうまくいきません。上記に例示したように、floatとclearでやるほうが正しく表示できます。 -- [[reimy]] &new{2003-12-24 (水) 19:01:00};
-素人な質問で申し訳ないが、差分をどのようなコマンドで当てるのか教えていただけますか？よろしくお願いします。 -- [[zRyu]] &new{2004-06-26 (土) 18:07:07};
--patch を使います。see... [[pukiwiki:続・質問箱/23]] -- [[jjyun]] &new{2004-06-26 (土) 18:55:35};
--[[jjyun]]さん、アドバイスをありがとうございました。 -- [[zRyu]]&new{2004-06-27 (土) 03:15:07};
-1.4.5対応の差分はありませんか？ -- &new{2005-02-05 (土) 03:05:47};
-- ニーズのある人がやる世界です :) (呼びかけても反応が無い場合は特に) -- [[henoheno]] &new{2005-02-05 (土) 12:07:38};
-- ちなみに、tDiaryスキンはテーブルを使っていません。 -- [[henoheno]] &new{2005-02-05 (土) 12:08:52};
-テーブルレイアウトを排除するメリットというのは、どういったことがあるのでしょうか？ -- &new{2005-02-21 (月) 02:35:33};
--レイアウトをマークアップの段階で固定化する部分を減らせるため、スタイルシートの自由度が上がります。例えば、float:rightをfloat:leftと変更するだけで左右の配置を入れ替えることが出来ます。また、ページ全体を覆うようなテーブルレイアウトを排除することで、ページ全体を受信するのに時間が掛かるようなナローバンドの回線利用者が、ページ全体を受信し終わるまで待つことなく、読み込み途中の内容を順次確認できる可能性が有ります。 -- [[Mizar]] &new{2005-02-21 (月) 03:31:04};
---なるほど。テーブルを排除する意味はそういう意味があるのですね。ただ私の場合ナローバンドで利用していますが、<div>でスタイルシートで処理される方がテーブルで処理されるより重くなってしまうのはPCの能力とブラウザ環境ですね。ありがとうございました。 -- &new{2005-02-21 (月) 14:41:08};
---こちら「[[org:自作スキン/irid]]」でhenoheno さんも答えられていますが、「単独の no table スキンとしては余計なロジックが多すぎますから」で、私もテーブルレイアウトを排除するメリットはあまり無いと思いますがどうなのでしょうか？ -- &new{2005-02-22 (火) 02:07:19};
---共にno tableスキンであるiridとtDiaryを比較して、tDiaryの方が複雑なロジックだという話だと思うのですが、そこからなぜtableレイアウトの方が良いという結論になるのでしょうか？ -- [[Mizar]] &new{2005-02-22 (火) 09:33:58};
--- えーと余計なロジックが多い、というのはtDiaryスキンに関するコメントです。[[Mizar]]さんには伝わっているようなので、何か勘違いされているのではないかと思います。 -- [[henoheno]] &new{2005-02-22 (火) 23:01:29};
--Mizarさんがすでに指摘されていますが、さまざまなデザインを実現できるのが、no-tableのメリットです。つまり、文書構造（ロジック）とデザインの分離によって、同一のXHTML文書でありながら様々なデザインを実現できます。また、tableレイアウトを使い続けるメリットも、そんなに無いように思っています。tableレイアウトはケシカランなどとは思いませんが、いろんなデザインのPukiWikiを作り出せるという点では、no-tableの方がより容易ではないでしょうか。 -- [[ありぃ]] &new{2005-02-23 (水) 00:54:04};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
