• ベストアンサー

<SPAN>で文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。 それで質問なんですけど、 HTMLで<SPAN>ってタグありますよね? それにCSSを使って(? <SPAN>で囲まれた場所を 文字を右揃えに表示させたいのですが、何故かうまくいきません。 <SPAN style="text-align: right">○○</SPAN> このようなタグで使いました(上) 何故なのでしょう、教えてください。 よろしくお願いします。 ちなみに、このようなものをつくりたいのです。(下) リンク集なんですけど; HPタイトル   管理者名 ――――――――――――――― バナー ――――――――――――――― このHPの説明 これの管理者名のところを右揃えに表示したいのだが、 うまくいかないのです;<DIV>だと改行されてしまうし...

  • HTML
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
noname#199778
noname#199778
回答No.3

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。 CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。 スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。 <div> <span style="float: right;">管理者名</span>HPタイトル <hr style="clear: right;"> <img src="*" alt="バナー"> <hr> <p>このHPの説明</p> </div> こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。 参考になれば幸いです。

tomo-aki
質問者

お礼

ご解答ありがとうございます。 こんなタグがあったんですねぇ...(←勉強不足 さっそく使わせていただこうと思います。

その他の回答 (2)

noname#14668
noname#14668
回答No.2

テーブルで幅(widthタグ)をきめて、<td align="right">タグではだめですか? <span>は<div>と違って文字位置を指定できなかったと思います。 <TABLE> <TR> <TD width="〇〇">HPタイトル</TD> <TD width="〇〇" align="right">管理者名</TD> </TR> </TABLE> 例ですが、こんな感じではいかがでしょう

tomo-aki
質問者

お礼

ご解答ありがとうございます。 例まで書いて下さってありがとうございました!

tomo-aki
質問者

補足

spanでは文字位置設定できないんですか; c⌒っ*゜ー゜)っφ メモメモ...

回答No.1

tableでそのセルだけ右揃えにすれば簡単ですが・・・。 tableは使いたくないとか理由があるのでしょうか?

tomo-aki
質問者

お礼

ご解答ありがとうございます! テーブルを使えば簡単なんですけどね~;

tomo-aki
質問者

補足

なんかテーブルだと中身が読み込まれるまで表示できないとかいう短所(? のようなものがあって、あまりオススメできないとの話を聞いたことがあるのでちょっとテーブルは使いたくないんです; テーブルは元は表だってのもありますし・・・;

関連するQ&A

  • htmlの記述。「右揃え」出来ません(困ってます)

    こんばんは。質問の通り、右揃えになりません。 タグ打ちで、制作中。初心者です。 =-=-=-=-=-=-=-=-=-=-=-=-=-= <html> <head> <title>~</title> <style type="text/css"> span.c { text-align: right; } </style> </head> <body><center> … <span class="c"><a href="toppage.html">■ to top-page ■</a></span> </center></body> </html> =-=-=-=-=-=-=-=-=-=-=-=-=-= ■ to toppage ■を右揃えにしたいです。 <span class=""></span>で部分を指定して、 <style type="text/css">span.c { text-align: right; }</style>で条件を指定したのですが、左揃え(条件指定が出来ていない状態)にしかなりません。 <center></center>がダメなのか?っと思い、<center></center>を除いてみましたが、ダメでした。 <span class=""></span>でうまく部分指定が出来ていないのかと思い、<style type="text/css">span.c { text-align: right; }</style>の{}内に、フォントサイズの指定をすると、サイズ変化しました。 私的には、{ text-align: right; }が違うのかな?っと思っているのですが、分かりません。 どこが間違っているのでしょうか?? というか、右揃えの仕方を教えて下さい。どんな方法でもいいです。

  • listアイコン画像だけが中央揃えにならない

    listタグでリスト化したリンクを、中央揃えするように指定したdivで囲んでいるのですが リストアイコンの画像だけが中央揃えになってくれません。(添付画像参照) HTMLとCSSは以下の通りです。 <div class="box"> <ul class="list01"> <li>テキスト</li> <li>テキスト</li> </ul> </div> .box { text-align:center; } ul.list01 { list-style-image: url(~); } リストアイコンの画像もテキストと一緒に中央揃えにしたいのですが、 何かやり方があるのでしょうか? どなたかよろしくお願いします。

  • span要素にのみwhite-space: nowrapを指定したい

    CSSによる改行指定が思う様にできなくて困っています。 幅400pxのボックスの中で、<span>~</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。 スタイルシートに div{width:400px;} span{white-space: nowrap;} HTMLに <div> <span>type1</span><span>type2</span><span>type3</span>... </div> のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。 どのように指定すれば目指している形にできるでしょうか?

    • ベストアンサー
    • HTML
  • 段落内の "text-align" の重複

    CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。

    • ベストアンサー
    • CSS
  • CSS:文字の上下の中央揃え

    h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか? 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "MS ゴシック"; background-color: #88ceff;}

    • ベストアンサー
    • HTML
  • テキストボックスの文字を右揃えにしましたらカーソルが

    こんぱんは。テキストボックスの文字を右揃えにしましたらカーソルが点滅しなくなりました。具体的には、 <input type='text' class='itiniti' maxlength='5' /> このようにしたものに、 .itiniti{width:50px; text-align:right; } で指定したのですが、右揃えにはなりましたが、そのテキストボックスをクリックしてもカーソルが出現しません。何か入力して、右端以外の文字をクリックしたらカーソルが出現しますが、→キーでカーソルを一番右側までもっていくとまた消えます。 text-alignがleftのときとcenterのときは正常に表示されています。 どなたか右揃えでカーソルがちゃんと表示されない理由がわかるかたいらっしゃいましたらアドバイスお願いいたします。 環境は、IE7です。

    • ベストアンサー
    • HTML
  • リンクを横に並べるには、どうすればいいですか?

    リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか?    リンク1(中央揃え)   リンク2(右揃え) なぜか、下記のようになってしまいます。 リンク1(中央揃えにしたいのに、左揃え状態)                                リンク2(右揃えになっているけど、改行されてしまう) margineかpaddingで設定するしかないでしょうか? 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分(外部スタイルシートに記述) ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="~○○">リンク1</a></div> <div id="right"><a href="~○○">リンク2</a></div> </div>

    • ベストアンサー
    • CSS
  • html言語で右揃えをするには

     私のブログでは、歌詞や法律の条文を引用する際、訪問者が見やすいよう、blockquoteで囲んでいます。  しかし、blockquote内であろうとなかろうと、引用した後にその出典や根拠の名前だけを右揃えにする方法が分かりません。<center></center>は検索すればすぐに見つかるのに右揃えは、私の力不足なのかalign="right"以外に見つかりません。  なお、段落分けに使われる<p></p>を使うのが嫌いな私は、段落分けをするのにいつも改行の<br />を用っています。  そして、もし、align="right"をうまく使えるのでしたらそれに越したことはないのですが。

  • テーブル内のスタイルシートについて。

    カテゴリHTMLでよいのか、ちょっとビクビクしているのですが。 テーブルのひとつのセル内で左揃えの文字列と右揃えの文字列を作りたいのです。 スタイルシートを使おうと思ったのですが、 それぞれの文字列に <SPAN STYLE="text-align:left;">むにゃむにゃ</SPAN> <SPAN STYLE="text-align:right;">うにょうにょ</SPAN> と指定をしても全く反映されません。 一つのセル内で左右に文字を振ることは不可能なのでしょうか?

    • ベストアンサー
    • HTML
  • 全体のレイアウト:中央揃えについて

    画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7  body { text-align: center }で、中央揃え  div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか? 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう