- 締切済み
divの幅が 中身英字だと 固定されない なぜ？
例えば、 <div style="width:200px; background-color:yellow;"> ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt </div> とした場合、字列が折り返されず、幅がどんどん伸びてくんですが、 <div style="width:200px; background-color:yellow;"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> とした場合は、字が折り返されて、幅が固定されます。 ひらがなと英字を混ぜて、 <div style="width:200px; background-color:yellow;"> ああtttttttttttttttttttttああああああああああああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああ </div> としても、英字が長く続いている分だけ幅が伸びていくようでした。 英字があっても、幅が固定されて、折り返されるようにしたいのですが、 どなたか良い方法があれば教えてください。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- suiris
- ベストアンサー率68% (17/25)
- abril
- ベストアンサー率69% (388/560)
- intercity
- ベストアンサー率54% (146/266)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
関連するQ&A
- ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 締切済み
- HTML
- cssでの幅の分割（固定・可変混合）がうまくできません
画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした． <div style="width:200px; height:600px; background-color:#ccf; float:right"> メニュー </div> <div style="width:auto; height:600px; background-color:#fcc;"> <div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div> <div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div> </div> ２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？ ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．
- ベストアンサー
- HTML
- 英字フォント時、<div>でwidthを指定しても、幅が固定されない
こんにちは。 DIVで、widthを指定し、幅を固定したいのですが、 どうしても文字列の幅まで、広がってしまいます。 これが、日本語フォントのときは、 固定されます。 やりたいことは、 DIVの幅を小さくし、一文字ずつ自動改行 させることにより、縦書きを実現したいのです。 （等幅フォントを使います）。 CSS部分～ .haccordion .header{ width: 20px; /*タブの幅*/ font-size:120%; font-family:monospace } HTML部分～ <div class="haccordion"> <div class="header">こんにちは。</div> これで、こんにちは。は、縦書きになります。 これを、HELLOとすると、横書きになってしまいます。 もう少しなのに、 困っています。 何か分かる人がいましたら、 よろしくお願いします。 ちなみに、ブラウザは、IE(7)です。
- ベストアンサー
- HTML
- position:relativeについて教えてください
初めて質問します。 ２つの横にならんだセルをDIVによって表示しようと思い <DIV style="width:112px;height:20px;background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="width:112px;height:20px;background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。 <DIV style="width:112px;height:20px;"> <DIV style="background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> 同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、 <DIV style="width:112px;height:20px;position:relative;"> <DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV> この記述だと、セルが下にくっついてしまい、うまく表示できません。 positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが… 解決方法がわかる方いらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML
- 固定幅＋可変幅レイアウトがなぜこれで実装可能？
cssで、固定幅＋可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、 なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、 望みどおりに実現できてしまっているのでしょうか？ 結果オーライではありますが、理屈が知りたい＆後学のために、 理由をお教えいただければ幸いです。 (下記では見やすいようにタブを全角空白４文字に変換しています。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>2カラムレイアウト(左固定幅、右リキッド)</title> <meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)"> <meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 100%; height: 150px; background-color: #808080; } #container { width: 100%; } #left { width: 200px; background-color:#A9A9A9; float: left; } #right { width: 100%; background-color:#DCDCDC; } #footer { clear: both; width: 100%; height: 150px; background-color: #808080; } </style> </head> <body> <div id="header"> <p>ヘッダー</p> </div> <div id="container"> <div id="left"> <p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> </div> <div id="right"> <p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> </div> <div id="footer"> <p>フッター</p> </div> <p><a href="#" onClick="history.back(); return false;">戻る</a></p> </body> </html>
- ベストアンサー
- CSS
- 固定幅div内のテーブルセルの幅指定方法
幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML：標準モード UA：Windows xp IE6 サンプルコード： <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>
- ベストアンサー
- HTML
- 枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <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>
- ベストアンサー
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- <div>タグでサイドバーを作るときの幅の指定方法
全体を囲むdivの中にサイドバーとメインコンテンツ用のdivを入れたいと思っています。 <div id="allContents" style="width:100%;"> <div id="sideBar" style="float:left; width:200px;"></div> <div id="main" style="float:right;"></div> </div> で、このときに、右側に表示される#main部分の幅を「残り全部」にしたいのですが、 widthに何を指定したら良いのでしょうか？ サイドバー部分が200px固定で、残りのメイン部分の幅はブラウザの右端までにしたいのです・・。 （Javascriptで#main部分の長さを取ろうと思っているので、中に何も入っていなくても divの大きさが一杯までなるようにしたいのです・・） ご教授よろしくお願いします。
- ベストアンサー
- HTML
- div の配置指定ができないです
.menu { background-color: mistyrose; background-position: 0px 500px; width: 230px; font-size: 14px; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <div class="menu"> ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p> </div> このスタイルシートなのですが、色・幅・文字サイズはちゃんと 表示されますが、どういうわけか位置が変化しません。 0px 0px としても左上にはくっつかず、center になります。 どこか間違っていますでしょうか？よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
