• ベストアンサー

【CSS3】Text-Alignの継承について

BODYタグでText-Alignしても、 継承しない?のはなぜでしょうか? Text-Alignは継承されないプロパテーなのでしょうか? Body { Text-Align: Center; }

noname#221405
noname#221405
  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1303/1774)
回答No.1

いえ、継承されますし、実際にされてると思いますが…記述式が正しくないか、或いは別途に他の要素からスタイル等が定義されており、実際のページ表示時にはそとらの方が優先されているのだと思います。 P.S. CSSやHTML等をク拾際には、先頭の文字を殊更に大文字表記にする意味は全く有りませんし、逆にそれが誤動作の遠因となる事も有るため。今後は全ての表記を小文字オンリーで統一する事をお奨めします。 body { text-align: center; } 上記の様に記述した方が良い。こう言うのは癖であり習慣なので、もうそう言うモノなのだと割り切って習慣化し小文字表記する癖付けをして行った方が良いです。同様にclass名やid名にも大文字は使うべきではありません。

noname#221405
質問者

お礼

アドバイスありがとうございます。記述の間違いでした。

関連するQ&A

  • text-alignについての疑問

    スタイルシートに {text-align:center;position:absolute;bottom:50px;} と入れて、一番下にあるCopyright&copy;○○という位置を固定して、真ん中にしたいんですが そうなりません。 position:absoluteを使ったときはセンタリングできないのでしょうか?? また、この場合はどうやればいいのでしょうか?? もう一つ質問させて頂きます。 <span style="text-align:center">aaaaaaaaaaaa aaaaaaaa</span> とやってもセンタリングできません。 <span>を<div>に変えると真ん中に来ます。 <span>タグだと"text-align:center"は使えないということでしょうか?? 一つでもいいのでわかる方いらっしゃいましたらよろしくお願い致します。

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

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

    • ベストアンサー
    • CSS
  • CSSでtext-align

    不思議な現象が起きてます。 2行7列の表を作って、 2行目の3~5列と7列目を右寄せにしたいがために、 <td class="right"> で外部CSSに .right{ text-align:right; } と記述したところ適用されませんでした。 しかしインラインで <td style="text-align:right;"> と書くと右寄せになるんです・・・ 原因がわからずこまっています。 ちなみに <td align="right"> でも表示されませんでした・・・ table全体には以下のCSSが外部で適用されてます、 div.gray_box { background-color: #FFFFFF; border-color: #CCCCCC; border-style: solid; border-width: 1px; padding: 1px 0 1px 0; } table.wide_table_border { border: 1px solid #FFFFFF; border-collapse:collapse; margin: 0px auto; padding: 5px; width: 100%; } あまり関係ないとは思うのですが一応載せておきます。 目的としては、必ず外部CSSに記述することです。

    • ベストアンサー
    • HTML
  • 画像のtext-align:center;について

    http://loveosan0801.uijin.com/content/ishida.html 上記URLの画像がcenterに配置されません。 どのように修正すれば、centerに配置されますでしょうか? お教えいただけませんか? body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #center p { text-align:center; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }

    • ベストアンサー
    • HTML
  • text-alignの解除の方法

    text-alignの解除の方法ってありませんか? 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか? IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。

  • text-align: center; 無視される

    table[summary="トップ"] th.トップ_品名{ width: 11em; text-align: center; } このCSSは、書き方が変ですか? なぜか、 width: 11em; は適用されるのに text-align: center; は無視されます。

    • ベストアンサー
    • CSS
  • CSSの継承

    HTMLに挑戦してから1年が経ちます。 少しずつ勉強してようやく形になってきましたが 継承のことについてよく分からないままきたので質問いたします。 スタイルシートの本には継承されない属性の方が多く書かれています。 例えば代表的なbackground-colorとかがありますが、 私のパソコンでは何故か継承されてしまっているようなのです。 環境はWindowsXP Pro、ブラウザはIE6で試しています。 例えば以下のようなソースです。これをコピペでメモ帳に貼り付けて下さればテストできます。 継承されないのなら<P>タグの背景色は初期値の白のままだと思います。 これって私の継承の理解が間違っているんでしょうか。 それとも他に原因があるのでしょうか。未だに謎なのでよろしくお願いします。 <style type="text/css"> <!-- div {background-color:red} --> </style> <div>aaa <p>継承していません</p> aaa</div>

    • ベストアンサー
    • HTML
  • 外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか

    外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか? 以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、 「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。 「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。 【例 : 外部スタイルシート】 .main { color : red; text-align : center; } .main.sub1 {       ←実際はこのような指定ではできない text-align : left; } .main.sub2 {       ←実際はこのような指定ではできない color : blue; } 【例 : htmlファイル】 <div class="sub1">あいうえお</div>  ←左寄せ&赤字にしたい <div class="sub2">あいうえお</div>  ←センタリング&青字にしたい

    • ベストアンサー
    • HTML
  • IE8ではtext-align: center;でdivタグが中央にならない。改善策は?

    IE8ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述: div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述: <div class="center">文章等<div> <質問1> ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか(width: 80%はdivタグのセンタリングには特に必要ないのですか?なぜ、width: 80%が記述されているのか分かりません。)?この80%という値はどこから導き出されたのでしょうか(なぜ、例えば60%、70%等ではだめなのですか?)? また、bodyタグをセンタリングしたい場合は、どうですか?CSSにwidth: 80%;が必要なのでしょうか? <質問2> 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか?margin:0 autoの場合、上下のマージンも0(無し)となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが?「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか? また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか? <divタグをセンタリングしたい場合> CSSでは以下のように記述: div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか? <bodyタグをセンタリングしたい場合> CSSでは以下のように記述: body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか? <質問3> IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか? 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか? { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 表をtext-alignで中央に出したい・・・

    こんな↓HTMLを書いているのですが、表がFirefox3.5の場合 中央に寄ってくれません。IE6なら寄ってくれるのですが・・・ CSSやHTMLの文法的な部分では誤りがないことを確認したのですが、 どうすればFirefoxでも表を中央に出せるでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="index" href="./"> <link rev="made" href="mail"> <style type="text/css"> <!-- .main{ text-align:center; } --> </style> <title>テーブル表示</title> </head> <body> <div class="main"> <table summary="chart 1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう