- ベストアンサー
CSSでボックス幅を文字列に合わせたい
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
div等のblock要素ではなくspan等のinline要素によって行う。 <span style="border:solid 1px">文字幅に合わせた枠線</span>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
blogのテンプレートみたいなものでなければ、文字数をwidth指定する。 8文字だったら width:8em; とか。 テーブルのように内容物に合わせるには、 ボックスの配置をstatic以外のfloatやabsoluteにすると中身に沿うようにはなりますが、扱いが難しくなったりしますので#1さんのようにインライン要素に対してボーダーを描くのも手だと思います。 ＞widthプロパティで文字列より小さいサイズに指定する 中身に従ってボックスが拡がるのはIEのバグなので、これを利用するのはよろしくないと思います。 他のブラウザでは指定幅から中身がはみ出し、枠線や隣のブロックに重なって表示されたりします。
お礼
SPAN要素に指定したらできました。ありがとうございました。 ＞バグなんですか。。。知りませんでした。
関連するQ&A
- width指定したTDでwhite-space:nowrapが効かない
width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6～8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
- ウィンドウの大きさに左右されない、CSSを使ったセル幅の設定は？？
HPのトップ画面を作る際に、テーブルを入れ子にして使っています。 ---------------------------------- teble1 [ セル１ ] [*****] [*****] [*****] ---------------------------------- table2 [ セル２ ] [######] [######] [######] [######] [######] ----------------------------------/table2 ----------------------------------/table1 まず、テーブル１のセル１の幅をｃｓｓで設定しました。 しかし、テーブル２内のセル２の幅を設定するとセル1の幅が乱れ、 ウィンドウを横に広げるとセル１も延々横に伸びてしまいます。 セル1をメニューボタンとして使うために画像と組み合わせていますので、 幅を固定にしたいのです。 全体の幅は<width="100%">設定しています。 セル幅が狂わないようにするため、 それぞれの列の右端に幅を設定していないセルをおいています。 （苦肉の策だったのですが、テーブル１だけのときはそれでうまく見えていました。） 設定したセル幅のトータルはテーブル２のほうがはるかに大きいのですが、 右端にあまっているセルで調節はきかないのでしょうか？ わかりにくい説明で申し訳ございません。 どうかご教授ください。よろしくお願いします。
- ベストアンサー
- HTML
- TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- CSS:ボックス内でaタグのリンク文字列を折り返したい。
お世話になっております。 grandswellと申します。 div指定したボックス内に <a>でボックスの横幅を超える 長いリンク文字列を設定すると IE： <a>リンク文字列がボックス内に収まるよう ボックスが横に拡張される。 Firefox： <a>リンク文字列はボックスからはみ出る。 といったように両者挙動が違います。 これによりIE側の画面全体レイアウトが 崩れてしまい困っています。 下記設定ができる方法をご教示ください。 ------ IE、Firefoxとも <a>のリンク文字列をボックス内で折り返す。 もしくは IEで <a>リンク文字列はボックスからはみ出る。 ------
- 締切済み
- CSS
- セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
お世話になっております。 環境： Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。 STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。 ■ソース■ <html> <head> <STYLE TYPE="text/css"> <!-- SELECT { width: 100px; } --> </STYLE> <title>サンプル</title> </head> <body> <select name="" selected> <option name="0">選択肢１</option> <option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option> <option name="0">選択肢３</option> <option name="0">選択肢４</option> </select> </body>
- ベストアンサー
- HTML
- テーブルの幅を固定するとnowrapがきかなくなるのですが・・・
いつもお世話になっております。どなたか教えて下さい。 テーブルの幅を”width=***”で固定しました（tableタグもｔｄタグも両方）。文字列を改行したくないので”nowrap”を書いて改行不可にしたら、改行は回避できたものの、幅が固定されずに文字の長さに合わせられてしまいました。 そこでこのサイト内で方法を模索していると”style=table-layout:fixed”で固定できると書いていたので追加すると幅の固定は出来たのですが、今度は文字列が改行されてしまいました。 どうすれば幅を固定し、改行も回避できるのでしょうか？ 文字列が長すぎるものは途切れていてもＯＫなので、枠をとにかく固定したいのです。 どなたか回答御願い致します。 ブラウザはIE５か６です。
- 締切済み
- HTML
- テーブルの幅
tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE６でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。
- 締切済み
- HTML
- 【HTML＆CSS】テーブルの正しい作り方
はじめまして。 Webページで、テーブルを作成する際の正しい手順について迷ってしまっているので、ご助力いただければ幸いです。 現在、XHTML1.0TとCSSでページを作成しています。 テーブルの作成は以前からしていましたが、CSSが絡むようになってから、どの方法がベストなのかがわかりません。 作成はDreamweaverとテキストエディタでの手書きと両方行っています。 疑問を抱いているのは、以下の点です。 ☆ HTMLの<table>に対するborder属性、width属性、cellspacing属性、cellpadding属性は使用するべきなのか？ 今現在は、<table><tr><th><td>のみで骨格を作成し、属性指定は行っておりません。するとすればthのscope属性くらいです。 ボーダーの指定には、table th tdそれぞれにCSSで上下左右のボーダー指定を行い、border-collapseプロパティで、セル間の隙間をなくしています。横幅もCSSのwidthプロパティを使用しています。 セル内の余白については、thやtdに対してpaddingプロパティで指定をしております。 この方法で特に問題なくできてはいるのですが、実際にwidth border cellpadding cellspacingの属性がいまだに非推奨になっていないようですし、ちょっと不安です。 みなさんはどのように作成しているのでしょうか？ Dreamweaverの参考書などでは、tableに対して上と左のボーダー、tdに対して、右と下のボーダーを指定して、border-collapseで隙間をつぶす方法が紹介されていたりもしました。 ただ、自分は、tdの上下左右のボーダーを指定してborder-collapseで隙間をなくしていますが、結果は同じ表記になります。 tableに上と左のボーダー、tdに右と下のボーダーと指定すること自体にはどのような意味があるのでしょうか？ 混乱しているため、少々文章がおかしくなっているかもしれません。 意味が分かりづらい部分がありましたら、補足させていただいたいと思っています。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで文字が縮まらない方法
CSSの初心者です。 不明点があるので教えてください。 １．テーブルに文字を入力してあります。 ウィンドウサイズの大きさを小さくするとそのテーブルの 文字も縮まります。 私は日本人です。 ↓↓↓ 私 は 日 本 人 で す。 みたいになります。 ウィンドウサイズを小さくしても縦表示にならない方法は ありますでしょうか？ ２．↑と類似質問になりますが、tdで幅指定（px）はできますよね？ 自分がもっているCSS辞典には td {width: 200px;} がなく、 table {width: 200px;} しか掲載されていません。 やはりpx指定してもウィンドウサイズが小さくなるとその大きさを 維持できなくなるのでしょうか？ HTMLのようになかなか思うような表示にならず細かいところで 苦労しています。
- ベストアンサー
- その他（プログラミング・開発）
お礼
ありがとうございます。div要素に指定してたのでできなかったんですね。