HTML/CSSを勉強している中で、最初の頃によく分からなかったのが「インライン要素」と「ブロック要素」です。
なんとなく「インラインは横に並ぶ」「ブロックは縦に並ぶ」と覚えていましたが、実際にサイトを作ってみると、
「この要素だけ小さくしたい」
「この要素の幅を変えたい」
という場面が出てきました。
今回は、実際にサイトを作りながら理解したことをまとめます。
インライン要素とは？
インライン要素は、文章の一部分のように、文章の流れの中に入っていく要素です。
代表的なものには、
<a><span>
などがあります。
インライン要素は基本的に横方向に並んでいきます。
そのため、文章の一部分だけを装飾したい場合などに便利です。
spanタグを使って「ここだけ変える」
サイトを作っていると、
「￥5,000（税込）と表示したいけど、（税込）だけ少し小さくしたい」
というような場面があります。
そんなときに便利なのが<span>です。
spanはインライン要素なので、文章の一部分を違和感なく囲むことができます。
例えば、
<p>￥5,000<span>（税込）</span></p>
とします。
そしてCSSで、
p span {
font-size: 10px;
}
と指定すれば、（税込）の部分だけ文字サイズを変更できます。
今回制作した架空サイトでも、商品の価格表示で同じ方法を使いました。
<p class="item-price">￥4,180<span>(税込)</span></p>
(税込)だけをspanで囲み、CSSで文字サイズを小さくしています。
実際にサイトを作ってみることで、「spanってこういうときに使うんだ！」と理解できました。
インライン要素はwidthを指定できない？
インライン要素について勉強していて、もう一つ疑問に思ったのが「width」です。
例えば、
span {
width: 200px;
}
と指定しても、インライン要素では基本的にwidthやheightを指定して、その要素の大きさを自由に変えることはできません。
インライン要素は文章の流れの中にあるため、ブロック要素のように「この要素は幅200px、高さ100px」という形で大きさを指定する使い方には向いていません。
では、幅を指定したい場合はどうするのか？
そこで使えるのがdisplayです。
span {
display: inline-block;
width: 200px;
}
inline-blockにすると、インライン要素のように横に並びながら、widthやheightなどのサイズも指定できるようになります。
ブロック要素とは？
ブロック要素は、基本的に一つのまとまりとして扱われ、上から下へ並んでいきます。
そのため、複数のブロック要素を置くと、基本的には縦方向に並びます。
「要素を横に並べたい」という場合には、Flexboxなどを使ってレイアウトを調整します。
Flexboxとの関係
Flexboxを使うと、要素を横方向・縦方向に並べることができます。
例えば、
.container {
display: flex;
}
とすると、Flexboxが適用され、子要素は基本的に横方向に並びます。
縦方向に並べたい場合は、
.container {
display: flex;
flex-direction: column;
}
とします。
最初は「なぜこれで横・縦が変わるんだろう？」と少し混乱しましたが、今はまず、
display: flex→ Flexboxを使うflex-direction: row→ 横方向flex-direction: column→ 縦方向
と覚えています。
これからさらにFlexboxを使っていく中で、仕組みについても理解を深めていきたいです。
今回分かったこと
今回勉強して、インライン要素とブロック要素は、単純に「横」「縦」と覚えるだけではなく、それぞれ役割が違うことが分かりました。
インライン要素は、文章の一部分を指定したいときに便利。
ブロック要素は、一つのまとまりとしてレイアウトするときに使われる。
そして、要素の並び方を変更したい場合には、displayやFlexboxなどを使って調整する。
まだ「なぜこの指定でこう動くのか？」まで完全に理解できていない部分もありますが、実際にサイトを作りながら使うことで、少しずつイメージできるようになってきました。
今後も「とりあえずコードを覚える」だけではなく、実際に使いながら理解していきたいと思います。
今回覚えたこと
- インライン要素は文章の流れの中で扱われる
<span>はインライン要素- インライン要素は基本的に横方向に並ぶ
- インライン要素は基本的にwidthやheightを指定できない
display: inline-blockにするとサイズ指定ができる- ブロック要素は基本的に上から下へ並ぶ
display: flexでFlexboxを使えるflex-direction: rowは横方向flex-direction: columnは縦方向
まだまだ勉強中ですが、実際にサイトを作りながら少しずつ理解していきたいと思います。
