インライン要素とブロックレベル要素

その前に、ブロックレベル要素って何？っていう人のためにおさらいです。まず、Webサイトは、HTMLで書かれていますよね。HTML は、タグ（[p] とか [img /] とか）をいっぱい並べて書きますが、そのタグは大きく分けてインライン要素とブロックレベル要素というものに分けられます。

インライン要素

インライン要素のよく使う代表選手といえば、[a] タグ、[strong] タグ、[img]タグなどがありますよね。 インライン要素は、基本的に 2つ以上続けて書いても横に並んでいきます。

インライン要素の特徴

特別なインライン要素 img、input、textarea

 

ブロックレベル要素

続けて書いても横に並ぶインライン要素に対して、ブロックレベル要素は続けて書いても横に並びません。ブロックレベル要素は、その横幅に関係なく、どんどん下にレイアウトされていきます。
ブロックレベル要素の代表選手、h1 ~ h6 の見出しを続けて書けば、以下のように下へどんどんレイアウトされていきます。

 

 

margin の相殺

レイアウトを組むときに注意したいことに、margin の相殺があります。これは 1番目のブロックレベル要素の margin-bottom と、次にレイアウトした margin-top の間で起こります。言葉だと分かりにくいので、下の図を見てくださいね。

 

 

 

インライン要素をブロックレベル化

インライン要素やブロックレベル要素の代表的な特徴を見てきましたけど、display プロパティを使うと、その特徴がちょっと変化します。 display: block とか、display: inline とかいうやつです。よく見かけますよね。 そうするとどうなるか、ちょっと見ていきましょう。
ブロックレベル化っていう言葉は適切じゃないかもしれないけど、便宜上 display: block の事を、ブロックレベル化って表現させてくださいね。 下の例は、もともとインライン要素の [a] タグを、ブロックレベル化して、いろんなスタイルを指定してみました。ただのリンクがボタンになっちゃいます。

まるでブロックレベル要素のように扱えるようになる

ブロックレベル化した[a]タグ

 

ブロックレベル要素をインライン化

 

display: inline で並べると隙間ができる

 

 

 

インライン化したブロックレベル要素の誤解

 

 

フロートさせたブロックレベル要素のあれこれ

CSS でレイアウトを作るときに、頻繁に使うフロート。フロートした時のブロックレベル要素の特徴には、以下のようなものがあります。

float させると、width を失う

通常ブロックレベル要素は、特に width を指定しない場合、親要素いっぱいに広がりますよね。でも float させるとちょっと事情が変わってきます。 ブロックレベル要素は、float させると幅を失うというか、内包する要素の幅に依存するようになります。

フロートした子要素の高さは含めないんです

ブロックレベル要素の特徴として、フロートした子要素の高さを、親要素では含めないというルールがあります。言葉では難しいので …。

 

 

 

 

 

 

 

左フロートさせた要素の後続の要素はこうなってます

下の例みたいに、画像を左フロートさせてレイアウトすることってよくありますよね！でも、float した要素に続く要素ってどうなってるんでしょう …。

見出しのボーダーや背景が、画像の後ろに隠れる

float させた画像のあとに、float させてない見出しと

タグを書くと、下記のようにに表示されます …。見出しにはピンクの border-left を指定してあるのですが … （文法的には見出しの前に画像がきて変なんですけど、サンプルということで！）