HTMLの箱の種類〜ブロック要素とインライン要素

  <body>
    <h1>サイト名</h1>
    <p>ここに文字を書きます。</p>
  </body>

<h1></h1>と<p></p>は、ブロック要素と呼ばれる箱。

HTMLにはブロック要素とインライン要素が存在する。

ブロック要素は、言葉の通り「一つのブロック」として扱われる。基本的には、CSSで高さと横幅を指定する。
CSSで何も指定していない場合、ウィンドウの左右いっぱいに表示され、なおかつ上下に改行が入る。
長方形の長い箱と覚えておく。
ブロック要素を作るHTML要素の1つに、 div要素がある。

レイアウトを作るときによく使う。

インライン要素は、テキストを装飾するときによく使う。テキストの一部を囲い、そこに役割を与える。

あくまでも文字の一部の範囲指定なので、横幅は中身のテキストの横幅と同一。

また、インライン要素は連続して横に並ぶ。
インライン要素を作るHTML要素の1つに、 span要素がある。

基礎的なHTML要素

Webサイトでよく使われるブロック要素が、p要素。

paragraphの略で、段落を示すブロック要素。文章を書く際、段落を作る時に使う。

  <body>
    <h1>サイト名</h1>
    <p>このサイトは、●●です。</p>
  </body>

ブラウザで確認してみると、ただ文章を書いた時(pの要素に囲まれてない時)となにも変わらない結果のように見えるかもしれないが、この文章(このサイトは、●●です。) はブロック要素(p)の中に入っている。

これで、p要素自体にCSSを当て、この文章に背景色をつけたり、別の要素から幅をとったり、様々なレイアウトを実現することができるようになる。