現代では、ほとんどの人がCSSを使用してスタイリングを実行し、CSSにH2の外観を定義させることを理解しています。
ただし、テキストを<h2>のデフォルトの外観のように見せようとしているが、他のテキストと同じ行に配置しようとしていることを想像してみてください。
HTML4でこれを行うことは可能ですか?
または、CSSを使用してエミュレートすることはできますか?<h2>に直接スタイルを設定していないと仮定します。
デフォルトでは、すべてのHTML見出し(<h1>
〜<h5>
)は。として表示されblock
ます。これは、見出しを囲む他の要素がある場合、見出しが別の行にあることを意味します。
display: inline
見出しに適用することで、CSSでこれを変更できます。ブロックの動作(たとえば、特定の幅を持つなど)を維持するために必要な場合は、display: inline-block
代わりに使用できます。
それを試してみてください:
<!DOCTYPE html>
<html>
<body>
<style>
.h2{
font-size: x-large;
font-weight: bold;
display: inline;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p class="h2">This is heading 2</p>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
また、現在のh2に適用する現在のスタイルを無効にする必要があります。例:色:黒!重要; (定義されている場合)
HTML4でそれを行う方法(これは主に質問の対象でした)は、2セルのテーブルを使用することです。
<table><tr valign=baseline><td><h2>Your heading</h2> <td>Other text</table>
最近、これをお勧めする人はあまりいません。
注:のデフォルトのレンダリング(ブラウザーに依存しますが、同様の行に従う傾向があります)を確実にする唯一の方法は、要素h2
に適用される可能性のあるCSSルールの使用を控えることです。h2
ただし、おそらくブラウザでのHTMLレンダリングについて説明しているページなどで、それを実現したい特別な理由はわかりません。