HTMLとCSSの使い方で、多い質問がインライン要素とブロック要素です。
例えばdivやsection、ulやdlなどは、ブロック要素にあたります。
spanやstrongなどは、インライン要素にあたります。
でも、これらをブロックとインラインに分ける意味は何でしょうか？
なんとなく存在は知っていても、概念がはっきりしない方も多いと思います。
そこで、今回はブロック要素とインライン要素について、説明させて頂きます。
ブロック要素について
ブロック要素とは、コンテンツのエリアを作る要素です。
例えば、メイン画像、ニュース一覧、ブログの記事詳細、ヘッダー、フッター、もっと細かい単位でのコンテンツを含め、ある一定領域を囲うタグがブロック要素にあたります。
ブロック要素の特徴としては、使うと次のコンテンツが改行されます。
CSSで何か特殊な処理をしない限り、改行は必ず発生します。
headerやfooterタグ、divやsectionタグなどは、全て使うと改行されますよね。
これらは、コンテンツを囲うブロック要素です。
ただ、全てのブロック要素を覚える必要はありません。
なんとなく、ブロック要素とはこういうものだという概念を覚えておけばOKです。
インライン要素について
インライン要素は、基本的に文章中、文字の一部を装飾するタグです。
例えば、ある文章があって、特定の単語だけ赤くしたい場合がありますよね。
そんな時、spanタグ等で囲んで、classをつけて装飾することになります。
もしブロック要素を使ってしまったら、改行されてややこしくなるでしょう。
だから、インライン要素では改行されません。
そう考えると「インラインである」という意味も、明確になるのではないでしょうか。
インライン要素は基本的にpaddingやmarginが効きません。
float含め、多くのcssタグが効かないものと考えましょう。
基本的には文章中の言葉を修飾するものです。
インライン要素にcssを上手く効かせるには、ある指定をする必要があります。
対象の要素にcssでinline-blockを指定することです。
すると、inline要素の改行されない特徴を残しながら、cssを効かせられます。
なお、最低限覚えておくべきインライン要素は下記の2つです。
まず、spanタグです。
<span>〜〜〜〜</span>
これだけでは、特に何もおきません。
CSSで装飾して、初めて意味がうまれます。
そして、bタグです。
<b>〜〜〜〜〜</b>
こちらは、太字になるタグです。
基本的に、この2つを覚えておきましょう。
何度も試して、自由に使い分けられるように慣れてみてください。