人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ネガティブマージンを使った段組で、可変幅ブロック内で100%のtableやpreを使う場合のHTML構造とスタイル指定を教えてください。

ネガティブマージン
http://adp.daa.jp/archives/000399.html

●質問者: akiyan
●カテゴリ:コンピュータ 芸術・文化・歴史
✍キーワード:HTML スタイル ネガティブ ブロック マージン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● jouno
●40ポイント

http://www.keynavi.net/ja/bugh/css_misc.html#ireko

HTML,CSSバグ&回避法リスト : 4. スタイルシートその他の話題

ネガティブマージンの場合、widthの値は見かけよりもmargin分だけ広い、つまり100%になっています。


子要素のwidthの%指定の場合、親要素のwidthが基準になります。


そのため、包含されるテーブルをなかに収まるように100%指定しようとすると、そのままでは、画面の100%になってしまいます。


解決策としては、ダミーの要素で囲みます。こうすると、この要素は、自動でネガティブマージンの結果のwidthになるので、これに包含されることで、100%で指定できるようになるわけです。


しかし、IEは親がwidth指定のない要素の場合、さらに親にさかのぼって参照して%指定を解釈してしまうので、ダミー要素をおいても失敗します。そこで、IE対策として、さらにもう一段階、包含します。そして内側のダミー要素にだけ、width:100%を指定します。


その他にブラウザ振り分けでIEにだけwidth:100%指定を与える方法もあります。


preについても本質的には同様だと思いますが、提示されているページの言及だけではちょっとよくわかりませんでした。preにもwidth属性がcssではなくhtmlでありますが、これは文字数の指定で、cssでの代替は存在しないようです。


#test2{width:100%;}

table{width:100%;}


<div id=”test”>

<div id=”test2”>

<table>

<tr>

<th>テーブルのサンプル</th><td>うまくいく?</td>

</tr>

<tr>

<th>どうせこんなもん</th><td>ああ</td>

</tr>

</table>


<pre id=”pre”>

対応UAは、IE6, Mozilla, Opera, Safari, MacIE5あたり。Macromedia Contribute 3で更新することを想定してコメントを各所に入れているが、テキストエディタで編集してもいい。

</pre>

</div>

</div>

◎質問者からの返答

詳しい解説をありがとうございました。

おかげ様で100%にすることができました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