- ベストアンサー
スタイルシート(css)表記について
こんばんわ。 スタイルシートもしくは他の方法にて --- test --- | | | | | | ￣￣￣￣￣￣ のような枠を(ここでは点線になっていますが、実線で) 書こうとしたのですが、どうしても方法がわかりませんでした。 おわかりになられる方、ご教授のほどお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <title>Sample</title> <style type="text/css"> <!-- .sotowaku { position: absolute; z-index: 1; padding: 20px; top: 20px; left: 20px; width: 300px; height: 350px; border: solid 3px #0000ff; } .title { position: absolute; z-index: 2; top: 10px; left: 90px; width: 150px; height: 20px; background-color: #ffffff; } --> </style> </head> <body bgcolor="#ffffff"> <div class="sotowaku"> CSSだけで全てのユーザ環境で安定した表示にするには、ちょっと無理があるかもしれません。 <br> <br> このサンプルでは、青色の枠線を表示させた要素と、背景をページ背景と同じ白色にしたtitleの要素を絶対指定のpositionで重ねて表示させています。 <br> NN4.xでは未対応です。 <br> また、各ブラウザでの解釈が違うため、ユーザ環境の違いで表示位置にズレが生じてしまいます。 <br> <br> やはり画像を使った方が一番確実な気がします。 </div> <div class="title" align="center"> こんなのじゃ、ダメ？ </div> </body> </html>
その他の回答 (1)
- miyacchi518
- ベストアンサー率28% (346/1199)
testが枠の中に入ってしまいますが・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .frame { border: thin solid #000000; } --> </style> </head> <body> <table width="200" border="0" cellpadding="0" cellspacing="0" class="frame"> <tr> <td height="200" valign="top"><div align="center"> <p>TEST</p> </div></td> </tr> </table> </body> </html>
お礼
ご回答ありがとうございました。
お礼
相手方の環境によって表示が大きく変わるということで、 別の形を取ってみることにしました。 とても参考になるご意見どうもありがとうございました。