初心者きつね何回も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）などの指定はできません。
ブロック要素を右寄せ、中央寄せ、左寄せにする方法
ブロック要素は、CSSを当てることで右寄せや中央寄せ、左寄せにすることができます。
どの方法の場合も、プロパティに「text-align」を当てることで好きな位置に要素を寄せることが可能です。
ブロック要素を右寄せにする方法
ブロック要素を右寄せにするには
h1 {
text-align: right;
}のように、CSSで対象のタグやclass名に「text-align: right;」を当てるだけです。
See the Pen ブロック要素（右寄せ） by わい (@y_programing) on CodePen.
上の例では、全てh1で記述しているので全てが右寄せになっていますが
個々の要素を右寄せにしたい場合は、当てたい要素にclass名をつけてそちらにCSSを当てましょう。
ブロック要素を中央寄せにする方法
ブロック要素を中央寄せにするには、CSSで対象のタグやclass名に「text-align: center;」を当てるだけ。
h1 {
text-align: center;
}See the Pen ブロック要素（真ん中寄せ） by わい (@y_programing) on CodePen.
個々の要素を中央寄せにしたい場合は、当てたい要素にclass名をつけてそちらにCSSを当てるのも、右寄せの場合と一緒です。
ブロック要素を左寄せにする方法
基本的に要素は左から右に移動していくので、CSSに何も当てていない場合でも要素が左寄せになっている場合は多いですが
ブロック要素を左寄せにするには、今までの流れから分かると思いますがCSSで対象のタグやclass名に「text-align: left;」を当てるだけです。
h1 {
text-align: left;
}インライン要素とは？
続いて、インライン要素の特徴です。
インライン要素は横に並ぶ
インライン要素とは、並べて書いた際に横に並ぶ要素です。
言い方を変えると、エディターなどで縦に並べて書いても、実際に表示される際には改行をされず横に並ぶのがインライン要素です。
代表的なもので言うと、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です。
See the Pen ブロック要素をインライン要素に by わい (@y_programing) on CodePen.
逆に、インライン要素をブロック要素にするには
display: block; を指定します。
当てることによって縦並びになりますし、大きさや上下のmarginの指定もできるようになります。
インライン要素に、長さや高さなどを指定したい場合はブロック要素にするといいでしょう。
下のコードでは、本来はインライン要素であるaタグをブロック要素にしています。
See the Pen インライン要素をブロック要素に by わい (@y_programing) on CodePen.
display: inline-block;
さらに、display: inline-block; というものもあります。
display: inline-block; はどのような場面で使用するのかというと
要素自体は横並びにしたいけど、幅や高さを指定したい時です。
「要素自体は横並びにしたい」というインライン要素の性質と、「幅や高さを指定する」というブロック要素の性質を上手く組み合わせることができます。
まとめ
ということで、今回はブロック要素とインライン要素の違いについて見てきました。
- ブロック要素は縦に並び、横幅や縦幅の指定ができる
- インライン要素は横に並び、横幅や縦幅の指定ができないが、divタグなどのブロック要素で囲めばできる場合もある
- ブロック要素をインライン要素に、またはその逆にすることもできる
もし、CSSがどうしても当たらない場合は、ブロック要素とインライン要素を勘違いしている場合もあるので
対象の要素はどちらなのかを今一度確認してみるようにしてくださいね！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
コメント