CSSの基礎 No.3 ブロック要素とインライン要素、CSSの継承

CSSの基礎を新人に会社で教えることになった。そこで、ちょっと勉強したのでその記録に。

スタイルシートを適用する方法(CSSの基礎 No.1 適用方法)

指定した要素に適用する方法(CSSの基礎 No.2 セレクタ)

スタイルシートのサイズを小さくするために, 選択子をコンマ区切りのリストでグループ化できる。

  H1, H2, H3 { font-family: helvetica }

同様に, 宣言もグループ化できる。

  H1 {
    font-weight: bold;
    font-size: 12pt;
    line-height: 14pt;
    font-style: normal;
  }

固有のグループ化構文をもつ特性もある。

  H1 { font: bold 12pt/14pt }

この例は, その前の例に等価となる。 しかし、可読性のためにグループ化構文を使わない方がよいことがある。

marginプロパティはグループ化構文を使って記述されることが多い。

  div{
    margin-top:10px;
    margin-bottom:10px;
    margin-right:10px;
    margin-left:10px;
  }

   /* 上下左右を10ピクセルのマージンをとる。*/
  div { margin:10px; }

   /* 上下に10ピクセル、左右に10ピクセルのマージンをとる。*/
  div { margin:10px 10px; }
  
   /* 上に10ピクセル、左右に10ピクセル、下に10ピクセルのマージンをとる。*/
  div { margin:10px 10px 10px; }

  /* 上に10ピクセル、右に10ピクセル、下に10ピクセル、左に10ピクセルのマージンをとる。*/  
  div { margin:10px 10px 10px 10px; } 

ブロック要素

ブロック要素とは言葉の通り、一かたまりで表示される要素のことである。

主なブロック要素は，div, h1～h6, p, blockquote,hr,リスト,テーブル、フォームなどがある。

ブロック要素は積み上げる感じ……実際には下にブロックを追加させていくイメージを持てばよい。

ブロック要素は横の幅(width)と高さ(height)を持つことができる。

インライン要素

インライン要素とは必ずブロック要素の中に収まらなければならない要素のことである。

主なインライン要素は，span, a, em, strongなどがある。

インライン要素は同一ブロックに並べて記述できるイメージを持てばよい。

インライン要素は横の幅(width)と高さ(height)を持つことができない。

特殊なインライン要素（インラインブロック要素）

インラインブロック要素とはインライン要素のように同一ブロックに表示されるが、幅(width)や高さ(height)を持つ要素である。

主なインラインブロック要素は，img,button,input,object,selectなどがある。

• ブロック要素の中にブロック要素を収めることはできる。
• インライン要素の中にブロック要素を収めることはできない。

displayプロパティ

ブロック要素をインラインのように扱うプロパティとして、displayがある。

通常のdiv要素

ブロック1
ブロック2

通常のブロック要素の場合は下にブロックが追加されていく。

display:inlineを用いたdiv要素

<div style="display:inline;">

ブロック1
ブロック2

display:inlineを用いたブロック要素の場合はインライン化され、同一ブロック（同一行）内にブロックが追加されていく。

通常のspan要素

span1span2

通常のインライン要素の場合は同一ブロック（同一行）内に内容が追加されていく。

display:block;を用いたspan要素

<span style="display:block;">

span1span2

display:blockを用いたインライン要素の場合はブロック化され、下に内容が追加されていく。

ある要素に設定されたスタイルは、その子要素にも引き継がれれる。 さらに、子要素には子要素の持つ独自のスタイルが追加（上書き）される。

  p {
    font-size: 12pt;
    font-style: normal;
    color:#888888;
  }
  span {
    font-weight: bold;
    color:#ff2222;
  }

 テスト：<p style="font-size: 14pt;font-style: normal;color:#888888;">これは
 <span style="font-weight:bold;color:#882222;">継承</span>
 のテストです。</p>：テスト

 テスト：
これは継承のテストです。
：テスト

上記の例では、p要素にフォントのサイズとフォントのスタイル、文字色を灰色に指定している。その子要素のspan要素には、フォントを太字にし、文字色を赤色に指定している。

span要素の中はフォントのサイズを継承したまま、フォントが太字となり、文字色は灰色から赤色に上書きされている。

font-sizeで%指定やem指定を行う場合には注意をして欲しい。2em（文字の2倍）を指定した場合、2emに2emを継承すると4em(文字の4倍)で表示されてしまう。

  p {
    font-size: 2em;
    font-style: normal;
    color:#888888;
  }
  span {
    font-size: 2em;
    font-weight: bold;
    color:#ff2222;
  }

p要素の2em、span要素の2em、p要素の2emとなっている場合。

 テスト：
<p style="font-size: 2em;font-style: normal;color:#888888;">これは</p>
<span style="font-size: 2em;font-weight:bold;color:#882222;">継承</span>
<p style="font-size: 2em;font-style: normal;color:#888888;">のテストです。</p>
 ：テスト

 テスト：
これは
継承
のテストです。
：テスト

p要素の2emの子要素としてspan要素の2emとなっている場合。

 テスト：
<p style="font-size: 2em;font-style: normal;color:#888888;">これは
<span style="font-size: 2em;font-weight:bold;color:#882222;">継承</span>
のテストです。</p>
 ：テスト

 テスト：
これは継承のテストです。
：テスト

プロパティに inherit を指定することで親要素の値を明示的に継承する指定ができる。 継承される値が相対値の場合は、絶対値に変換された値が継承される。

p要素の2em。子要素としてinheritをもつspan要素の場合。

 テスト：
<p style="font-size: 2em;font-style: normal;color:#888888;">これは
<span style="font-size: inherit;font-weight:bold;color:#882222;">継承</span>
のテストです。</p>
 ：テスト

 テスト：
これは継承のテストです。
：テスト

p要素の2em。子要素としてinheritをもつspan要素の場合は2em（を絶対値に変換した値）として引き継いでくれる。

プロパティによって継承の有無が異なる。継承すると崩れてしまうようなプロパティは継承しない。例えばborderが継承された場合、線だらけになるため、このborderプロパティは子要素には継承しない。

CSS Dencitieと言うサイトにプロパティごとの継承の有無について詳細に掲載されている。