2016/09/08

あなたは大丈夫?”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】

cd66c87fb6a1bbcb76f1952ab7ad9876_s

やぁ僕(@yutopi60pa)だよ。


ユトピ
前回のHTML入門では基本的なHTMLの書き方について勉強したね。

お母さん
タグで挟めばいいのよね!

ユトピ
文章などをタグで挟むとHTMLとして扱われるんだよね!簡単だね!


そうなんです。HTMLの書き方自体はそこまで難しくはありません。使用頻度が高いタグもそこまで多くはないので、ある程度慣れてくれば誰でもできるようになります。

しかしHTMLを書き始める前にタグに関する特徴を覚えておかなければなりません。
それは『ブロック要素』『インライン要素』です。


お母さん
なんのこっちゃ。ブロックはなんとなく箱みたいなものだってわかるけど、インラインって意味わからないわ。
新しいアプリ?

ユトピ
LINEじゃないよ。それはいまから説明するね。


このタグの特徴である『ブロック要素』『インライン要素』を覚えることができれば、その特性を生かしてコーディングをすることができます。
逆に言うとHTMLとCSSを使ったデザインもちゃんとできなくなってしまいます。ですので今回のブロック要素とインライン要素は必ず頭に叩き込んでおきましょう。

ブロック要素とは?

HTMLのタグには大きく分けて2種類の特徴をもったものがあります。
まずは『ブロック要素』から説明していきましょう。

ブロック要素とは名前のごとく”かたまり”のイメージです。
レゴブロックの1ピースみたいなものです。

1番の特徴としてはブロック要素のタグはどんどん縦に並んでいきます。
理由としてはタグのあとに改行が入るからです。

改行が入るとどんどん下へ下へと続いていきます。

例えばこんな感じ。

ブロック要素が縦に並ぶよ。

ブロック要素の積み重なり

コード

結果

ブロック要素1だね!

ブロック要素1だね!

ブロック要素1だね!

ブロック要素1だね!

ブロック要素2だね!

ブロック要素2だね!

ブロック要素2だね!

ブロック要素2だね!

ブロック要素3だね!

ブロック要素3だね!

ブロック要素3だね!

ブロック要素3だね!

このように積みあがる感じで並んでいきます。


お母さん
それじゃ横には並ばないの?

ユトピ
CSSを使えばブロック要素も横に並ばせることができるよ!それはのちほど!


他にもブロック要素のタグにはこんな特徴があります!


margin、paddingが指定できる!

CSSプロパティの余白の幅を指定することができる「margin」「padding」をブロック要素には指定することができます。
marginがタグの外側の余白、paddingが内側の余白をしていすることができます。

ブロック要素のmarginとpadding

オレンジの部分がmargin(外側の余白)だよん!

margin

外側の余白だよん!

padding

内側の余白だよん!

緑色の部分がpadding(内側の余白)だよん!


width、heightを指定することができる!

ブロック要素にはcssプロパティの幅を指定する「width」高さを指定できる「height」を指定することができます。
幅や高さを指定できるのは、WEBサイトのレイアウトをする際に非常に役に立ちます!



お母さん
できることがたくさんあって便利ね!

ユトピ
ブロック要素は結構とっつきやすい感じだから初めての人でもすぐに慣れていけるよ!


ブロック要素のタグ

ブロック要素のタグはたくさんありますが、今回は代表的なものだけを抜粋しますね。

  • div
  • form
  • h1~h6
  • p
  • ul
  • ol
  • dl
  • table

などなどです。
上にあげたタグはよく使うブロック要素タグですので、覚えておきましょう。


ブロック要素のまとめ

ここでブロック要素のまとめをしておきましょう。

  • 縦に並んでいく!
  • marginとpaddingの指定ができる!
  • widthとheightの指定ができる!

ブロック要素にはこのような3つの特徴がありますので、しっかり頭にいれながらコーディングをしていきましょう!


インライン要素とは?


インライン要素はブロック要素とは違ってすこしとっつきにくいです。イメージとしては”行の一部”という感じですね。

名前にもラインと入っていますので、線のようなイメージをしてもらったほうがわかりやすいです。
インライン要素はブロックの中身を構成するタグになります。


名前からしても、(ブロック要素に)イン(している)ライン(線・行の部分)なような意味になります。



お母さん
だいぶ強引なのね。

ユトピ
すこしでも覚えやすくしたいから、こうやって分解したんだよ!わかって!


またインライン要素の1番の特徴としては、タグは並べると”横”に並んでいきます。
理由は改行が入らないから。改行がないとどんどん横にならんでいきますよね。
先ほどのブロック要素が縦に並んでいきましたが、こちらは横に並ぶのが特徴です。


例えばこんな感じ。

インライン要素は横に並ぶ

インライン要素<span>タグの場合

コード

結果
僕はここにいるよ。僕はここにいるよ。僕はここにいるよ。僕はここにいるよ。


今回の例ではインライン要素の一つである<span>タグを使ってみました。わかりやすくするために色を付け加えてあります。
このようにインライン要素は幅めいっぱいまで横に並んでいきます。これはブロック要素とは真逆の特徴ですね。


他にもこのような特徴があります。

marginは左右だけ。paddingは効くけど上下にくせがある。

余白に関してのインライン要素は、ブロック要素と違ってすこし扱いにくいです。

marginは左右の余白は空きますが、上下は指定できません。
paddingは上下左右指定することができますが、上下には1つ厄介なくせがあります。

paddingで上下を指定するとブロック要素なら、上と下にあるものが余白に応じて離れていきますが、インライン要素になると離れずに重なってしまいます。


例えばこんな感じ

inline1
左右のmarginは設定できますが、上下は設定しても反映されません。

