【htmlコーディング】aタグはインライン要素？ブロックレベル要素とインライン要素を理解しよう！

今回は、ブロックレベル要素とインライン要素について解説します。
ブロックレベル要素とインライン要素を正しく理解して、綺麗にコーディングしよう！

ブロックレベル要素とインライン要素とは

htmlで使われる<div>や<p>、<a>などのタグは、ブロックレベル要素とインライン要素のどちらかの要素になります。（例外を除く）

この要素の分類により、タグの入れ子や配置できるかどうかのルールが決まっていて、間違った使い方をすると、表示崩れしてしまったり、SEOにも影響してきます。

ブロックレベル要素

ブロックレベル要素は、名前の通り1つのブロックとして認識される要素です。
このブロックレベル要素を使って、Webサイトのレイアウトのコーディングをしていきます。

ブロックレベル要素のタグは以下になります。

インライン要素

インライン要素は、ブロックレベル要素の中で使用することが多く、その内容の一部として認識されます。

例えば「インライン要素とは？」という文章の「インライン要素」を強調したい場合、ブロックレベルの<p>タグと、その中にインライン要素の<strong>タグを使います。

<p><strong>インライン要素</strong>とは？</p>

インライン要素のタグは以下になります。

配置のルール

インライン要素のとこでも書きましたが、基本ブロックレベル要素の中にインライン要素を配置するルールがあるので、その逆はできません。

正：<p><strong>インライン要素</strong>とは？</p>
誤：<strong><p>インライン要素とは？</p></strong>

はじめは難しいですが、タグを覚えれば自然と理解できるようになります。

インライン要素をブロックレベル要素に変換

インライン要素は、cssで横幅（widht）を指定することができず、思うようにコーディングすることができないことが多々あります。

1番多いのが、aタグです。

aタグはデフォルトでインライン要素なので、例えば背景色がついた大きめのボタンの場合、クリック領域がテキスト部分だけになってしまうことがあります。

そんな時は、ブロックレベル要素に変換することができます。

変換は簡単で、cssで以下のように記述します。

a {
    display: block;
}

こうすることで、aタグがブロック要素になり、横幅の指定ができ、クリック領域もボタン全体にすることができます。

最後に

以上、ブロックレベル要素とインライン要素について解説しました。

はじめは何が何だか分からないと思いますが、コーディングに慣れてきてタグを覚えてくれば簡単で、自然と身についてくると思います。

最近のブラウザは、配置が間違っていたとしても、崩れなどせず表示させてくれますが、きちんと理解して綺麗なコードになるように心掛けましょう。