- ベストアンサー
h3タグのCSS装飾
おせわになります。 h3テキストの左横にアイコンを設置し、 下線としてドットラインをひこうと思います。 アイコンをh3背景画像で表示し、 ドットラインをh3タグの外にdivをおき表示させているのですが、 ドットラインを表示させる為のだけのdivタグなので、 あまり良い方法とは思わないのですが、 他に良い方法はありますでしょうか？ ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- h3 { font-size:14px; margin:0; padding:0; background: url(http://www.geocities.jp/ajax3210/arrow.gif) no-repeat 3px 2px; padding-left:25px; } .h3-dotline { padding-top:10px; padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x left bottom; --> </style> </head> <body> <div class="h3-dotline"> <h3>テキストテキスト</h3> </div> </body> </html>
- moon333
- お礼率87% (28/32)
- CSS
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
first-letter ではいかがでしょう。 ▼HTML <h3>テキストテキスト</h3> ▼CSS * { margin: 0; padding: 0; } h3 { background: url("…/dotline.gif") repeat-x left bottom; padding-bottom: 5px; zoom: 1; } h3:first-letter { display: block; background: url("…/arrow.gif") no-repeat left center; padding: 2px 0 2px 20px; vertical-align: baseline; }
その他の回答 (4)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
IE6がCSS2のなにに対応していないのかは知らないのでアレだけど、 とりあえずdisplay: list-item;は大丈夫そうなので、beforeの代わりに H3 { display: list-item; list-style-position: inside; list-style-marker: url("arrow.gif"); } H3.dotline { background: url("dotline.gif") repeat-x bottom; } でオッケー。
お礼
ご回答ありがとうございます。 なるほど、 h3に「display: list-item」は勉強になりました！ 「list-style-marker」というのは初耳で、 実際に検証してみたのですが、うまく表示されず、 list-style-image: url("arrow.gif"); で表示されました。 「list-style-marker」でググったのですが…よく分かりませんでした。 ▼CSS h3 { display: list-item; list-style-position: inside; list-style-image: url("http://www.geocities.jp/ajax3210/arrow.gif"); padding-left:20px; } h3.dotline { background: url("http://www.geocities.jp/ajax3210/dotline.gif") repeat-x bottom; } ▼HTML <body> <h3 class="dotline">テキストテキスト</h3> </body>
- Questa
- ベストアンサー率48% (13/27)
DIVの代わりにSPANを使ってみました。 HTMLソースは多少きれいになりますが、 これもバッドテクニックだと思います。 ご参考までに…… (HTML) <h3><span>テキストテキスト</span></h3> (CSS) h3 { position: relative; background:url("…/dotline.gif") repeat-x left bottom; padding-bottom: 24px; font-size:14px; } h3 span { display: block; width: 100%; height: 14px; position: absolute; top: 0; left: 0; background: url("…/arrow.gif") no-repeat 3px 2px; padding-left: 25px; }
お礼
ご回答、ありがとうございます。 やはりspan等の追加になるのですね。 他、やり方があればお願いいたします。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
h3:before { content: url("ajax3210/arrow.gif") } h3.dotline { border-bottom: dotted } とか。
お礼
ご回答、ありがとうございます。 たしか、「:bofore」はIE6には対応していませんよね？ 対応していれば解決なんですけどね。 borderのdottedは下でも書かせて頂いた通りで、 背景画像を使用した場合で解決したいと思っています。
- hisa-gi
- ベストアンサー率29% (93/311)
画像を使わず、h3自体に border-bottom:1px solid #006600; といった感じで指定すれば良いのではないでしょうか？ そうすれば、画像を変更せずに太さや色も自由に変えられますし。
お礼
ご回答、ありがとうございます。 border-bottomは考えていたのですが、 IE6とFFとの表示が異なる為、背景画像にしました。 また、ドットの間隔も広めに取りたいので、 背景画像で表示させたいという訳です。
関連するQ&A
- hタグ 印刷時の背景画像
おせわになります。 hタグで背景画像を使用しており、 プリント表示させると、その背景画像が消えてしまいます。（IE6、IE7） プリントアウト時も同じように印刷させたいのですが、 対策はありますでしょうか。 ※今の段階でどうしても不可能な場合は、 media="print"指定で、border-bottomで対応しようと考えております。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css"> <!-- h1 { padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x bottom; } --> </style> </head> <body> <h1>テスト見出し</h1> </body> </html>
- ベストアンサー
- CSS
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- css 初心者です。（壁紙について
外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか？お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ？画像欠けてない？</p> </body> </html> 以上をよろしくお願いします。
- ベストアンサー
- HTML
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
お礼
度々のご回答をありがとうございます。 :first-letter にはビックリしました。 私が望んでいたタグの簡潔化にも合致し、とても素晴らしいです。 Win IE6、IE7、FF2、Mac Safari2、FF2 の動作も問題ありませんでした。 大変勉強になりました。