空要素

ニコニコ大百科:HTMLタグ一覧 HTMLタグの一覧 空要素一覧

空要素一覧

• インラインの空要素を追加する<span>～</span>
• ブロックレベルの空要素を追加する<div>～</div>

クリックするとジャンプします

インラインの空要素を追加する

↑

---

文字を<span>～</span>で囲むことで、その範囲にインラインの空要素を追加する事が出来ます。インライン要素の詳細はこちらをご覧ください。

span要素はそれだけでは何の意味も持ちませんが、style属性などを指定することができ、文章の一部だけを修飾したい時などに使います。

ソースコード	表示結果
<p><span style="color:red; font-weight:bold;">ほんわかレス推奨です！</span>とは、「荒らすな危険！」と言う事だと思うのだが、違うのか？<br>いいえ、若干違います。</p>	ほんわかレス推奨です！とは、「荒らすな危険！」と言う事だと思うのだが、違うのか？ いいえ、若干違います。

span要素はインライン要素なので、幅・高さは内容に合わせて自動調整されます。インライン要素にwidth・heightプロパティを指定する事は出来ません。

もしspan要素に幅や高さを指定したい場合は、スタイルシートでdisplay:blockを指定してください。詳細はCSSのdisplayプロパティの項をご覧ください。

ブロックレベルの空要素を追加する

↑

---

文字を<div>～</div>で囲むことで、その範囲にブロックレベルの要素を追加する事が出来ます。ブロックレベル要素の詳細はこちらをご覧ください。

div要素はそれだけでは何の意味も持ちませんが、style属性などを指定することができ、レイアウトを調整したい時などに使います。

ソースコード
<div style="background-color:cyan;"> <p>すごい一体感を感じる。今までにない何か熱い一体感を。<br> 風・・・なんだろう吹いてきてる確実に、着実に、俺たちのほうに。<br> 中途半端はやめよう、とにかく最後までやってやろうじゃん。<br> ネットの画面の向こうには沢山の仲間がいる。決して一人じゃない。<br> 信じよう。そしてともに戦おう。<br> 工作員や邪魔は入るだろうけど、絶対に流されるなよ。</p> </div>
表示結果
すごい一体感を感じる。今までにない何か熱い一体感を。 風・・・なんだろう吹いてきてる確実に、着実に、俺たちのほうに。 中途半端はやめよう、とにかく最後までやってやろうじゃん。 ネットの画面の向こうには沢山の仲間がいる。決して一人じゃない。 信じよう。そしてともに戦おう。 工作員や邪魔は入るだろうけど、絶対に流されるなよ。

div要素はtable要素と並んで、様々なボックス・テンプレートを作成する際に使われます。

• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座-<div>でボックスを作ろう
• ニコニコ大百科:HTMLテンプレート集-装飾付きの枠
• ニコニコ大百科:HTMLテンプレート集-右上風の枠
• ニコニコ大百科:HTMLテンプレート集-ボタン風の枠

div要素はブロックレベル要素なので、デフォルトでは幅は親要素の幅いっぱいに、高さは内容によって自動調整されます。指定をするには、CSSのwidth・heightプロパティを使用してください。

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。