div なしで可変幅の両側にドロップシャドウ

すべてのブラウザに適用するスタイル。html 要素に左側用の影画像 、body 要素に右側用の影画像 を指定してあります。

1. <style type="text/css">
2. html {
3. background: #eee url(shadowL.gif) 0 0 repeat-y;
4. margin: 0 5%; padding: 0;
5. }
6. body {
7. line-height: 1.5;
8. background: #fff url(shadowR.gif) 100% 0 repeat-y;
9. margin: 0 0 0 5px; padding: 0;
10. }
11. h1, p, ol {
12. margin: 0 .5em; padding: .5em;
13. }
14. ol {
15. margin-left: 3em;
16. }
17. </style>

以下が条件付コメントにより IE のみに適用されるスタイル。expression を使い div 要素をふたつ挿入して html, body 要素の指定内容をそれぞれシフトしています。

16. <!--[if IE]>
17. <style type="text/css">
18. html, body {
19. background: #eee none;
20. }
21. body {
22. behavior: expression( this.innerHTML = '<div class="outer"><div class="inner">' + this.innerHTML + '</div></div>', this.className += " expoff" );
23. }
24. body.expoff {
25. behavior: none;
26. }
27. .outer {
28. background: #fff url(shadowL.gif) 0 0 repeat-y;
29. margin: 0 5%;
30. }
31. .inner {
32. background: url(shadowR.gif) 100% 0 repeat-y;
33. margin: 0 0 0 5px;
34. }
35. </style>
36. <![endif]-->

作成日 2007-08-17

©2004-7 FC2