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

 

やぁ僕(@yutopi60pa)だよ。
 
 

 
 

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

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

 
 

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

 

ブロック要素とは？

 

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

 

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

 

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

 

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

 

例えばこんな感じ。

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

 
 

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

 
 

margin、paddingが指定できる！

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

 

 
 

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

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

 
 

 
 

ブロック要素のタグ

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

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

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

 
 

ブロック要素のまとめ

 

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

 

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

 

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

 
 

インライン要素とは？

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

 

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

 
 

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

 
 

 
 

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

 
 

例えばこんな感じ。

 
 

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

 
 

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

 

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

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

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

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

 
 

例えばこんな感じ

 

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

 
 

widthとheightは指定できない

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

 
 

例えばこんな感じ。

上の図だとオレンジ背景のインライン要素に幅と高さともに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」と値を指定すれば変換することができます。

 
 

例えばこんな感じ。

 

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

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

 
 

 
 

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

ハイブリットなタグ

 

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

• img
• input
• textarea

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

 
 

 

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

 

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

 
 

まとめ

 

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

 

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

 

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

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

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

 
ユトピのツイッター
@yutopi60pa