![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
私はCGIゲームを作成しているのですが、
HTMLのページにゲージを表示させる方法が
全くわかりません。
よく、ゲームであるようなHPゲージのような感じです。
静止画ページなので、
imgのwidthをスクリプト内で計算して、
<img ~現HP~><img ~最HP~>という感じで正直微妙な感じです
javascriptでもいいのでHTMLに表示させる方法はありませんでしょうか?
spanタグを使用して<img ~最HP~>代わりにして
<img ~現HP~>のwidthを%化して
代わりにやってみたのですが、
テキストがないとspanの背景画像は表示されないようなので、
わかりません。
No.1ベストアンサー
- 回答日時:
spanはインライン要素なのでwidthが効きません。
divにしてみてはどうですか?
例)
<div style="width:200px;background-color:#cccccc">
<div style="width:30%;height:12px;background-color:#c00"></div></div>
No.2
- 回答日時:
#1です。
補足で。IEだと文字の高さは確保されてしまうようなので、
細いゲージにしたければ、font-size:1px;とか入れておかないと高さが一定以下にできません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
画像の一部を選択した時のみマ...
-
画像のサイズが変わらない
-
HTMLのIMAGEに。。
-
ワードプレス max-width100%が...
-
画像リンクの周りに線が出ます
-
imgタグについて
-
CSS実装されない
-
auの携帯サイトで画像と画像の...
-
WordPressで画像に枠が入ってし...
-
Javascriptで画像の大きさを%指...
-
写真とキャプションを横並びに...
-
HTMLに横型ゲージを表示させたい
-
HTMLタグのDL DT DDを使ってli...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
ワードにコピペ、画像が表示さ...
-
<ul>~</ul>が二つ続くと間に改...
-
css初心者 フレックスボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
inputタグでサーバにデータを送...
-
htmlで画像を2個ずつ並べていき...
-
HTMLのIMAGEに。。
-
機種依存文字、m2(平方メート...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
UDP通信を使うチャットプログラ...
-
table で画像をピッタリとくっ...
-
水面の波紋
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
ポップアップウィンドウのサイ...
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
imgタグは何で囲むのが良いか
-
画像をクリックして元に戻すには
-
リンク画像のラインを消したい
-
画像をクリックして同じページ...
おすすめ情報