記事の監修者
コンテンツの横幅、高さを調整したいのに、どうしてもうまくいかない。
CSSがうまくいかないから、とりあえず他のプロパティで無理やり実装した。
このような経験はありませんか？
その問題、2つの要素の違いについて理解すれば解決することができます！
HTML要素の性質
HTML要素の基本性質は以下2つです。
・ブロックレベル
・インライン
まずは2つの違いを理解しましょう。
※今回は「性質」として紹介していますが、「ブロックレベル要素」のように「要素」と表現されることもあります。大きな違いはないので、同じものとしていただいて構いません。
ブロックレベル要素
要素は横いっぱいに広がり、次の要素は改行されます。
CSSで横幅、高さの指定が可能です。
代表的なタグ
・article
・div
・p
・h1〜h6
これらのタグは、大きなまとまりやブロックを形成する際に使います。
インライン要素
要素は必要な幅しか広がりません。
次の要素は改行されず、横に配置されていきます。
CSSで横幅、高さの指定はできません。また、縦方向の余白が効きません。
代表的なタグ
・a
・span
・small
・strong
基本的に文章中の一部分を装飾する際に使います。
※ よく使うimgタグはインラインの性質をもちますが「置換要素」と呼ばれる例外的な要素であるため、widthやheight、余白などが設定できます。
ブロックレベルとインラインの違いを理解することは、コーディング上達において必須です。
実際にHTMLを書いたりCSSを当ててみるとより理解が深まるのでおすすめです。
