ベストアンサー

枠の幅が次のようにすると

2004/11/30 13:14

画面いっぱいに広がってしまいますどうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css">  </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>

keyguy
お礼率68% (895/1314)

HTML
回答数7
ありがとう数2

みんなの回答 （7）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

taka451213
ベストアンサー率47% (436/922)

2004/11/30 14:02 回答No.2

こんにちは。 >>spanを使うのは危険だうーん、そうなのかなぁ？？？じゃあ、テーブルを使うしかなさそうです・・・。 (^^ゞ

質問者

お礼 2004/11/30 14:21

spanで上下の枠が消える事例を上に示しましたので良ければ改善策を教えてください

その他の回答 (6)

orangepekoe119
ベストアンサー率27% (3/11)

2004/11/30 14:41 回答No.7

すみません line-height: 130%; でした…100pxって…

orangepekoe119
ベストアンサー率27% (3/11)

2004/11/30 14:39 回答No.6

理由はよくわからないのですが line-height: 100px; を入れると線が出てきましたよ～

質問者

お礼 2004/11/30 14:41

ありがとうございます結局単純に <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css">  </style> </head> <body> <table><tr><td><div class="title"> 芹沢鴨 </div></td></tr></table> </body> </html> が無難かなと思います

steelgreen
ベストアンサー率50% (50/100)

2004/11/30 14:07 回答No.5

スタイルシートの部分に display:inline; の一行を加えてみてください。 divに囲まれた要素がすべてインラインになるので不都合であれば、borderで囲みたいテキストを <p>芹沢鴨</P> などとし、スタイルシートでそのタグにスタイルシートを指定してみたください。

質問者

補足 2004/11/30 14:18

ありがとうございます <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css">  </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html> とするとspanと同じで上下の枠が消えますどうもインライン化すると全くspanと同じになるようです

moon_night
ベストアンサー率32% (598/1831)

2004/11/30 14:04 回答No.4

<table width="0"><tr><td> <div class="title"> 芹沢鴨 </div> </td></tr></table> CSSで指定している意味がなくなりますが。

質問者

補足 2004/11/30 14:08

ありがとうございます <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css">  </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)

2004/11/30 14:03 回答No.3

あまりスマートじゃない気がしますが <table>でどうですか？

質問者

補足 2004/11/30 14:22

ありがとうございますテーブルをいれるとごちゃごちゃに成りそうで踏み込みにくいですねしかしほかにてが無ければ致し方ないですね？

taka451213
ベストアンサー率47% (436/922)

2004/11/30 13:32 回答No.1

こんにちは。例えば、DIV→SPANとか・・・。 (^^ゞ

質問者

補足 2004/11/30 13:41

ありがとうございます今回は大丈夫ですが前に質問したときに枠の太さを大きくすると枠が書かれなくなるのでspanを使うのは危険だという事でした span型タグ以外を使用する方法は無いでしょうか?

関連するQ&A

ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには何をどのように指定してやれば良いでしょうか。よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> 　<div class="blue"> 　　<div class="green">ここが180px</div> 　</div> </body> </html>
- 締切済み
- HTML
左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。テーブルのように表示内容によって変化する左右の要素の高さを揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css">  </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
シンプルなコードなのにテーブルにCSSが適用されない・・・
今回思い悩んで質問させて頂く事となりました。すごい単純に書いてるつもりなのですがテーブルに着色　（青）　（赤）　が適用されません。当方、本一冊の独学でやっているので大ポカと思うのでご指摘頂ければと思います。　以下コードです。 ------------------------------------------------ <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <table width="200" border="1"> <div id="blue"> <tr><td> </td></tr> </div> <div id="red"> <tr><td> </td></tr> </div> </table> </body> Dreamweaver上では着色されるのですが・・・どなたかご教授お願い致します。
- ベストアンサー
- HTML
タイトルに太枠を付けるために
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <style type="text/css">  </style> </HEAD> <BODY> <span class=title> 大石倉之助 </span> </BODY> </HTML> としたのですが「大石倉之助」に左右の太枠はつくのですが上下の太枠がつきませんどうしたら上下にも太枠がつくのでしょうか？
- ベストアンサー
- HTML
htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、セルとセルの間に空白ができてしまい思い通りのものができませんでした。このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css">  </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>
- 締切済み
- HTML
外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について下記ボックスを利用したいのですが外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。どなたか詳しい方にご教授願えないでしょうか、よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
cssによる画像リンク枠の色変更
CSSでリンクが貼られた画像の４隅のボーダーに色を付け、オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？一番簡単なＣＳＳを教えて下さい。ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css">  </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>
- 締切済み
- HTML
モバイルサイト構築 - CSS/Class/IDの使用について
初めて携帯サイトを作っています。モバイルサイトに詳しい方、教えてください。 CSSは外部ではなくHEADのスタイル部分に記述しています。IE等のPCブラウザでは普通に表示されるのですが、エミュレーターで表示してみるとスタイル（ID)がまったく適用されません。 Classで指定している部分はそのスタイルが適用されているのですが、ID＃で指定すると適用されません。書き方に問題があるのでしょうか・・・。まずはAUを対象に作っているのですが、何かAUどくとくの記述ルールがあるのでしょうか。教えてください。以下ソースです。（CSSだけ）↓↓↓↓ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">   <head><title>いまよむトップ</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis" />  <style type="text/css" media="メディアタイプ"> body {margin:0; padding:0;} .marquee { font-size:xx-small; /* 変更不可 */ color: #ffffff; background-color: #FF0066; } .top_logo {text-align: center;} .div_bace { font-size: x-small; /* 変更不可 */ background-color: #FFCCCC; } .div_bace#top {border: solid 1px #000000;} .title { font-size: medium; color: #ffffff; text-align :center; margin-top :0; } .title#001 {background-color: #ff0066;} .title#002 {background-color: #FF9900;} .title#003 {background-color: #33CCFF;} .title#004 {background-color: #000000;} .title#005 {background-color: #99CC00;} .title#006 {background-color: #FF9900;} .title#007 {background-color: #990099;} .title#008 {background-color: #FFFFB5;} .title#009 {background-color: #FF6699;} .title#010 {background-color: #000000;} .title#011 {background-color: #000000;} .div_bace#shinkan {border: 2px solid #ff0066; margin: 3px;} .div_bace#osusume {border: 2px solid #FF9900; margin: 3px;} .div_bace#tokushu {border: 2px solid #33CCFF; margin: 3px;} .div_bace#shoseki {border: 2px solid #000000; margin: 3px;} .div_bace#comic {border: 2px solid #99CC00; margin: 3px;} .div_bace#shashinshu {border: 2px solid #FF9900; margin: 3px;} .div_bace#boyslove {border: 2px solid #990099; margin: 3px;} .div_bace#magazine {background-color: #FFFFB5; margin: 3px;} .div_bace#ranking {border: 2px solid #FF6699; margin: 3px;} .div_bace#imayomu_room {border: 2px solid #000000; margin: 3px;} .div_bace#search {border: 2px solid #000000; margin: 3px;} .footer {border: 2px solid #000000; margin: 3px;} .bottom_base {font-size:xx-small; /* 変更不可 */} .hr_color { color:#808080; /* 変更不可 */ width:100%; /* 変更不可 */ size:1px; /* 変更不可 */ } .smallest {font-size: xx-small;} .smallest#orange {color: #ffcc00;} .smallest#red {color: #ff0000;} .smallest#pink {color: #FF00FF;} .smallest#gray {color: #C0C0C0;} .smallest#blue {color: #3300CC;} .border { width :100%; height :90px; margin :5px; border-top: 2px solid #ff0066; border-bottom: 2px solid #ff0066; text-align: center; } .largest {font-size: medium;} .largestt#orange2 {color: #ffcc00;} .largest#red2 {color: #ff0000;} .largest#pink2 {color: #FF00FF;} .largest#gray2 {color: #C0C0C0;} .largest#blue2 {color: #3300CC;} </style>  </head>
- ベストアンサー
- HTML
外部スタイルシートが読み込めない
こんにちは。外部スタイルシートが読み込めず困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。もちろん同じディレクトリであり何度も確認しています。ブラウザは、IE7です。ヘッダー部分にスタイルシートを書くと当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。何が悪いのか、全くわかりません。何か分かる人がいましたら、よろしくお願いします。
- ベストアンサー
- HTML

枠の幅が次のようにすると