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

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

  • この記事は約4分で読めるワン。
アマゾン
トップブランドや中小企業から数多くのお買得商品が48時間に渡って登場します。100,000ポイントが当たるチャンスも!
2024年10月17日(木) 0:00 ~ 2024年10月20日(日) 23:59

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

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

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

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

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

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

<div>

<h1>ここに見出しが入ります</h1>

</div>

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

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

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

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

インライン要素(Inline Elements)

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

<div>

<h1>ここに見出しが入り<span>インライン要素も</span>入れることが可能です</h1>

<p>
インライン要素は<span>行の一部</span>として扱われます。
</p>

</div>

全体的には先程のブロック要素のサンプルと同じではありますが、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タグのみ違う色に装飾したりと表現の幅を広げることが出来ます。

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

後で読み直す

お気に入り登録した記事一覧

記事タイトルとURLをコピーする

Administrator

Joliee

Joliee

東京都内で福祉関係のWEB制作を担当しています。WEB制作についてはCSSで何とかしたいがモットーです。柴犬男子と暮らしています。少しでも体格よくするために始めた筋トレなど学んできたことを少しでもアウトプットできるようにブログに残しています。

樂(ガク)

樂(ガク)

豆柴犬の樂(ガク)です。かまってちゃんな性格な柴犬男子です。好きなものは歯磨きガムです。ドッグフードは生きていくために渋々食べています…