• ベストアンサー

表の中の割合のバーを背景で付けるには

表を作っていまして、その表には８０％や３５％のような割合の数字が入っています。 ８０％のセル（表の中の１つ）には左からバーが８５％くらいまでくるような処理を行いたいと思っています。もちろんバーの上には「８０％」の文字がcenterで乗るように。 イメージ的にはOffice 2007のエクセルでも同じような機能があったと思います。 backgroundでイメージは指定することができるのですが、この画像のサイズを変更してあげればいいのかなと考えていますが、サイズ指定の方法がわかりません。 知っている方、ご教授ください。

  • HTML
  • 回答数5
  • ありがとう数1
回答 全件
ベストアンサー
こんにちは ％表示するとウィンドウに対しての％表示になるので計算…
<style type="text/css"><!-- .bar {…
こんにちは こんなやつですか？ <style type="…

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.5

こんにちは ％表示するとウィンドウに対しての％表示になるので計算値が必要になってきますが・・・ <style type="text/css"><!-- table { width:500px; } .bar { background-color:red; position:absolute; } .text { width:500px; text-align:center; position:absolute; } --></style> <table border="1"> <tr> <td><div class="bar" style="width:400px;">&nbsp;</div><div class="text">80%</div>&nbsp;</td> </tr><tr> <td><div class="bar" style="width:175px;">&nbsp;</div><div class="text">35%</div>&nbsp;</td> </tr><tr> <td><div class="bar" style="width:5px;">&nbsp;</div><div class="text">1%</div>&nbsp;</td> </tr> </table> &nbsp:は全角スペースという意味なのですがこれで高さ確保や<td>がセルであると認識させてるので必須になります

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

回答No.4

<style type="text/css"><!-- .bar { background-color:red; text-align:center; } p{ line-height: 20pt; } --></style> <title>Untitled</title> </head> <body> <table width="500" border="1"> <tr> <td><div class="bar" style="width:80%;"></div> <DIV STYLE="position: absolute; left: 250; top: 20; z-index: 1; text-align:center;"> 80%</div></td> </tr><tr> <td><div class="bar" style="width:35%;"></div> <DIV STYLE="position: absolute; left: 250; top: 40; z-index: 1; text-align:center;">35%</div></td> </tr> </table> 下の方のソースに少し追加しただけですが如何でしょうか。 <DIV STYLE="position: absolute; left: AAA; top: BB; z-index: 1; text-align:center;"> left: AAA; のAAA部分にテーブル全体の半分の数字を（500なら250、300なら150という風に）を指定。 top: BB; のBB部分はページ全体の上からどれくらいの位置、という指定なので、都度必要に応じて訂正をお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

こんにちは こんなやつですか？ <style type="text/css"><!-- .bar { background-color:red; text-align:center; } --></style> <table width="500" border="1"> <tr> <td><div class="bar" style="width:80%;">80%</div></td> </tr><tr> <td><div class="bar" style="width:35%;">35%</div></td> </tr> </table> backgruond-colorにしてますがbackground-image:url(***.gif);でもできます

goroneko-begin
質問者

お礼

イメージした物は微妙におしいです。 文字の位置は”表の幅を基準に”センタリングで、バーはそのままのイメージです。 なぜならば1%とかなると文字が見えなくなるからです。 ご存知であれば。 コメントありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

補足です。m(_ _)m > サイズ指定の方法がわかりません。 <img src="bar.gif" width="224" height="10"> widthとheightを書いてください。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

280円のお菓子、20%引で何円ですか？（280円の80%は何円ですか？）

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 表の中に表を表示する時・・・

    表のセルを２つにして、左のセルに表をひとつ、右のセルに表をふたつ置きました。各表の大きさは同じなのですが、その時、左のセルにおいた表の位置が右のセルの真ん中あたりにきてしまいます・・・なにか指定すればいいのでしょうか？分りにくい質問ですいません。宜しくお願いします。

    • ベストアンサー
    • HTML
  • エクセルの数式バーに表示される文字が変

    エクセルで文字や数字を入力した時にセル内では異常はないのですが、 数式バーに表示される文字のサイズが通常表示サイズの半分位と小さくなり、また、数式バー内で文字の削除や訂正を行なうと、 削除しなかった文字まで削除されてしまうといった現象が起こります。 文字を入力したセル内を１～２度ダブルクリックすると、 数式バーの表示が正しく反映されます。 使用しているWindows2000やOffice97を再インストールしましたが 駄目でした。処置の仕方をご存知の方がいらっしゃいましたら、お教えください。よろしくお願い致します。

  • ワードかエクセルで表の大きさをcmでしていしたい。

    ワードでもエクセルでもいいのですが、1×2の表をつくりたいのですが、高さ4ｃｍ、幅20ｃｍで左のセルが幅9ｃｍで右のセルが11ｃｍのものをつくりたいです。 表の大きさをcmで指定する方法はありますか？

  • 表の中でもっとも多く使用されている文字（数字）を抽出するには

    　|Ａ|Ｂ|Ｃ|Ｄ| -------------- １|あ|い|う|え| -------------- ２|お|あ|あ|か| -------------- 上記は１行目に左から「あ」「い」「う」「え」が入力されていることを表しています。 この表の中から、一番多く入力されている文字だけを別のセルに抽出させるにはどのようにしたら良いでしょうか。 上記の例を使用すると、A列の５行目（任意のセル）に「あ」と抽出するようにしたいです。 いろいろと調べてみましたが、このように表の中で最も多く入力されている、「文字」または「数字」だけを抽出するという処理方法がみつかりませんでした。 マクロなら可能でしょうか？ このような処理ができる関数もなさそうなので、無理なのかな。 アドバイスを御願い致します。

  • エクセルで作成表の置換モード

    ウィンドウズXPのオフィス2003エクセルで作成した表をウィンドウズ7に取り込みフィス2010に置換したところ置換はできたのですが、その表のタイトルの表(前画面）がフリーズします。フリーズしたままで削除できません。ポインターは動くし、他の機能は正常に動きます。フリーズしないように置換モードを使用できますでしょうか。現在は強制シャットダウンで解決しています。 また、エクセルで作った表で上部のバーにあるすべての機能(ファイル、コピー、太字など）がたびたび反応しなくなりますがどうしたのでしょう。表の中身の数字の変更などは機能しています。

  • PDFの表をエクセルに貼り付けるには？

    よろしくお願いします。 PDFファイルの中に表があり、その表をエクセルで分析したいのですが、自分でエクセルに打ち込まなければならないでしょうか？ 下記のようなイメージです。 =============================================== Aさん　 平均 国語　100 　60 算数　 100　　　70 理科　　50 50 Bさん（以下同様） ============================================ というような感じでPDFに表があります。 エクセルのシートに移して分析、表を作りたいのですが、 ”切り取り”をすると、PDFの画像がエクセルに張り付いてしまい 数字だけを抜き出してエクセルのセルの中に数字をコピーする、 ということができません。。。 ひとつひとつ打ち込むしかないのでしょうか？ いいやり方をご存知のかた教えてください。 よろしくお願いいたします。

  • エクセルで数字が文字化け

    エクセル初心者です。 表にバーコードの数字（１３桁）を入力したところ、文字化けしてしまいます。 セルをアクティブにすると数式バーには表示されますが、セル内は化けたままです。 どうやったら入力したままの数字を表示させることが出来るのでしょうか。 オフィス２０００、WIN　Meです。

  • エクセルで表作り

    エクセルで表を作りたいのですが 書き込むのは、日付や、いろんな値です。 まず、日付についてですが 表の中の日付を入力するセルに 「　年　月　日」と入れておいたのですが 実際にそこへ入力するとセルの上からだと前に入力したものは削除されてしまうし、 数式バーに入力しても数字だけ入力すると 「　１９年　１２月　２６日」となりスペースの部分を消しながら入力しなければ 「１９年１２月２６日」とはならずカナリ面倒です。 どのようにしたら毎回楽に日付を入力きるのでしょうか？ 値は色々な単位があり 円とか冊とか本とか毎回必ずあるので やはり表中に最初から入力したのですが 日付と同じくセルに直接入力すると前に書き込まれていたものは消えてしまいますし 数式バーに入力すれば消えずに入力できますが そのたびに数式バーをクリックしなければならず とても面倒です。 列により入力する単位は同じなのですが 数字を入力するだけで 自然に冊とかの単位が出てくる方法などありませんか？ 文章力が無いので分かりづらいかと思いますが よろしくお願いいたします。

  • 図形の表に=$N$18:$V$21の設定をするには

    　エクセルの表があります。 表の一番左角のセル番地は、N18で、一番右端は、V21です。 　＝で指定した場合 「=$N$18:$V$21」となります。 そのエクセル表の中に、もう一つまったく同じ書式の、図形で作成されたと思われる表があります。その図形の方の、をクリックすると数式バーに=$N$18:$V$21と出ます。そこで、最初に紹介した、セル番地の、N18とV21である、表の文字列を変更すると、不思議なことに、図形の表の文字が、同じように変わります。 　どうやったら、図形に表を作成して、まして、セル範囲までも、指定できるのでしょうか！？ 　宜しくお願いします。

  • ワードの表の中にマス目を入れたい

    こんにちは　いつもお世話になっています。 ワード・エクセル（ともに2010、2007）を使っています。 エクセルでA列に文字データB列は空白の2列10行の表があります。罫線を外枠、内側縦横にひいてあります。 この表をワードにはりつけ、行の高さを30ミリにしてあります。右側の空白セルにマス目（10列、3行）を一括して入れる方法を教えてください。１つのセルにカーソルを置いて「セルの分割」でマス目になりますが右列を一括選択して一度にセルの分割をしたいのです。 セルの中に表をいれるとマス目にならないのです。 添付した画像のようなイメージです。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する