CSSを学ぶ。ブロックの概念と『display』を学ぶ。

CSSを学ぶ。ブロックの概念と『display』を学ぶ。

CSSをやっていくに当たって、重要な概念を説明します。

それが『ブロック』です。

ブロックって何?

HTMLやCSSでコーディングする時には『一つの纏まり』を作っていくことがコツなんだよ。
その『一つの纏まり』のことを『ブロック』と呼んでいるよ!

フレージングコンテンツとそれ以外のフローコンテンツは標準の表示形式が違います。

フレージングコンテンツは『ブロック』では無いよ。
そしてそれ以外のフローコンテンツは『ブロック』だよ。

それが「どの様なことか」ということを初心者向けに解説していきます。

『ブロック』の持つ2つの特徴

ブロックには2つの特徴があります。

  • 高さと幅を画面いっぱいに持った矩形(角が尖った長方形)を形成する。
  • 次の要素は改行されて新しい行から始まる。

それではこの特徴を生かして実験を交えながら解説していきます。

この特徴はすごく大切だから、この特徴を覚えて次の項目の話を聞いてね。

P要素は改行されるがspan要素は改行されない。

少し実験をしてみましょう。

以下のようにHTMLを書いてみて下さい。

HTML

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
 <meta charset=”UTF-8″>
 <title>ぱくぱくのCSS講座</title>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
 <body>
    <p>ぱくぱくブログ</p>
    <p>ぱくぱくブログ</p>
    <span>ぱくぱくブログ</span>
    <span>ぱくぱくブログ</span>
    <span>ぱくぱくブログ</span>
 </body>
</html>

ブラウザ表示

P要素で書かれた文章は改行されています。

しかし、span要素で書かれた文章は改行されていません。

これでP要素はブロック要素であることがわかります。

また、span要素はブロック要素ではないことが分かります。

ブロック要素とそうでない要素の違い

ブロック要素は、高さや横幅を指定できます。

またブロック要素は、一つの纏まりとして認識されます。

しかしフレージングコンテンツ(そうでない要素)は高さや横幅を指定することが出来ません。

これがどういう事かというと、『フレージングコンテンツはコンテンツの分しか高さや幅を持たない』という事なのです。

少し実験をしてみましょう。

以下のようにCSSを書いてみて下さい。

CSS

p{
    background-color: lightblue;
    width: 200px;
    height: 50px;
}

span{
    background-color: lightblue;
    width: 200px;
    height: 50px;
}

これは背景色(background-color:)を指定して、横幅(width:)と高さ(height:)を指定したものです。

このCSSでの指定結果をブラウザで見てみましょう。

P要素で書かれた文章には高さと横幅が指定できているのに対して、span要素で書かれた文章には指定が反映されていませんね。

フレージングコンテンツは蛍光ペンで文字を引いた感じになるね。

このようにフレージングコンテンツは高さや横幅を指定することが出来ません。

しかし表示形式をブロックに変えると、ブロックとして扱われます。

こんなフレージングコンテンツも魔法をかけると『ブロック』に変わるんだ!

表示形式をブロックに変える

フレージングコンテンツのデフォルトは『inline』に設定されています。

これが俗にいうインライン要素たる所以(ゆえん)です。

高さや横幅など一つのまとまりとして扱いたい場合には、以下の2つの方法があります。

  • 表示形式をブロックに指定する
  • 親要素にブロック要素を使う

表示形式をブロックに指定する

ここで使用されるのが『display: block;』です。

早速先程のCSSに、追記してみましょう。

CSS

p{
    background-color: lightblue;
    width: 200px;
    height: 50px;
}

span{
    display: block;
    background-color: lightblue;
    width: 200px;
    height: 50px;
}

そしてこれをブラウザで確認してみると、、、

このように『display: block;』を使うことで、インライン要素はブロック要素として扱われるようになります。

すごい!
『ブロック』になった!!

『親要素にブロック要素を使う』方法については『HTMLを学ぶ。』編で是非勉強してみて下さい。

親要素がブロック要素だと、子要素はこのブロック要素を引き継ぐよ。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事