黒文字の文中に赤い下線をひきたい
- CSSのborder-bottomで赤い下線を引く方法が分からない
- Macのネスケを使っていると、下線と文章の間に余白ができてしまう
- 赤い下線が次の行にかぶらずに表示される方法を教えてほしい
- ベストアンサー
黒文字の文中に赤い下線をひきたい
下線設定といえば、<U>タグがありますが、文字の色と同じ線を引くため使えませんでした。 cssのborder-bottomで設定したところ、Macのネスケを使っているのですが文章と下線の間がかなり空いてしまって（余白ができて）、次の行に下線がかぶってしまいました； 具体的には下記のようなソースなのですが、どのようにすれば赤い下線が次の行にかぶらずに表示できるでしょうか ＜ソース＞ 【cssファイル】 TD{ font-size:12px; line-height:16px; } .line{ font-size:12px; border-bottom: 1px solid #FF0000; } 【htmlファイル】 <TABLE> <TR> <TD>応募は<SPAN class="line">2008年1月31日必着</SPAN>です。遅れないようにしてください。</TD> </TR> <TABLE> 一応お店のホームページとして使っているので、IE6・IE7とネスケ最新では見えるようにしたいです。
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
過去ログで似たようなものがあったので、役に立つかと思います。 http://oshiete1.goo.ne.jp/qa3547767.html
関連するQ&A
- 下線と文字の間を調整するにはどうしたら良いのでしょうか。
これまで、文章の一部に二重線の下線を引くときには、 <span style="border-bottom:double 3px"></span>といったやり方だったのですが、ＩＥ７などで見ると引いた下線と文字のあいだの隙間が広すぎるように思えてきました。この隙間を調整するにはどのようにしたら良いのでしょうか。 どなたか詳しい方ご教授くださいますようにお願いいたします。
- ベストアンサー
- HTML
- 実線と破線(点線)の下線を付けたい。
実線と破線(点線)の下線を付けたい。 同じ文字に実線と破線の下線を付けたいので <span style="border-bottom:dashed; border-bottom-width:1px;">あ<u>い</u>う</span> としたところ、IEでは見やすく表示されたのですが、FireFoxでは実線と破線がくっついてしまい、見やすくありません。 これを離して表示させるにはどうしたらいいのでしょうか。
- ベストアンサー
- HTML
- テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。
テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。 なぜでしょうか？ <style="text/csss"> <!-- hr.kasen { border-bottom-style: double; } --> </style> <table> <tr class="kasen"> <td>あ</td> </tr> </table>
- ベストアンサー
- HTML
- テーブルで中央に指定したい
1行1列の横100％ 縦100％に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか？ [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- あるソースをあるソースに埋め込みたい
http://www.1uphp.com/con2/menu/tab41.html このURLの一番下の「全ての書き方」を 下記のソースのメニューの右にあるテーブルに埋めたいと思っています。 しかし、上記URLのソースのスタイルシート部分を書きのソースへコピペした段階で 下記のソースのページが全て左寄せみたいになってしまいます。 どこをどう記述すれば埋め込めるでしょうか？ <html> <head> <style type="text/css"> <!-- A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } TABLE#mainTable { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid; BORDER-COLLAPSE: collapse } TD.borderAll,TD.borderNoTop,TD.borderNoBottom { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid } --> </style> </head> <body bottommargin="10" background="sozai/kabegami.gif" topmargin="10"> <table height="1817" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 1817px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"><strong><font color="#ff0000" size="5"></font></strong></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">お教室情報</font></td> </tr> <tr> <td><a class="menu" href="5_shop.html" >Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table> <p align="center"> <font ><font color="#808080" size="1" > <font ><font size="2"> <br></font></font> </p></font></font></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 1380px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> <p align="left"><font color="#808080"></font> </p></td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> </p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- HTML
- 文字の下線を画像に変えて表示する方法
http://okwave.jp/qa/q8252180.html 上記の箇所で質問させて頂いたのですが ちょっと上手くいきませんので 新しく質問させて頂きました すいません 文字の下線を画像に変えて表示する方法を教わりました。 以下のようにして、したのですが 肝心の画像が表示されないのです どのようにしたら宜しいでしょうか？ ――――――――――――――――――― Html <p class="msglink line-2">「原発がなくても、ホントに大丈夫なの～？」<br> そんな疑問に、楽しく答えてくれる動画です。</p> //////// Css p.msglink { margin: 7px 0 0px 0; color: #000; font-size: 9pt; font-weight: bold; line-height: 150%; padding: 10px; } p.line-2 { background: url("img/border1.jpg") no-repeat 0 100%; margin-bottom: 20px; padding-bottom: 40px; }
- ベストアンサー
- CSS
- HTMLとCSSを駆使して棒グラフを作る際にラベルを表示させたい
下記のHTMLで、ラベル（30～60の数値）を赤棒の上に表示する書き方をご教示下さい。 Excelグラフで、棒グラフに数値を表示させるようなイメージです。 なお、IE6だけで動作すれば十分です。 <html> <head> <style type="text/css"> .1 {vertical-align: bottom;} .2 {background-color: red;width: 20px; writing-mode:tb-rl;} </style> </head> <body> <table border="0"> <tr> <td class="1"><span class="2" style="height:30px;"></span><span class="3">30</span></td> <td class="1"><span class="2" style="height:40px;"></span><span class="3">40</span></td> <td class="1"><span class="2" style="height:50px;"></span><span class="3">50</span></td> <td class="1"><span class="2" style="height:60px;"></span><span class="3">60</span></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 文字をセル下部にぴったりくっつけたい
お世話になります。 テーブル(の<td></td>)内に入れた文字を、セルの下部ボーダーにぴったりくっつけるように配置したいと思っているのですが、IE6でうまく文字の表示ができません。 その文字には font.●● {font-size:35px; font-weight:bolder; font-family:Verdana; color:#332600; letter-spacing:-2px; } とCSS指定し、またテーブルタグの方には <table cellspacing="0" cellpadding="0"> と <td valign="bottom"> を指定しています。 これで、Firefoxだときちんと表示されるのですが IEだと文字が潰れる、というか上下が欠けたように表示されてしまいます。 ためしに行間指定 line-height:100%; をつけくわえてみたところ、IEでの文字はきちんと表示されるようになったのですが、 テーブル下部のボーダーから浮いてしまい思ったようなレイアウトになりません。 (Firefoxも同様に浮いてしまいます) 文字を欠けなく表示し、また下部ボーダーにぴったりくっつけるやり方がありましたら教えてください。 よろしくお願いいたします。
- 締切済み
- HTML
お礼
回答ありがとうございます！ 過去にあったのですね；申し訳ありません。 検索の技を磨くようにがんばります。 アドバイスいただいた質問で実現することができました。ありがとうございました。