現在、tableタグで作ったサイトをstylesheetに置き換え中です。
<span style="width:100%; background-color:9FFFAF;">
TEST
</span>
こんな感じで、左から右まで画面いっぱいに横に帯のように表示したいのですが、IEと、その他(FireFox, Opera, Mozilla)で表示が違います。
IEでは左から右まで画面いっぱいに背景色が有効になります。
その他のブラウザでは、文字が表示されている部分だけ背景色が有効になります。
FireFoxなどでもIEと同じように画面左から右端まで帯のように背景色を変えたいのですが、どのようにすればよいでしょうか?
No.1ベストアンサー
- 回答日時:
それは,width プロパティの使い方が間違っているためです。
IE が誤った結果で,Firefox・Opera の結果が正解です。解決策は,span 要素でなく div 要素を使用することです。
<div style="width: 100%; background-color: #9FFFAF;">
TEST
</div>
色番号の前には「#」をつけます。
多くのブラウザの既定の状態で,span 要素には,width プロパティは適用されません。ですから,正しい解釈をする,Firefox と Opera では,幅がいっぱいならないのです。
スタイルシートに関する参考サイトを,参考 URL に掲げますので,こちらをご覧になるのもよいでしょう。
参考URL:http://www.tg.rim.or.jp/~hexane/ach/
インライン要素とブロック要素の違いですね。
ありがとうございます。
色番号の#については、PerlでHTMLを生成しているので、なんとなく....
" や ' で括ってる場所なら#が入っててもコメントアウトにならないのは分かってます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1から100までの自然数のうち、2...
-
超音波で洗脳。
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
aの中にspan
-
リンク付き画像を右よりに表示...
-
aタグ 中央寄せ
-
cssで好きな位置に好きなボック...
-
<div>でレイアウトすると上下に...
-
html5で右揃え、方法は?
-
初歩的な質問です。<div>のwidt...
-
あるタグが反応しません...
-
HTMLで <p>~</p>内で2回以...
-
border: noneでボタンの境界線...
-
<object>
-
<br />と<br>は同じ意味ですか?
-
Bootstrap レスポンシブ textarea
-
imgタグをそのまま使うことは正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報