5分あれば理解できる!HTMLのブロックレベル要素とインライン要素を分かりやすく解説!

誰でも5分で理解できる!HTMLのブロックレベル要素とインライン要素を分かりやすく解説!

どうもエブホリです!

僕自身『30days challenge』でプログラミングを30日間猛勉強したのですが、その時にこのブロックレベル要素とインライン要素の違いにかなり頭を悩ましました。

なので、この記事ではプログラミング初心者がつまずきやすいHTMLのブロックレベル要素とインライン要素について、誰でも5分で理解できるように解説していきます。

ここが理解できると、CSSでよく使うtext-alignなどをどれに指定すれば良いのかがわかるようになるので、デザインを作る時に悩まなくて済みます。

サクッと解説するのでお時間はかかりません。

是非最後までお読み頂ければ幸いです。

ちなみに僕が使用しているエディターはVisual Studio Codeですが、もうすでに他のエディターを使用しているのならそちらを使ってください。

 

5分で理解できるようにHTMLのブロックレベル要素とインライン要素をサクッと解説

一緒に手を動かしながらやって頂けると理解が早まると思いますので、是非記事を読みながら手を動かしてみて下さい。

ではまず、お使いのエディターに下記のHTMLの雛型をコピペして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="sample.css" rel="stylesheet" type="text/css"> 
    <title>sample</title>
</head>

<body>
    <h2>HTMLのブロックレベル要素とインライン要素について解説しています</h2>
    <p>これはブロックレベル要素です</p>
    <a href="">これはインライン要素です</a>
    これは文字列です。インライン要素として扱われます。
</body>

</html>

 

上記のコードをブラウザに反映させるとこのようになっているかと思います。

ブラウザ画面

ブラウザ画面

 

ではボックスレベル要素とインライン要素について説明します。

ブロックレベル要素とは?

  • ブロックレベル要素とは見出しや段落など文章を構成する要素です。
  • ブラウザ上では一つのかたまりとして反映されていて、前後に改行が入ります。
  • 主なブロックレベル要素は<h1>~<h6>,<p>,<div>,<ul>などがあります。

インライン要素とは?

  • インライン要素は主にブロックレベル要素の中身として扱われることが多い。
  • 文章の一部で使用されているので、ブラウザでは前後に改行が入りません。
  • 主なインライン要素は<a>,<span>,<strong>,「ただの文字列」などがあります。

 

先ほどの画像をもう一度見ていきます。

ブロックレベル要素

ブロックレベル要素

 

この場合だと、一番上の<h2>要素と<p>要素は隣り合って表示されておらず、ブラウザ上だと改行されて独立して表示されていますよね?

つまりこれがブロックレベル要素です。

逆にその下の<a>ただの文字列はエディターでは改行していますが、ブラウザ上では隣り合って表示されていますよね?

これがインライン要素ということになります。

インライン要素

インライン要素

 

結構意外だと思うのですが、ただの文字列<p>などのタグで囲わなくともインライン要素として扱われるのでブラウザに表示できるのです。

これが理解できていれば後はもう簡単です。

CSSでよく使うtext-alignなどのプロパティはブロックレベル要素で囲われたインライン要素に作用します。

つまり先ほどの<h2>要素の中の文字を真ん中に表示したい場合はCSSでh2 { text-align: center; }と記述すれば良いわけです。

試しにやってみますので、以下のコードをコピペしてCSSのファイルを作ってみて下さい。名前はsample.cssとします。

@charset "utf-8";
h2 {
    text-align: center;
}

 

これが上手く反映されると画像のようになるかと思います。(cssファイルをsample.cssで保存したらF5を押して画面をリフレッシュしてね!)

h2にtext-alignを指定

h2にtext-alignを指定

 

 

逆にインライン要素にtext-align: center;を指定しても適用されませんので注意して下さい。

試しにやってみます。

@charset "utf-8"; 
h2 { 
    text-align: center; 
} 

a { 
    text-align: center; 
}
text-alignをインライン要素に指定

text-alignをインライン要素に指定

 

なので<a>などのインライン要素をセンターに表示させたい場合は<div>などのボックスレベル要素で囲ってあげ、そこにtext-align: center;を指定すると適用されるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="sample.css" rel="stylesheet" type="text/css">
    <title>sample</title>
</head>

<body>
    <h2>HTMLのブロックレベル要素とインライン要素について解説しています</h2>
    <p>これはブロックレベル要素です</p>
    <div>
        <a href="">これはインライン要素です</a>
    </div>
    これは文字列です。インライン要素として扱われます。
</body>

</html>

 

@charset "utf-8"; 
h2 {
    text-align: center; 
} 

div { 
    text-align: center; 
}

 

画像のように<a>で囲われた文字列が真ん中に配置されました。

divにtext-alignを指定

divにtext-alignを指定

まとめ

僕自身ブロックレベル要素とインライン要素の違いが分からずに、かなり頭を悩ませていました。

同じ悩みを抱えている方の理解の助けになれば幸いです。

それではまとめます。

  1. ブロックレベル要素とは見出しや段落など文章を構成する要素。
  2. ブラウザ上では一つのかたまりとして反映されていて、前後に改行が入る。
  3. <h1>~<h6>,<p>,<div>,<ul>などが主なブロックレベル要素
  4. インライン要素は主にブロックレベル要素の中身として扱われることが多い。
  5. 文章の一部で使用されているので、ブラウザでは前後に改行が入らず、横並びになる。
  6. <a>,<span>,<strong>,「ただの文字列」などが主なインライン要素

最後までお読み頂きありがとうございました。

他にもプログラミングに関する記事を書いていますので併せてお読み頂ければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA