- ベストアンサー
smallにtext-allignが効かない
phpファイルにおいてＨＴＭＬで<small>タグの文章だけ右寄せしたかったのでtext-allign: right;としたのですが、右によりません。 なぜこんな風になるのでしょうか？ できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。 （ググる等、初歩的なことは調べてから質問しているつもりです。）
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<small>要素は、非置換インライン要素に分類されます。smallのサイズは文字数のままですので、文字幅いっぱいの幅の中では「どうあがいても、右にも左にも寄れません。 smallで囲んだ部分を、デザイン上別の場所に表示したい場合・・・たとえば、header内のh1要素におけるsmallを下に表示したいとかの場合・・ <body> <div class="header"> <h1><small>私の</small>著書紹介</h1> ・・・・ というHTMLに対して、 div.header h1{margin-top:30px;position:relative;} div.header h1 small{ display:block;width:10em;position:absolute;top:-25px;left:10px;background-color:yellow;text-align:right;} 詳しくは、 テキスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/text.html#alignment-prop ) でも、通常はこんな無理はしません。そもそも、HTMLが文書構造にしたがって正しくマークアップされているとは思えません。 smallは、「小さいフォントで表示する(HTML4.01)」要素でしたが、 15.2.1 フォントスタイル要素: TT、I、B、 BIG、 SMALL、 STRIKE、S、及びU要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-SMALL ) この様なプレゼンテーションのためだけの要素は、HTMLの趣旨に反するため、HTML5では、 「small 要素は、補足事項などの細字部分を表すようになりました。」 3.3. 変更された要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-elements ) HTML自体をまず見直してください。
その他の回答 (1)
- kosukejlampnet
- ベストアンサー率44% (126/282)
smallはインライン要素だからです。ブロック要素のタグなら、おそらく意図したような動きになると思います。 なので、display:block;を入れるとかやってしまう方法もないわけではありませんが、本来の使い方をしていないということで、仕様書に基づいた書き方とは言えないでしょう。 > できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。 何でこうなるの？と思ったところで、大体HTMLの仕様書を読んで解決します。自分は。。。
お礼
回答ありがとうございます。 私も今日divで区切って無理やり解決（というか無視？）しました。 仕様書ですか・・・やっぱ大事なんですね。
お礼
大変詳しくありがとうございます。 インライン要素の何たるかが少しわかりました。