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

どうもエブホリです！

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

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を指定

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

試しにやってみます。

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

a { 
    text-align: center; 
}

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を指定

まとめ

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

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

それではまとめます。

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

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

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

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

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル