No.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 … )
でも、通常はこんな無理はしません。そもそも、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自体をまず見直してください。
No.1
- 回答日時:
smallはインライン要素だからです。
ブロック要素のタグなら、おそらく意図したような動きになると思います。なので、display:block;を入れるとかやってしまう方法もないわけではありませんが、本来の使い方をしていないということで、仕様書に基づいた書き方とは言えないでしょう。
> できればこういった事態になった場合、HTMLに詳しい人の調べ方も教えてほしいです。
何でこうなるの?と思ったところで、大体HTMLの仕様書を読んで解決します。自分は。。。
この回答へのお礼
お礼日時:2011/09/14 18:50
回答ありがとうございます。
私も今日divで区切って無理やり解決(というか無視?)しました。
仕様書ですか・・・やっぱ大事なんですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
2個のFormを横並びにしたい
-
html タグの閉じスラッシュ前の...
-
双方向リスト
-
配列の要素をまとめて比較したい
-
aの中にspan
-
含む含まないという概念自体の...
-
角丸画像の背景色を透明にした...
-
smallにtext-allignが効かない
-
メールアドレス(グループ)の...
-
input type="hidden"で取得した...
-
マージソートの計算量について-...
-
【CSS】imgタグを、親要素の幅...
-
空要素タグ??
-
CSSのa:hoverが急に一部だけ効...
-
imgタグをそのまま使うことは正...
-
質問1.
-
DIVブロックの中に文字。
-
ボールド文字の中に通常文字を...
-
ある要素の中身を全部グレーア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
「諸要素」とはどういう意味で...
-
2個のFormを横並びにしたい
-
input type="hidden"で取得した...
-
textareaの幅を画面と合わせたい
-
CSS:overflow要素の印刷について
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報