初心者きつね「何回もCSSを見直しているのに、上手くCSSが当たらないです…」
Web制作をする際に利用するタグや要素には、実はブロック要素とインライン要素の2種類があり
ブロック要素にはブロック要素の、インライン要素にはインライン要素の特徴があります。
このブロック要素とインライン要素に関してですが、どの要素がブロックか、どの要素がインラインなのかを知っておくことは重要です。
なぜなら、対象がブロック要素かインライン要素にかによって当たらないCSSもあるからです。
最初は混乱してしまうこともありますが、1歩ずつでいいので
「この要素はブロック要素！」「こっちはインライン要素だ！」という感じで区別ができるようにしていきましょう。
ブロック要素とは？
まずは、ブロック要素の特徴について解説します。
ブロック要素は縦に並ぶ
ブロック要素とは、並べて書いた際に縦に並ぶ要素です。
言い方を変えると、エディターなどで横に並べて書いても、実際に表示される際には改行をされるのがブロック要素です。
代表的なブロック要素は、h1、h2などのhタグやdivタグ、pタグなどです。
最初に、「ブロック要素は並べて書いた際に縦に並ぶ要素」と紹介しましたが
試しに、h1タグを横に並べて書いてみます。
See the Pen ブロック要素 by わい (@y_programing) on CodePen.
ですが、表示結果には、縦に並んでいますよね。
これが、ブロック要素の特徴の1つです。
ブロック要素は横幅や縦幅などの指定ができる
ブロック要素は、横幅（width）や縦幅（height）などの指定ができます。
結果から先にお伝えすると、インライン要素はこのような指定ができないのですが、ここら辺は初心者の人はこんがらがる人が多いと思います。
ブロック要素は氷、インライン要素は水と覚えると覚えやすいです。
（画像）
氷は、固体なので成型することができます。
だから、氷であるブロック要素には横幅（width）や縦幅（height）などの指定ができます。
逆に、水は液体なので
手の中に水を注いで、ある形に成形しようとしても、できないですよね？
なので、水であるインライン要素は横幅（width）や縦幅（height）などの指定はできません。
インライン要素とは？
続いて、インライン要素の特徴です。
インライン要素は横に並ぶ
インライン要素とは、並べて書いた際に横に並ぶ要素です。
言い方を変えると、エディターなどで縦に並べて書いても、実際に表示される際には改行をされず横に並ぶのがインライン要素です。
代表的なもので言うと、aタグ、spanタグなどはインライン要素です。
試しに、spanタグを縦に並べて書いてみます。
そして、以下のCSSも当ててみます。
span {
margin-top: 20px;
width: 100px;
height: 30px;
}See the Pen インライン要素 by わい (@y_programing) on CodePen.
ですが、表示結果には、横に並んでおり
しかも、spanタグに指定したCSSは全て当たっていません。
これが、インライン要素の特徴です。
インライン要素は横幅や縦幅などの指定ができない
上の表示結果でも理解できたように
インライン要素には、widthやheight、marginの上下の指定ができないなどの特徴があります。
それだけでなく、例えば真ん中寄せする時によく使用する「text-align: center;」などはインライン要素に効きませんので
divタグなどで囲ってあげて、そのdivタグに対してCSSを当てる必要があります。
試しに、先ほどのspanタグをclass=”span”を付けたdivタグで囲ってみます（CSSも少し調整）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="span">
<span>これはspanタグです。</span>
</div>
<div class="span">
<span>これはspanタグです。</span>
</div>
<div class="span">
<span>これはspanタグです。</span>
</div>
<div class="span">
<span>これはspanタグです。</span>
</div>
<div class="span">
<span>これはspanタグです。</span>
</div>
</body>
</html>この状態で結果を見てみると、きちんと上下のmarginやwidth、heightなどのCSSが当たっていますね。
See the Pen インライン要素（調整後） by わい (@y_programing) on CodePen.
片方の要素を他方の要素にする方法
実は、プロパティを当てることによって
ブロック要素をインライン要素にしたり、逆にインライン要素をブロック要素にすることもできます。
display: inline; とdisplay: block;
display: inline; は、ブロック要素をインライン要素にしたい時に指定します。
特定の要素を横並びにさせないけど、別に幅や高さ、marginの上下を指定する必要がない場合などに利用します。
当てたいCSSセレクタにdisplay: inline; を指定すればOKです。
逆に、インライン要素をブロック要素にするには
display: block; を指定します。
当てることによって縦並びになりますし、大きさや上下のmarginの指定もできるようになります。
インライン要素に、長さや高さなどを指定したい場合はブロック要素にするといいでしょう。
display: inline-block;
さらに、display: inline-block; というものもあります。
display: inline-block; はどのような場面で使用するのかというと
要素自体は横並びにしたいけど、幅や高さを指定したい時です。
「要素自体は横並びにしたい」というインライン要素の性質と、「幅や高さを指定する」というブロック要素の性質を上手く組み合わせることができます。
まとめ
ということで、今回はブロック要素とインライン要素の違いについて見てきました。
・ブロック要素は縦に並び、横幅や縦幅の指定ができる
・インライン要素は横に並び、横幅や縦幅の指定ができないが、divタグなどのブロック要素で囲めばできる場合もある
・ブロック要素をインライン要素に、またはその逆にすることもできる
もし、CSSがどうしても当たらない場合は、ブロック要素とインライン要素を勘違いしている場合もあるので
対象の要素はどちらなのかを今一度確認してみるようにしてくださいね！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント