• ベストアンサー

文字列の後に中央線を引きたいのですが

文字列の後に中央線を引きたいのですが この添付した画像は文字列+ - 記号をいっぱい記述したものです <HR>タグやスタイルシートのborder-***-style:等で解決するのか と思っていたのですが甘かったです。 どなたか文字+中央線を記述出来る方教えてください。点線ではなく 一直線で なるべく画像を使わない方法でお願いします。 もし画像を使うとしたら用意する画像サイズとかも教えてください。 詳しくなくてすみません。

  • 39OK
  • お礼率9% (35/359)
  • HTML
  • 回答数3
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • otaku37564
  • ベストアンサー率38% (1160/3007)
回答No.2

画像を使っていいなら 高さ15PX 幅2PXの画像の中心に2PXの横線を描く。 GIFで1Kb以下 それをCSSのボックスやテーブルに入れて X軸に引き伸ばし

その他の回答 (2)

回答No.3

<style type="text/css"> div{ margin-top:0.5em; padding-bottom:0.5em; border-top:1px solid #000; } p{ margin:-0.5em 0 0; float:left; background:#fff; } </style> <div> <p>受付情報</p> </div> floatとネガティブマージンを組み合わせて親要素にかぶせてみました。

  • g_liar
  • ベストアンサー率52% (382/728)
回答No.1

とりあえずパッと思いついたのは<s>タグ(取り消し線)です。   あいうえお<s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</s><br> 空白(&nbsp;)をたくさん書かないといけませんし、画面の横幅に合わせて…もできなくてスマートじゃありませんが。

関連するQ&A

  • 文字列が中央ぞろえにならなかった

    自分のサイトの読み込み時間にローディングの画像を表記したのですが、Now Loadingの部分をpタグで囲ったらこの文字列が中央ぞろえにならなかったので、タグなしにしました。 タグなしの文字列は仕事ではNGと聞くのですが、その周りにdivがあれば問題ないのでしょうか? <!--Loading Image--> <div id="loading_img"> <img src="img/base/loading.gif" width="128" height="15" /> Now Loading </div> /*Loading Image*/ div#loading_img { position: fixed; top: 50%; right: 50%; bottom: 50%; left: 50%; z-index: 9999; width: 128px; margin: -7.5px 0px 0px -64px; text-align: center; color: #02CCFF; } /*Loading Image End*/ pタグで囲って中央ぞろえにする場合は、widthを使ってmargin:0 auto;でできるかと思ったのですが、これではだめなのでしょうか? またテキストはwidthをいくつにするとピッタリかわからないのですが、どうやっていくつがピッタリかわかるのでしょうか?

    • ベストアンサー
    • CSS
  • ある文字列を含む<img>の削除

    いつもアドバイスありがとうございます。 今回、FC2ブログからワードプレスへ引っ越しすることになったのですが、 FC2ブログで使用していた画像の削除に手間取っています。 そこで、お伺いしたいのですが、Dream WeaverCS3を使って、 『ある文字列が入っているタグを削除する』 といった置換方法はないでしょうか? FC2で言えば、 <img src="http://blog-imgs-1.fc2.com/emoji/2012-02-06/654131.gif" alt="" border="0" style="border:0;" class="emoji"> <img src="http://blog-imgs-1.fc2.com/emoji/2012-02-06/654120.gif" alt="" border="0" style="border:0;" class="emoji"> 上記2つの絵文字を削除するために、 「http://blog-imgs」という文字列が入った<img>タグを一括で削除 という流れになると思います。 どなたかご助言をいただけないでしょうか。記事数が800以上有り、絵文字は3000回以上使用していると 思います。手作業でやるには気の遠くなる作業です・・・。 よろしくお願い致します。 ※DWを使用しない方法でも構いません。

  • 文字列に波下線をつけたい

    こんにちわ。 文字列に波下線をつけたいのですが、スタイルシートでの設定になるのでしょうか? 波下線のタグとか方法が分かりません どなたかご存知の方はおりますか?

  • 文字がテーブルの中央に表示されない

    スタイルシートで th.test1 { text-align: center; width: 100px; } と宣言して、 <th class="test1">日付</th> とすれば、 中央に文字を表示しつつ、列の幅も指定通りになりますよね? そのはずなのですが、 列の幅は指定できたのですが 文字が中央に表示されません。 なぜでしょうか?

    • ベストアンサー
    • HTML
  • CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

    CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか? ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------

  • セル内の文字が中央に・・・

    タグでホームページを作っているのですが 表の中の文字が中央に表示されます <table border="1"> <tr><td rowspan="3">あ</td><td>あ</td></tr> <tr><td>あ</td></tr> <tr><td>あ</td></tr> </table> ↑このようなタグを使ってますが 左の「あ」が中央に行ってしまいます 普通通りに上から表示するタグありましたら教えてください?

  • WORDの罫線内の文字列を中央配置できない。

    お願いします。 WORD2007 XP です。 ◇困った現象 WORD2007で、表挿入で作成した罫線枠のセルに、文字列を入力すると、 1) 以前は、問題なく文字列を中央配置できました。 2) 今回、突如として、文字列が、見かけ上、左詰めになり、文字列の終末からセルの右端までが ブランクになりました。 3) この状態で中央詰めにしても、文字列は見かけ上、左詰めのままです。 4)セル幅を狭めて体裁を整えようとすると、文字列が2~3文字の幅で行替えしてしまい、 結果、セル幅の変更は不可能です。 5)編集記号などを全部表示しても、文字列の右側には行末編集記号の他は何も入力されておりません。いたずらに見かけ上の余白があるのみです。 6)最近、「WORの オプション」はいじっておりません。 ◇仕事の途中で変な現象が起こってしまい、困っております。 なお、新しいWORD FILE で罫線への書き込みを試みると、こちらは上手くゆくのですが、 ダメならダメで WORDは止めるのに、「相手を見て邪魔するのか!」と言いたくなります。 以上、よろしくお願いします。hanae 拝

  • テーブルタグで、文字を寄せたいです

    OSはビスタでフラウザはFirefox8です それで、自分のブログにテーブルタグで表の様な物を作り 解説を載せたいんですが、セルの中に解説文字等を入れ それを常に中央に持って行きたいんです 尚、最初に語らせて頂くと 下記に書いてる●はセルの角だと思って下さい 本当はセルのラインを-で表示しようと思ったんですが 作るのに時間が掛かる過ぎる為 角の部分に目印の●だけ付けました 従って●と●との間には見えない-が入ってると思って下さい それと、タグの中にサイズやカラーのタグが入ってます これは本来なら必要無いと思ったんですが もし、これらが何かのトラヴルの原因だった為と思い 一応入れました ちなみにブログはFC2ブログです ただ、その場合だけなら <table width="数字" border=1> <tr> <td Bgcolor="#FFcc33" align="center"> 文字 </td> </tr> </table> で反映してます ところが、解説をセル内に収めるのに 文字数の関係で2行に分かれる時が出て来ます その場合でも、バランス良くと考え 手動(?)で任意の場所に<br>を入れて改行しました すると当然ですが、この様に反映するんですが ●      ●  文字文字文字   文字文字 ●      ● バランスを考えると、この様に反映させたいんです ●      ●●      ●  文字文字文字  文字文字  文字文字    文字文字文字 ●      ●●      ●   それで、私の知識では テーブルの中にテーブルを入れる… つまり外側のテーブルに中央に寄せるタグを入れ 中のテーブルに左に寄せるタグを入れようと この様にタグを設定しました <table width="数字" border=1> <tr> <td Bgcolor="#FFcc33" align="center"> <table align="left" border=0> <td> 名前 <br> 名前 </td> </table> </td> </tr> </table> しかし、これで設定すると ブログ内の「本文の編集」では反映しても 公開で見ると反映しなかったり 「本文の編集」でも反映したり、しなかったりなんです この方法ではダメなんでしょうか? もしダメだとしたら、どう設定すれば良いでしょうか? ちなみに、ブラウザがFirefoxだから 反映が見えない訳では無いです 最後に、この様な設定の場合 よく使用される物として、スタイルシートも知ってますが もし可能だとしてもスタイルシートではなく タグで御願いします その理由なんですが、覚えるのが大変な事… 勿論、覚えるのを面倒がっててはダメなのは分かってるんですが 例え教えて貰って設定しても 滅多に使用しないスタイルシートだと、設定した事も忘れたり 再設定する可能性が考えられる為 そうすると、それが原因で何かのトラヴルが発生しても 以前に設定したスタイルシートの場所や 記号等も忘れる危険が高いからです

  • 文字を中央に寄せる

    <HTML> <HEAD> <TITLE>メンバー表</TITLE> <STYLE TYPE="text/css"> <!-- TR{text-align:center;} TH{text-align:center;} TD{text-align:center;} --> </STYLE> </HEAD> <BODY> <TABLE BORDER=1 ALIGN=CENTER> <TR><TH ROWSPAN=3>ここには画像</TH><TH>名前</TH><TH>称号</TH><TH>レベル</TH><TH>タイプ</TH><TH>AC</TH></TR> <TR><TD>竜千士 翔</TD><TD>見習い魔導士</TD><TD>45</TD><TD>con18,wis18</TD><TD>43</TD></TR> <TR><TD>コメント</TD><TD COLSPAN=4>v( ̄Д ̄)v イエーイ </TD></TR> </TABLE> </BODY> 上記のようにスタイルシートで文字を中央に寄せようとしたのですがどうしてもできません。 htmlタグでやるとできたのですが・・・ どこが間違っているのかどうかご教授お願いいたいします。 ちなみに使っているブラウザはIEでバージョンは6 です

    • ベストアンサー
    • HTML
  • HRタグを画像に

    スタイルシートを使って、HRタグを画像にしたいのですが・・・ hr {  border: none;  height: 14px;  background: url(image/line.jpg) no-repeat center center; } このようにしてみたのですが、IEだけは、どうしてもHRの周りに輪郭線が出てしまいます。 なにかいい方法ないでしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう