smallにtext-allignが効かない

解決済

質問者：buc6t
質問日時：2011/09/14 16:22
回答数：2件

phpファイルにおいてＨＴＭＬで<small>タグの文章だけ右寄せしたかったのでtext-allign: right;としたのですが、右によりません。

なぜこんな風になるのでしょうか？

できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。
（ググる等、初歩的なことは調べてから質問しているつもりです。）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2011/09/14 18:28

<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 … )

でも、通常はこんな無理はしません。そもそも、HTMLが文書構造にしたがって正しくマークアップされているとは思えません。

　smallは、「小さいフォントで表示する(HTML4.01)」要素でしたが、
15.2.1 フォントスタイル要素: TT、I、B、 BIG、 SMALL、 STRIKE、S、及びU要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

この様なプレゼンテーションのためだけの要素は、HTMLの趣旨に反するため、HTML5では、
「small 要素は、補足事項などの細字部分を表すようになりました。」
3.3. 変更された要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

　HTML自体をまず見直してください。

- 0
- 件

通報する

この回答へのお礼

大変詳しくありがとうございます。
インライン要素の何たるかが少しわかりました。

通報する

お礼日時：2011/09/14 18:53

No.1

回答者： kosukejlampnet
回答日時：2011/09/14 17:48

smallはインライン要素だからです。

ブロック要素のタグなら、おそらく意図したような動きになると思います。
なので、display:block;を入れるとかやってしまう方法もないわけではありませんが、本来の使い方をしていないということで、仕様書に基づいた書き方とは言えないでしょう。

> できればこういった事態になった場合、ＨＴＭＬに詳しい人の調べ方も教えてほしいです。
何でこうなるの？と思ったところで、大体HTMLの仕様書を読んで解決します。自分は。。。