- ベストアンサー
枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue; border-style:solid; border-width:1px; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 >>spanを使うのは危険だ うーん、そうなのかなぁ？？？ じゃあ、テーブルを使うしかなさそうです・・・。 (^^ゞ
その他の回答 (6)
- orangepekoe119
- ベストアンサー率27% (3/11)
すみません line-height: 130%; でした…100pxって…
- orangepekoe119
- ベストアンサー率27% (3/11)
理由はよくわからないのですが line-height: 100px; を入れると線が出てきましたよ～
お礼
ありがとうございます 結局 単純に <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue;border-style:solid;border-width:1px; display:inline; } --> </style> </head> <body> <table><tr><td><div class="title"> 芹沢鴨 </div></td></tr></table> </body> </html> が無難かなと思います
- steelgreen
- ベストアンサー率50% (50/100)
スタイルシートの部分に display:inline; の一行を加えてみてください。 divに囲まれた要素がすべてインラインになるので 不都合であれば、borderで囲みたいテキストを <p>芹沢鴨</P> などとし、スタイルシートでそのタグにスタイルシートを指定してみたください。
補足
ありがとうございます <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue;border-style:solid;border-width:1px; display:inline; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html> とするとspanと同じで上下の枠が消えます どうもインライン化すると全くspanと同じになるようです
- moon_night
- ベストアンサー率32% (598/1831)
<table width="0"><tr><td> <div class="title"> 芹沢鴨 </div> </td></tr></table> CSSで指定している意味がなくなりますが。
補足
ありがとうございます <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue;border-style:solid;border-width:1px; } --> </style> </head> <body> <span class="title"> 芹沢鴨 </span> </body> </html> とすると幅の問題は解決されるのですが 上下の枠が消えます 不思議な事に際上段の <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を取り除くと上下枠が正常になります この現象はなんでしょうか? どうしたらいいでしょうか?
- orangepekoe119
- ベストアンサー率27% (3/11)
あまりスマートじゃない気がしますが <table>でどうですか？
補足
ありがとうございます テーブルをいれるとごちゃごちゃに成りそうで踏み込みにくいですね しかしほかにてが無ければ致し方ないですね？
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 例えば、DIV→SPANとか・・・。 (^^ゞ
補足
ありがとうございます 今回は大丈夫ですが前に質問したときに 枠の太さを大きくすると枠が書かれなくなるのでspanを使うのは危険だという事でした span型タグ以外を使用する方法は無いでしょうか?
お礼
spanで上下の枠が消える事例を上に示しましたので 良ければ改善策を教えてください