cocokara [ココカラ]ホームページの作り方HTML・CSSブロック要素とインライン要素を理解しよう

ブロック要素とインライン要素を理解しよう

Joliee

ホームページ制作において覚えておくタグのブロック要素とインライン要素を今回ご紹介します。

ホームページを制作する上で用いられるのがブロックレベル要素(Block-Level Elements)、インライン要素(Inline Elements)です。

要素をWebデベロッパーツールなどで確認してみると違いが分かりやすいかと思うのでぜひチェックしてみてください。

制作する上でルールがあり、ブロック要素の中には、他のブロック要素やインライン要素を配置することができますが、インライン要素の中に他のインライン要素を配置することができますが、インライン要素の中にブロック要素を配置することはできません

スポンサードリンク

ブロックレベル要素(Block-Level Elements)

例えば以下のようなHTMLがブロック要素です。

DIVと言うブロック要素の中に見出しタグのH1タグのブロック要素が入っているソースコードになります。

他にもブロック要素には以下のようなタグがあります。

  • <address>
  • <blockquote>
  • <center>
  • <div>
  • <dl>
  • <fieldset>
  • <form>
  • <h1> 〜 <h6>
  • <hr>
  • <noframes>
  • <noscript>
  • <ol>
  • <p>
  • <pre>
  • <table>
  • <ul>

ブロック要素は見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。

インライン要素(Inline Elements)

次にインライン要素のサンプルをご紹介します。

全体的には先程のブロック要素のサンプルと同じではありますが、H1タグの中にSPANタグが入っています。このようにブロック要素の一部としてインライン要素を当て込むことが出来ます。ただしSPANタグの中にH1タグを入れることは出来ません。

インライン要素にはいかのタグがあります。

  • <a>
  • <abbr>
  • <acronym>
  • <b>
  • <basefont>
  • <bdo>
  • <big>
  • <br>
  • <cite>
  • <code>
  • <dfn>
  • <em>
  • <font>
  • <i>
  • <img>
  • <input>
  • <kbd>
  • <label>
  • <q>
  • <s>
  • <samp>
  • <select>
  • <small>
  • <span>
  • <strike>
  • <strong>
  • <sub>
  • <sup>
  • <textarea>
  • <tt>
  • <u>
  • <var>

ブロック要素とインライン要素の違いがなんとなくわかりましたでしょうか?

先程のH1タグにSPANタグを入れる場合、そのSPANタグのみ違う色に装飾したりと表現の幅を広げることが出来ます。

ホームページを作っているうちにこのようなブロック要素、インライン要素を組み合わせて様々な表現ができるようになるかと思うのでぜひ要素の違いを理解できるように繰り返しコードを書いていってみてはいかがでしょうか。

HTML・CSSに関連する記事