inline2
上下左右設定できます。左右は余白分だけ間があきますが、上下はどれだけ余白を作っても間が開くことはありませんね。上下の文字と重なってしまいます。

このようにインライン要素の上下の余白をしていすることは基本的にできません。


widthとheightは指定できない

インライン要素は幅と高さをしていするCSSプロパティのwidth、heightを指定することはできません。
インライン要素は基本的にタグで挟まれた中身の文章などに応じて大きさが決まります。


例えばこんな感じ。

インライン要素のwidthとheight

widthに200px、heightに200pxを指定

コード

結果
ここはインライン要素なのだここはインライン要素なのだここはインライン要素なのだここはインライン要素なのだ

※参考

width:200px
height:200px;
のブロック要素

上の図だとオレンジ背景のインライン要素に幅と高さともに200pxを指定していますが、無視されています。参考までに下の方にブロック要素の幅・高さ200pxのボックスを置きましたが、反映されていないのがよくわかると思います。

このようにインライン要素はブロック要素のように扱えないので、レイアウトをする場合にはあまり役に立ちませんね。


お母さん
なんだか面倒ね。全部ブロック要素ならいいのに。

ユトピ
確かにそうかもしれないね。でも全部ブロック要素だと並べたときにそのあとのものが全部改行されて縦に並んだら面倒じゃない?

お母さん
読みづらい文章になるし、ページが長くなっちゃう!

ユトピ
意図しないところに改行が入ると見づらいよね。
そういう不都合をなくすためにもインライン要素は必要なんだよ。他にもいろいろな理由はあるけどこんな感じかな。


少々扱いにくい特徴もありますが、インライン要素のタグも非常によく使うものが多いので、必ず特徴を覚えておきましょう。


インライン要素のタグ一覧

ここではインライン要素の代表的なタグを紹介します。

  • a
  • span
  • strong
  • font
  • button
  • textarea
  • img

他にも多々ありますが、一応はこのあたりを覚えておけば大丈夫でしょう。


インライン要素のまとめ

ここでインライン要素の特徴を確認しましょう。

  • 横に並んでいく!
  • marginは左右のみ、paddingは上下左右できるけど、上下にはくせがある。
  • widthとheightは指定できない。


ブロック要素とインライン要素の注意点

ブロック要素とインライン要素には文法上の注意点があります。

ブロック要素の中にはインライン要素、ブロック要素どちらもいれることができます。
ブロック要素は箱のようなものなので、この中にはどんなタグでも入れることが可能です。


例えばこんな感じ


このようにブロック要素divタグの中に同じくdivタグを入れたりブロック要素pタグにインライン要素strongタグを入れたりすることが可能です。


次にインライン要素。

インライン要素の中にはブロック要素を入れることはできません。
インラインは行の一部であり、線のようなイメージなので、そのなかにブロック要素をいれることは文法上の誤りになりますのでやってはいけません。

しかしインライン要素の中にインライン要素は入れることはできます。

 ↑これはアカン

 ↑これはOK


ブロック要素とインライン要素はCSSで変更可能

ここまでブロック要素とインライン要素の特徴をまとめていきましたが、実はこれはCSSで変えることができます。
つまりブロック要素をインライン要素にインライン要素をブロック要素に変換することができるんです!

そのCSSプロパティは「display」というものです。
この「display」にブロック要素なら「block」インライン要素なら「inline」と値を指定すれば変換することができます。


例えばこんな感じ。

cssプロパティ「display」で要素を変更する!

「display:inline」を指定

コード

結果

ここはブロック要素だけどインライン要素になっちゃた!
ここはブロック要素だけどインライン要素になっちゃた!

「display:block」を指定

コード

結果
ここはインライン要素だけどブロック要素になっちゃた!ここはインライン要素だけどブロック要素になっちゃた!

ご覧のとおり上の「display:inline」を指定したところは、ブロック要素なのにインライン要素のように横に並んでいきます。

下の「display:block」を指定したところは、インライン要素なのにブロック要素のように縦に並んでいきます。ここでは幅と高さの指定もされています。



お母さん
なんと都合のよいことでしょう!

ユトピ
都合のよいCSS「display」


このあたりはお母さんの言う通り、都合に応じて変更していくといいですね。

ハイブリットなタグ

最後に一風変わったインライン要素のタグのご紹介。

  • img
  • input
  • textarea

このタグはインライン要素でありながら、ブロック要素のようにmarginとpaddingの上下左右の指定が可能で、width、heightの指定もできます!
そしてインライン要素なので、並べると改行はされずに横に並んでいきます。


ハイブリットなタグ

imgタグにwidth:100pxを指定

512913512913512913512913
512913512913512913512913
512913512913512913512913

このようにインライン要素のように横に並びながらも、ブロック要素のように幅や高さの指定をすることができます。
両方の特徴を併せ持ったタグもありますので、ぜひ使ってみましょう!

ちなみにCSSで指定する場合は「display」プロパティで「inline-block」を指定すれば適用することができます。


お母さん
インラインブロックちゃんはハーフみたいなものね

ユトピ
そんな感じ。マギーかわいい。


まとめ

HTMLのタグにはさまざまありますが、このブロック要素とインライン要素の特徴を知ることは今後CSSを使ってのコーディングに非常に重要なものになっていきます。

ここを理解していないと、ブロック要素なのに無理やり横に並べようとしてうまくかなかったり、インライン要素の上下の余白がうまくいかずにイライラしてしまったりといろいろ不便です。

ですがそれぞれの特徴を理解していれば文法も守りながらコーディンすることができます。

少々とっつきにくいかもしれませんが、ぜひとも覚えてもらって楽しいコーディングライフを送ってくださいね!!



質問や意見がありましたらお気軽にツイッターの方へどうぞ。


ユトピのツイッター
@yutopi60pa