- ベストアンサー
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; }が違うのかな？っと思っているのですが、分かりません。 どこが間違っているのでしょうか？？ というか、右揃えの仕方を教えて下さい。どんな方法でもいいです。
- ブログ
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<div align="right">■ to toppage ■</div> でどうですか？
その他の回答 (5)
- Muller3
- ベストアンサー率81% (800/979)
みなさまの補足のようなものです。 なぜspanは使えないかというと、インライン要素だからです。 語弊を恐れず言うと、インライン要素spanにtext-alignを使うことは、地球上の右端に行きたい、と言っているようなもの…改行の機能がないのです。要は「右端」がない。 対してブロック要素は、参考URLにある通り、「ブロック（通常改行を伴う表示上のまとまり）」…行（一行）が基準（範囲）になります。アジアの右端に行きたい、と言ってるようなものです。これなら地球をひっくり返しでもしない限り、大体どこに行けばいいかわかります。 なので、この場合はブロック要素（pまたはdiv）を使う、ということになります。 …意味不明だったらすみません（苦笑）
お礼
インライン要素はフォントの種類とか大きさとかを指定して、ブロック要素はそのブロックの位置とかを指定するということですよネ。で、インライン要素にはspan、ブロック要素にはdivを使うということですよネ。 分かりました！！divは今まで（まだ、htmlを勉強し始めてから、５日足らずですが…）知りませんでした^^; 地球の説明分かりやすかったです。ご回答ありがとうございましたm(__)m
- crepon133
- ベストアンサー率51% (399/776)
難しいことは分かりませんが、 text-align はブロックの中の要素を どのように揃えるかを決めるものなのでspan には適用されません。 div や p などのブロック要素を使ってください。
お礼
ブロック要素。初めて聞きました。 でも、何となく理解できました。 ご回答ありがとうございました<(__)>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
span は文字の並びなので右寄せとかが意味がありません。 <div class="c"></div> で全体を囲ってやって div.c { text-align: right; } にすればどうですか
お礼
divなんですネ。ＯＫです！！ ご回答ありがとうございましたm(__)m
- 345itati
- ベストアンサー率48% (795/1639)
スタイルシートの部分を <style type="text/css"> <!-- .text_right { text-align : right;} --> </style> (.text_rightの部分はお好きな言葉で で、 <p class="text_right"><a href="toppage.html">■ to top-page ■</a></p> で如何でしょうか。
お礼
早速のご回答ありがとうございましたm(__)m
spanではなく、divでどうでしょうか？
お礼
divで出来ました！！ divを知りませんでした^^; ありがとうございました<(__)>
関連するQ&A
- <SPAN>で文字を右揃えにしたいのですが...(＾-＾；
こんばんは。私は今HPを作っています。 それで質問なんですけど、 HTMLで<SPAN>ってタグありますよね？ それにCSSを使って(? <SPAN>で囲まれた場所を 文字を右揃えに表示させたいのですが、何故かうまくいきません。 <SPAN style="text-align: right">○○</SPAN> このようなタグで使いました(上) 何故なのでしょう、教えてください。 よろしくお願いします。 ちなみに、このようなものをつくりたいのです。(下) リンク集なんですけど； HPタイトル 管理者名 ――――――――――――――― バナー ――――――――――――――― このHPの説明 これの管理者名のところを右揃えに表示したいのだが、 うまくいかないのです；<DIV>だと改行されてしまうし...
- ベストアンサー
- HTML
- テーブル内のスタイルシートについて。
カテゴリHTMLでよいのか、ちょっとビクビクしているのですが。 テーブルのひとつのセル内で左揃えの文字列と右揃えの文字列を作りたいのです。 スタイルシートを使おうと思ったのですが、 それぞれの文字列に <SPAN STYLE="text-align:left;">むにゃむにゃ</SPAN> <SPAN STYLE="text-align:right;">うにょうにょ</SPAN> と指定をしても全く反映されません。 一つのセル内で左右に文字を振ることは不可能なのでしょうか？
- ベストアンサー
- HTML
- 段落内の "text-align" の重複
CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。
- ベストアンサー
- CSS
- 表の1列だけをCSSを使って右揃えにするには？
XHTMLとCSSを使ってホームページを作成中の初心者です。 表の中のデータを中央揃えにするのですが、ある1つの列の文字だけは全て右揃えにしたいのです。 A-1 B-1 C-1 A-2 B-2 C-2 A-3 B-3 C-3 という表があったとすると、この中の「C-1、C-2、C-3」は右揃え、他の部分は中央揃えにしたいのです。 もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は <table class="test"> <colgroup span="1" id="test-a"></colgroup> <colgroup span="1" id="test-b"></colgroup> <colgroup span="1" id="test-c"></colgroup> <tbody> <tr><td>A-1</td><td>B-1</td><td>C-1</td></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td></tr> </tbody> </table> のような感じで、CSS部分は table.test td {text-align: center} というようにすればよいかと思います。 また、個別に指定するのであれば、ソース部分は <tbody> <tr><td class="c">A-1</td><td class="c">B-1</td><td class="r">C-1</td></tr> <tr><td class="c">A-2</td><td class="c">B-2</td><td class="r">C-2</td></tr> <tr><td class="c">A-3</td><td class="c">B-3</td><td class="r">C-3</td></tr> </tbody> のような感じで、CSS部分は td.c {text-align: center} td.r {text-align: right} でも良いかと思います。 ただ、データの量が多く、全てのセルに対して <td class="c"> <td class="r"> 等の指定をすることは非常に大変です。 列ごとに横幅の指定をするときなどはCSS部分で colgroup#test-c {width: 20px} 等のようにすると思いますが、例えば、この colgroup#test-c 等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。
- ベストアンサー
- CSS
- 全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「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
- スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
- 同一行の行頭と行末に２つの要素
を配置するために以下のようにしましたが駄目でした つまり2つ目の要素が次の行になったのです どうしたらいいでしょうか? <html> <head> <style type="text/css"> <!-- .end { float:right } --> </style> </head> <body> <div> <span>行頭</span> <span class="end">行末</span> </div> </body> </html>
- ベストアンサー
- HTML
- スタイルシートでのセンタリングについて。
スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース ------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>
- ベストアンサー
- HTML
- 「全体のレイアウト：中央揃えについて」補足
「全体のレイアウト：中央揃えについて」の質問で、IE7ではバグで「text-align: center;」にしなければ中央揃えができないということでしたが下記のように<div class="zen">に「text-align: center;」を指定しても中央揃えはできませんでした。 <?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: 0 auto; text-align: center; } div.k1 { width: 900px; height: 200px; background-color: black; } --> </style> <title></title> </head> <body> <div class="zen"> <div class="k1"></div> </div> </body> </html> ということは、 1.body { text-align: center; }（中央揃え確認済み） 2.文字コードをUTF-8にして、XML宣言を省略する（中央揃え未確認） の二つしかIE7で中央にそろえる方法はないということでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- テキストボックスの文字を右揃えにしましたらカーソルが
こんぱんは。テキストボックスの文字を右揃えにしましたらカーソルが点滅しなくなりました。具体的には、 <input type='text' class='itiniti' maxlength='5' /> このようにしたものに、 .itiniti{width:50px; text-align:right; } で指定したのですが、右揃えにはなりましたが、そのテキストボックスをクリックしてもカーソルが出現しません。何か入力して、右端以外の文字をクリックしたらカーソルが出現しますが、→キーでカーソルを一番右側までもっていくとまた消えます。 text-alignがleftのときとcenterのときは正常に表示されています。 どなたか右揃えでカーソルがちゃんと表示されない理由がわかるかたいらっしゃいましたらアドバイスお願いいたします。 環境は、IE7です。
- ベストアンサー
- HTML
お礼
<div align="right">■ to toppage ■</div>で出来ました。バッチリ！！ ありがとうございます<(__)> また何かあったら、宜しくお願いします。