株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | HTML基礎 その2

2017.10.31

CATEGORY - web

前回に続いて、HTMLの基礎をやっていきたいと思います。

前回の記事はこちら

構造化したHTMLをブラウザ上に表示するところまでやったので、今回は、HTMLのタグについていろいろ見ていこうと思います^^

1. ブロック要素とインライン要素について

タグを理解する上で、とりあえず、この2つを理解しておけばいいと思います。
(※HTML5で、この概念はなくなりまして、コンテントモデルというもので細分化されてますが、考え方として分かりやすいので、ブロック要素とインライン要素として説明したいと思います^^
詳しく知りたい方は、後で調べてみてください。
コンテントモデルについて

ブロック要素とインライン要素

ブロック要素

1つの塊(ブロック)として配置される要素です。基本的には、ブロックが親要素に従って横幅いっぱいに広がるので、次に書いた要素は改行したような見た目になります。

主なタグには、<div>, <p>, <ul>, <h1>, <section>, <table>, <form> などがあります。

インライン要素

ブロック要素の中身として、文章の一部として配置される要素です。そのため、基本的には、横幅いっぱいに広がらず、次に書いた要素は前の要素と続けて表示される見た目になります。

主なタグには、<a>, <img>, <span>, <br>, <input>, <select> などがあります。

まあ、言葉で言ってもよくわからないので、実際に使ってみましょう^^

<body> の部分に下記を書いてみます。

<div>
  ブロック要素です。
</div>
<p>
  これもブロック要素です。
</p>
<div>
  ブロック要素の中身です。
  <span> 「spanタグの中身」</span>
  <img src="images/sample.png">
  <a href="/">「リンクもインライン要素」</a>
  これもブロック要素の中身です。
</div>

では、これをまたブラウザにドラッグアンドドロップしてみましょう。

ブロック要素とインライン要素

こんな感じで表示されます。

これをもう少しわかりやすく、下記にブロック要素とインライン要素がわかるように示してみました。

ブロック要素とインライン要素

青枠がブロック要素で、オレンジ枠がインライン要素です。

ブロック要素は横幅いっぱいにブロックとして配置され、インライン要素は、前の要素と続けて表示されているのがわかると思います^^

ちなみに、インライン要素は、親要素に対応して、折り返して表示されます。
(※ここでは、親要素がブラウザの幅いっぱいに広がっているので、ブラウザの幅にたいして折り返しているように見えていると思います。)

はい、ブロック要素とインライン要素について理解できたでしょうか^^
ここがわかれば、HTMLについては、8割方習得したも同然です笑

タグについてみていくって言ったのですが、長くなったので、タグについては、次回に回して、今回はここまでにしたいと思います><

今回のポイント

  1. ブロック要素は1つの塊として配置される!
  2. インライン要素は前の要素に続けて表示される!

です!

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP