- 追加された行はこの色です。
- 削除された行はこの色です。
[[PukiWiki/1.4/ちょっと便利に]]
RIGHT:&size(12){Category:[[Design>:Design]]};
RIGHT:&size(12){Category:[[Design>:Design]], [[CSS]]};
* テーブルレイアウトいやーん [#vaf0eb51]
#ref(no_table.diff)
----
#contents
**テーブルレイアウトを排除したときの注意 -- [[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) -->
<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="claer:both"></div><!-- (2) -->
<div style="clear:both"></div><!-- (2) -->
**別の方法 [#r436a69d]
**別の方法 [質問箱/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};
~やりたいことがバッチリできました。ありがとうございました。
**IE6 と Mozilla系列 での挙動の違い [#m011eacd]
-2ch PukiWikiスレ part4 >>779-780 より転用 -- 2006-02-11
<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 の場合、
ウィンドウのサイズを狭めていくと回りこみが発生する。
詳しくは、１単語が画面20%におさまらなくなったら発生する。
IE の CSS では "word-wrap:break-word;"
と１単語が収まらなくなったら単語の途中でも改行させるプロパティがあるが、
サイドバーでは検索フォームを使用する場合も多く、
検索フォームはさすがに途中で改行させられないため簡単に画面20%を超えうる。
右本文にはまだまだ余裕があるのに、左側が20%しか使用できていないのだ。
やり玉にあげるようで申し訳ないが、例えば [[official:自作スキン/irid]] [[official:自作スキン/OrangeBox]] は現状この状況。Let's try [[irid - Wiki.Youjing.ws>http://wiki.youjing.ws/?irid]]。
変わりに
<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 氏の手によりこのようにデザインされていた。
この場合、右本文の１単語が画面中に収まらなくなったら回りこみが発生するが、
右本文は「ウィンドウの幅 - 100px」を一杯に使用でき、たった 20% ではないためさしたる問題にはならない。
***コメント [#v8e843a1]
サイズを % 指定したい場合はテーブルを使用せざるを得ないだろう。
**コメント [#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};
--patch を使います。see... [[official:続・質問箱/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};
---こちら「[[official:自作スキン/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};
- no-tableを実現できる技術者がいないだけなんじゃないの？ -- &new{2006-02-06 (月) 12:15:27};
-- 何をしたいのかわかりませんが、no-tableは実現されてますよ。 -- &new{2006-02-06 (月) 21:38:39};
- Tableの良い点として英単語中でも折り返しされる、って言う点があります。CSSでは幅を指定しても、幅以上の英単語が来ると幅が広がってしまいます。 overflow: で何とかするしかない。（と思っている）word-breakはIEだけだし、中途半端な動きをするし。でも私はCSSで動的に動かすのが好きなのでCSSで制御してますが・・。CSSでも英単語を折り返す設定ってないのかなぁ。 -- [[Yoshii]] &new{2006-02-06 (月) 23:49:02};
-- Table で英単語中でもおりかえされる？Firefox1.5 と IE6 で試してみましたが折り変えされませんでした。<table><tr><td>aaaa......以下空白なく同文</td></tr></table> のようなHTMLを作り試しました。なにか CSS による設定が必要ですか？でもそれなら div でもできるってことでしょうし。確認ですが IE でおっしゃるとおり word-break 等をしていたということではないですか？-- &new{2006-02-10 (金) 14:08:49};
-- がーん。そうでした。PukiWikiのデフォルトスキン+IEで確認していた時にそうだと思い込んでしまっていました。申し訳ございません。FirefoxでもOperaでも折りかえりませんね。｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡ -- [[Yoshii]] &new{2006-02-11 (土) 00:16:09};
- ずっと、テーブルを解除した[[自作のスキン>LogueWiki:PukiWiki/カスタマイズ/スキン]]使ってますけどIE7やFireFoxでデザインが崩れることは無いですね。情報を伝える優先順位を考えれば、本文の方さえ正常に表示できていればいいわけで、ある程度割り切った方がいいかと。 -- [[Logue]] &new{2007-01-16 (火) 23:01:02};
- こういった内容であれば、floatだけではなくposition:absoluteについての記述も必要ですね。ちょっと今は書いてられませんが。 -- [[0th track]] &new{2009-07-23 (木) 00:24:52};
-- このコメントの最初の方で、reimy さんがちょっとだけrelativeやabsoluteについて記述してはいますが・・・。最近のブラウザの挙動でも同じなのかは、わからないですね。 -- &new{2009-07-23 (木) 09:52:00};
-- ブラウザの挙動というか、大抵はやりようです。position指定だけでもfloat指定だけでもちゃんとブラウザごとの挙動を把握した上で作れば問題ないレイアウトができます。あとはデザインと相談するだけですね。 -- [[0th track]] &new{2009-07-23 (木) 10:37:43};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
