- ベストアンサー
下線だけ線を引くにはどうすればいいでしょうか?
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- なぜこのコードは下に線が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
- 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を外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- 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
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSを使いたいのですが上手くいきません
テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- 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
- タイトルの作り方
CSSで作ったタイトル付に お知らせ＿＿＿＿＿＿＿＿＿＿＿＿ ｜ ｜ ｜ ｜ ｜ ｜ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ こんな感じにお知らせの周りを線で囲みたいのですが どのように設定したらいいんでしょうか？ CSSの中身は h5 { border-left:solid 6px #0080ff; border-bottom:solid 1px #0080ff; padding-top:2px; padding-left:4px; width:500px; } ---------------------------------------------------- HTMLの中身は <ul> <h5>お知らせ</h5> テストテスト<br> テスト<br> test<br> </ul> 以上であります どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
どうもありがとうございました。