ブロックレベル要素とインラインレベル要素の違いとは？　～ポイントは改行の有無～

ブロックレベル要素とインラインレベル要素の違いとは？

　ＨＴＭＬタグに関する重要な分類として、ブロックレベル要素とインラインレベル要素の２つの分類をおさえておく必要があります。特にリンクをロールオーバーボタンのように加工していく際には避けて通れない概念です。

ブロックレベル要素

原則として前後に改行が入る一まとまりの要素。幅と高さを指定できる。

＜ブロックレベル要素のサンプル＞

　前後に改行が入るため、縦に一つずつ並びます。

インラインレベル要素

文字と同じレベルで扱われる要素。原則として前後に改行は入らない。幅と高さは指定できない。

＜インラインレベル要素のサンプル＞

　前後に改行が入らないので、横一列に並びます。

ブロックレベルからインラインレベルへの変換ができる？！

　スタイルシートを使うと、ブロックレベル要素のタグでもインラインレベル要素へ変換することができます。もちろん逆も可能です。

インラインレベル要素をブロックレベル要素に変換

　リンクタグをブロックのように縦に並べてナビゲーション用のボタンを作るときなどによく使うスタイルシートです。

＜インラインレベル→ブロックレベル＞

インラインレベル要素の画像タグをCSSでブロックレベルに変換したサンプルです。前後に改行が入るため、縦に一つずつ並ぶようになります。

ブロックレベル要素をインラインレベル要素に変換

　リストのテキストに付けたリンクでナビゲーション用ボタンを作るときなどによく使うスタイルシートです。

＜ブロックレベルからインラインレベルへの変換サンプル＞

　ブロックレベル要素をインラインレベル要素に変換すると、高さと幅を指定できなくなり、さらに横一列に並ぶようになります。