二段組にする(マージンで調整) |
Internet Explorer | Netscape Navigator | Firefox | iCab | Safari | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.0x | 4.x | 6.0 | 7.0 | 8.0 | 1.x | 2.x | 1.x | 2.x | |
Windows | × | ○ | - | ○ | ○ | ○ | × | × | × | × | ○ | ○ | ○ | - | - | ||
Macintosh | × | ○ | ○ | ○ | - | - | × | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
UNIX | - | - | - | - | - | - | × | × | × | × | ○ | ○ | ○ | - | - | ||
Dreamcast | - | - | - | - | - | - | - | - | - | - | - | - |
ポイント | margin:0px 0px 0px 50%; |
---|---|
説 明 | 二段組にするにはfloatプロパティを使います。左側に表示する段にはfloat:leftを指定します。右側のボックスはmarginの左側を50%のように指定することで2段組にできます。 |
サンプル | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>二段組にする(マージンで調整)</title> <style type="text/css"><!-- .container { width:100%; border:1px gray dashed; background-color:#eef; padding:0px; margin:0px; } .left { float:left; width:49%; height:80%; background-color:yellow; border:1px red solid; margin:0px 0px 0px 0px; } .right { width:49%; height:120%; background-color:yellow; border:1px red solid; margin:0px 0px 0px 50%; } --></style> </head> <body> <div class="container"> <h1>二段組みにします。<h1> <div class="left"> ここの文章はdivタグとスタイルシートを使って二段組になるように設定しています。こっちは左側。 </div> <div class="right"> ここの文章はdivタグとスタイルシートを使って二段組になるように設定しています。こっちは右側。 </div> </div> </body> </html> |
補足説明 | Opera 7でも正しく動作します。 |
■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |