html styleタグ内で線のスタイルが適用されない問題
- html styleタグ内で線のスタイルが適用されない問題について
- hmtlのstyleタグ内で線を太くし、赤くすることができない状況の原因を説明
- スタイルが適用されず線が消える問題の解決方法について
- ベストアンサー
<hr>
<html> <head> <title>test</title> </head> <body> <hr> </body> </html> これだと、問題なく線が引けるのですが、 .<html> <head> <title>test</title> <style type="text/css"> hr{border: 2px red;} </style> </head> <body> <hr> </body> </html> こうすると、線が消えてしまいます。 hr{border: 2px red;}がうまくいってないのですが、どこがおかしいですか？ 線を太くして、赤くしたいです。
- wrurdmnwoop
- お礼率73% (50/68)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<abbr title="Horizontal Rule">hr</abbr>は、水平罫線といういみですが、 hr{border: 2px red}ですと、2pxの赤い線を引くということになってしまいます。 線の形状が、指定されていません！ hr{border:solid 1px #00ffff;} あるいは、hr{border:double 2px red;} などと、指定されては、いかがでしょうか？・・・
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
形状の指定を入れてみれば。 hr{border: solid 2px red;}
関連するQ&A
- 下線だけ線を引くにはどうすればいいでしょうか?
<html> <head> <title>test</title> <style type="text/css"> h2{ padding: 8px; border-left: 10px solid red; } </style> </head> <body> <h2>test</h2> </body> </html> このような状態から 下線だけ線を引くにはどうすればいいでしょうか? background-color: blue; だと全体が青くなってしまいました。
- ベストアンサー
- HTML
- なぜこのコードは下に線が2本引かれるのでしょうか
<html> <head> <title>test</title> <style type="text/css"> h1{ border-bottom: 1px solid #ccc; } </style> </head> <body> <h1>test<h1> </body> </html> なぜこのコードは下に線が2本引かれるのでしょうか? 文字の下に1本だけ線を引きたい場合 どうすれば良いでしょうか?
- ベストアンサー
- HTML
- body要素
body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか？ ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
- divで囲った外側に色を付けるには？
<html> <head> <title>test</title> <style type="text/css"> #main{ width: 200px; background-color: red; } </style> </head> <body> <div id="main"> test </div> </body> </html> 今のコードだとdivで囲った内側に色がついてしまいます。 divで囲った内側には色を付けずに 外側につけるにはどうすればいいでしょうか？
- ベストアンサー
- HTML
- スタイルシートでのセンタリングについて。
スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース ------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>
- ベストアンサー
- HTML
- IE以外は色が付かない なぜ？
<html> <head> <title>test</title> <style type="text/css"> } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test <div> </body> </html> このコードを実行するとＩＥだと、色が赤くなるのですが スレイプニルやグーグルのブラウザだと何も色が付きません。 なぜでしょうか？
- ベストアンサー
- HTML
- HTMLの基礎的なことについてなのですが・・・
HTML初心者です。 ２点質問いたします。 【１】 境界線（枠）を描きたく、次のようなHTMLを書きました。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html> <html> <head> <meta charaset="UTF-8"> <title>文書構造化ステップ</title> <style type="text/css"> body*{ border-style:solid; border-width:1px; } </style> </head> <body> <h1>h1タグの行 テスト</h1> <p>ｐタグの行 テスト</p> <p>３行目 テスト</p> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊：＊ headの中に、 <style type="text/css"> body*{ border-style:solid; border-width:1px; } </style> を記述したらよいと、とある本に書いてあったにで上記のようにしたのですが、 境界線が現れません。 どこが間違っているでしょうか？ 【２】 上記のHTMLはサクラエディタを使って書きました。 境界線は現れませんが、文字は正しくブラウザーに出力されます。 ブラウザーはfirefox12.0です。 しかし、IE9とCrome19.0を使うと文字バケしてしまいます。 なぜ、firefoxでは文字バケしないのに、他の２つのブラウザーでは文字バケしてしまうのでしょうか？ 以上になります。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <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を使って文字を装飾しても改行させたくない場合
cssを使って文字を装飾しても改行させたくない場合、どのような方法がありますか？ <html> <head> <title>test</title> <style type="text/css"> p.red { color: red; } </style> </head> <body> 黒<p class="red">赤</p>黒 </body> </html> これだと 黒 赤 黒 になってしまいますが 黒赤黒 にしたい場合 どうすればよいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
お礼
回答ありがとうございました。