文字のサイズを大きくしつつ、中央に表示させる方法は?
- ファイアフォックスで文字のサイズを大きくしつつ、中央に表示させる方法を教えてください。
- テスト1は中央に表示されるが文字が小さいままで、テスト2は文字は大きく表示されるが中央に表示されない問題があります。
- IEではテスト1の方法で中央に表示されつつ文字も大きくなりますが、両方を行うにはどうすればいいでしょうか?
- ベストアンサー
文字のサイズを大きくしつつ、中央に表示させるには?
ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには? <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test2は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか? IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。
- TTWGAICPBIGD
- お礼率98% (51/52)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
TTWGAICPBIGDさん ファイアフォックスで???というのが良くわかりませんが。 スタイルシートの書き方は以下のようになります。 <div style="text-align:center;font-size:300%;"> test1<br />test2 </div> もしくは、 <div style="text-align:center;font-size:300%;">test1</div> <div style="text-align:center;font-size:300%;">test2</div> うまく行くとよいですね!
その他の回答 (4)
<div style="text-align:center;font-size:1.5;">test1</div> <div style="font-size:3.0">test2</div> スタイルシートの記述間違いです。 %以外にも、いろいろな記述方法があります。 <body>内にCSSを書くことは、ソールが読みにくくなるので、外部CSSに記述し、読みこむことを、お勧めします。 .text1{font-size:1.5;lineheight:1.5;} .text2{font-siz:3em;lineheight:1.6;} などと記述して、<p class="text1">test1</p>と、記述した方が、ソースがきれいだと思います。 http://www.nanden.asia/test3/test.zip
お礼
ありがとうございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ひとつの要素に二つ以上のstyle属性があると、詳細度が同じですから後から書かれた宣言が有効になって、前にかかれたものを上書きします。 スタイルの宣言は セレクタ{宣言ブロック} で宣言ブロック内は;で区切られた宣言の集合になります。 style属性の場合はセレクタや{}はありません。 よって <h1 style="text-align:center;font-size:300%;">test</h1> となります。 DIVのこの様な使い方は望ましくありません。
お礼
ありがとうございます。
- DrFell
- ベストアンサー率55% (305/551)
#1です。説明をするのを忘れていました。 「;」 で区切ることで複数の宣言をすることが出来ます。 なので、 <div style="text-align:center;font-size:300%;background:#ccccff;border:#aaaaff solid 1px;padding:2px;">test1</div> などと、いくつものプロパティや値を書くことができます。
お礼
ありがとうございます。
- DrFell
- ベストアンサー率55% (305/551)
<div style="text-align:center;font-size:300%;">test1</div>
お礼
ありがとうございます。
関連するQ&A
- IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが IE9だと横画面いっぱいに広がってしまいます。 IEでも指定した幅で表示させる方法はありますか?
- ベストアンサー
- HTML
- cssでテーブルを中央配置にするには?
よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。
- ベストアンサー
- 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
- div style 簡素化するには?
<div style="text-align:center;" style="font-size:50%;"> を簡素化するにはどうすればいいでしょうか? <div style="text-align:center;" "font-size:50%;"> にしたら、うまく表示されませんでした。
- ベストアンサー
- 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
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに(できればCSSなどで)divタグ内のテキストを中央に表示したいのですが、できますか? よろしくお願いします。
- ベストアンサー
- HTML
- 文字がテーブルの中央に表示されない
スタイルシートで th.test1 { text-align: center; width: 100px; } と宣言して、 <th class="test1">日付</th> とすれば、 中央に文字を表示しつつ、列の幅も指定通りになりますよね? そのはずなのですが、 列の幅は指定できたのですが 文字が中央に表示されません。 なぜでしょうか?
- ベストアンサー
- HTML
- cssで文字を右寄せにしたいのですが
<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
- どうしても文字が中央に表示されない
<html> <head> <meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS"> <title>部屋</title> </head> <body leftmargin="0" topmargin="0"> <IMG src="top.gif" width="100%" height="100%" style="position:absolute; top:0px; left:0px; z-index:1"> <DIV style="position:absolute; top:0px; left:0px; z-index:2"> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <strong><font size=9><center>入口</center></font></strong></p> </DIV> </body> </html> この入口という文字を中央に表示したいのですが、<center></center> というタグをどこに入れても表示できないのです。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- divタグを中央寄せでwidthを指定したい。
Webのデザインを行っているのですが、以下のような事象に困っています。 ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。 どうしてこうなるのでしょうか? 出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。
- ベストアンサー
- HTML
お礼
ありがとうございます。