- ベストアンサー
ノートのように見える下線を文字の下に引きたい
いつもお世話になっております。 ノートに文字が書いてあるような感じに文字に下線が引けないものかと思い、相談に伺いました。 <p><span style="border-bottom:1px solid #ccc;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p> だと、下線は引けるのですが、行末の折り返しや文末の位置によって下線の左の位置がバラバラになってしまいます。 ノートのように、右と左がそろえることはできないでしょうか。いろいろと探したのですが見つからなかったので、ご存知の方がいらっしゃいましたらお願いします。
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- k0021
- ベストアンサー率26% (32/120)
- font_color
- ベストアンサー率45% (24/53)
- abril
- ベストアンサー率69% (388/560)
関連するQ&A
- 下線と文字の間を調整するにはどうしたら良いのでしょうか。
これまで、文章の一部に二重線の下線を引くときには、 <span style="border-bottom:double 3px"></span>といったやり方だったのですが、IE7などで見ると引いた下線と文字のあいだの隙間が広すぎるように思えてきました。この隙間を調整するにはどのようにしたら良いのでしょうか。 どなたか詳しい方ご教授くださいますようにお願いいたします。
- ベストアンサー
- HTML
- 黒文字の文中に赤い下線をひきたい
下線設定といえば、<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
- 実線と破線(点線)の下線を付けたい。
実線と破線(点線)の下線を付けたい。 同じ文字に実線と破線の下線を付けたいので <span style="border-bottom:dashed; border-bottom-width:1px;">あ<u>い</u>う</span> としたところ、IEでは見やすく表示されたのですが、FireFoxでは実線と破線がくっついてしまい、見やすくありません。 これを離して表示させるにはどうしたらいいのでしょうか。
- ベストアンサー
- HTML
- スタイルシートと画像リンクの下線
現在HPを作成しています。 スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。 A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。 何かよい方法がありますでしょうか? よろしくお願いします。
- ベストアンサー
- HTML
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- 文字の下線を画像に変えて表示する方法
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
- リンクの下線の色を変えると下線が下付きになってしまいます。
リンクの下線の色を変えると 下線が下付きになってしまうのですが 間隔を、色を変更する前と同じにするには どうしたらよいのでしょうか。 よろしくお願いいたします。 <body link="#ff99ff" vlink="#ff99ff" alink="#ff99ff"> <a href="" style="border-bottom: 1px #999999 solid;text-decoration:none;">説明(1)<br>説明(2)</a><br><br> <body link="#ff99ff" vlink="#ff99ff" alink="#ff99ff"> <a href="">説明(1)<br>説明(2)</a></div>
- ベストアンサー
- HTML
- 文字と枠線がくっつきすぎている
たとえば、 ←枠と文字の距離を離したいのですが、どうすればいいでしょうか。 普通のテーブルでは、cellpaddingで指定しますよね。下のような場合、どうすればいいでしょうか。 <BODY bgColor=#ffffff> <DIV class=block3 style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 10px solid; WIDTH: 400px; BORDER-BOTTOM: 0px solid; HEIGHT: 30px">←↑ くっついてるのを離したい<BR>くっついてるのを離したい</DIV> </BODY> </html> よろしくお願いします。
- ベストアンサー
- HTML
- Excelでセル内の文字列をhtmlと結合させたい
Excelで、A1のセル内の文字列を、下記のhtmlと結合させたいのですが、 =CONCATENATE関数を使って、下記のように文字を並べたいのです。、 <div style=""border-bottom: 3px solid #263f1f; font-size: 20px;"">", A1, "</div> CONCATENATE関数を使ってやってみたのですが、 =CONCATENATE("<div style=""border-bottom: 3px solid #263f1f; font-size: 20px;"">", A1, "</div>") 結果 <div style=""border-bottom: 3px solid #263f1f; font-size: 20px;"">", A1, "</div> になり、A1の文字列は返されませんでした。 どこが問題なのでしょうか? よろしくお願いいたします。
- ベストアンサー
- Windows 10
お礼
ありがとうございました。 お礼が遅くなり、申し訳ありません。 なるほど、背景画像を使うのですね……! とても勉強になりました。参考にさせていただきます。 ありがとうございました!