• ベストアンサー

ｃｓｓで文字を右寄せにしたいのですが

<html> <head> <style type="text/css"> <!-- div#right { text-align: right; } --> </style> </head> <body> <DIV style="font-size:80%;" id="right;"> test </DIV> </body> </html> なぜか右寄せになりません。左に寄ってしまいます。 <DIV style="font-size:80%;" id="right;"> の部分がおかしいのでしょうか？

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

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

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

>なぜか右寄せになりません。左に寄ってしまいます。 <DIV style="font-size:80%;" id="right;"> の部分がおかしいのでしょうか？ はい、おかしいです。 id="right;"> を id="right"> に つまり「;」を削除すれば、右によると思います。

VILRQHQTMY6
質問者

お礼

回答ありがとうございました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

初歩的ミスです。 id="right; #right は違いますよ(^^) 通常はそのようにマークアップしません。 <div class="message"> <p>なんたらかんたら</p> </div> divはデザインのために書くのではありません。とっても大事なことなので頭の隅っこに入れて置いてください。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』・・構造とは意味的な構造です。 　<font colr="red">がダメだから<span class="red">とするようなものです。将来色を変えたくなったら・・ div.message{text-align:right;} あるいは div.message p{text-align:right;} です。ふたつは詳細度が異なるので使い分けをしましょう。text-alignは継承されるプロパティです。

VILRQHQTMY6
質問者

お礼

回答ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 文字の右寄せの書き方

    次のようにすると「2009年7月5日」の文字が右寄せされると思うのですが、右寄せされません。どこが間違っているのでしょうか。 <head> <style type="text/css"> <!-- p.2 {line-align:right; } --> </style> </head> <body> <p class="2">2009年7月5日</p> </body>

    • ベストアンサー
    • HTML
  • CSS・DIVについて

    CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; 　　　　　　} div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。

    • 締切済み
    • CSS
  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか？ <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML
  • 文字のサイズを大きくしつつ、中央に表示させるには？

    ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには？ <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test２は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか？ IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。

    • ベストアンサー
    • HTML
  • CSSでのレイアウト（Firefox向け）

    下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） 　　　┌──────────────┐ 　　　｜┌─────┐┌─────┐│ 　　　｜｜TEXT　　　　｜｜TEXT　　　　｜｜ 　　　｜｜　　　　　　　　｜｜　　　　　　　｜｜ 　　　｜└─────┘└─────┘│ 　　　└──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。

    • ベストアンサー
    • HTML
  • <p>要素をインライン要素にしての右寄せ

    <p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • 初歩的な質問ですみません。部分的な文字の右寄せです

    初歩的な質問ですみません。。 メールマガジンで添付の画像のようなレイアウトを しなければなりません。　 テキストの最終行のところに「詳しくはコチラ」を 右寄せで配置する作業なのですが、何をやっても上手 く行きません。　 もし、これがいいですよ！という方法がありましたら、 どうか教えて下さい。 ↓これでは、もちろん上手く行くわけないですね。。 <body> <table width="640"> <tr> <td> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト。 <span style="text-align:right"><a href="@">詳しくはコチラ </a> </span> </p> </td> </tr> </table> </body>

    • ベストアンサー
    • CSS
  • 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう

    Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。

    • ベストアンサー
    • HTML
  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。　尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSを使いたいのですが上手くいきません

    テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する