- ベストアンサー
なぜこのコードは下に線が2本引かれるのでしょうか
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
testの後ろのh1タグに「/」が無いのが原因です。 <h1>test<h1> ↓ <h1>test</h1> 後ろのh1に「/」が無いので、もう一つ空文字のh1に対しても下に線が引かれることになり、 下線が二本引かれているように見えています。 ・修正例 <html> <head> <title>test</title> <style type="text/css"> h1{ border-bottom: 1px solid #ccc; } </style> </head> <body> <h1>test</h1> </body> </html>
その他の回答 (1)
- notnot
- ベストアンサー率47% (4846/10257)
＞ <h1>test<h1> と、h1タグが2つあるからでしょう。 <h1>test</h1> の書き間違いだと思います。
お礼
回答ありがとうございました。
関連する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
- <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;}がうまくいってないのですが、どこがおかしいですか？ 線を太くして、赤くしたいです。
- ベストアンサー
- CSS
- ボタンのコード ｃｓｓ記述バグ？
以下のボタンのコードに関してですが、ブラウザー上でマウスのポインターをボタンの上におくと、上のボタンと下のボタンとの距離が狭くなりボタンとボタンがくっついてしまいます。 本当は、マウスのポインターをボタンの上におくとボタンの距離を一定に保ちボーダーの幅だけかえたいのですが、どうすればよいでしょうか？ 多分、以下のコードにバグがあると思うのですが、分かりません。 どなたか、お分かりの方がおられましたら、教えて下さい。 よろしくお願いします。 キャサリン 以下コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- .test a { display:block; text-decoration:none; background-color:#00FF00; color:#000000; font-size:12px; margin-top:0px; margin-bottom:20px; padding-top:10px; padding-bottom:10px; padding-left:5px; border-top:solid 2px #000000; border-bottom:solid 5px #000000; border-left:solid 2px #000000; border-right:solid 5px #000000; width:600px; } .test a:hover { border-top:solid 5px #000000; border-bottom:solid 2px #000000; border-left:solid 5px #000000; border-right:solid 2px #000000; } --> </style> </head> <body> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </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サービス）
- cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- ベストアンサー
- CSS
- htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </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
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- 枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <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
お礼
回答ありがとうございました。