視覚フォーマットモデル

display特性

要素が実際に視覚化されるときには、要素ごとに「どのようなルールで視覚 化されるか」の枠組みが決まっている。この、枠組み自体を示す特性が display特性である。

display特性

要素を視覚的にフォーマットするときの種別を決める。 設定値は以下のどれか。以下の説明で「〜〜要素のような形態」と 書いたものがあるが実際の順番は逆で、定義が先にあって その要素のフォーマットが決まる。

• block

  要素にブロックボックスを生成させる。

• inline

  要素にインラインボックスを生成させる。

• list-item

  liのような要素

• marker

  ul内のliの前に付く「・」や、ol内のliに付く番号のように 自動的に生成されるマーカーとして使われるフォーマット

• none

  ボックスを生成しない。レイアウトに全く影響を与えない。

• run-in, compact

  文脈に応じてブロックボックスかインラインボックスの いずれかに変化するフォーマット

• tableに関連する以下のどれか
  table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

  table要素を構成する各要素に相当するフォーマットを 生成させる。

display特性を変更すると、本来ブロックレベル要素であるものをインライン 要素の表示形式に変えたり、全く表示しないように変えることができる。

実際によく用いるのは特性値noneで、スタイルシートを解釈しない ユーザエージェントには表示させる一方、スタイルシートを解釈する ユーザエージェントには表示させないように自動的に切り替えるとき などに利用する。
→ 利用例

また、複数の要素を同時に配置しておいて 特定の1つ以外の要素を display=none に指定して表示要素を切り替える手法 などがある。動的に切り替える手段としてJavaScriptなどのスクリプト プログラムなどがある。

visibility特性

該当要素を(視覚的に)表示するかどうかを決定するのが visibility特性である。

visibility特性

以下の特性値により、該当要素のボックス全体を表示するか どうかを決定する。

• visible

  生成されるボックスを見えるようにする。

• hidden

  生成されるボックスを見えないようにする。 見えないようにするだけで、実際にはその場に必要な大きさの ボックスが確保される。つまり透明なものが置かれると 考えてよく、display特性をnoneにする場合とは異なる。

• collapse

  table要素で利用される。表の途中をみかけ上除去して 次の列や行を詰め、「畳み込み」を行なう。

  1	も	ど	す
  2	た	た	む
  3	き	え	る
  4	み	え	る

  2行目のどこか をクリックすると visibilityがcollapseになり畳み込まれる。 1行目のどこかをクリックすると復活する。
  また、3行目のどこかをクリックすると3行目の visibilityが hiddenになり、単に見えなくなる。4行目のどこかをクリックする と復活する。

  ただしこの効果は全ての ユーザエージェントで得られるわけではない。

overflow特性

ボックスは通常内容物の高さと幅に合わせて大きさが決まるが、 逆に視覚的に表示する物理的領域を決めておき、はみ出た部分をどのように 処理すべきか決めることができる。これを決めるのがoverflow特性 である。

overflow特性

ブロック内の要素が視覚表示的にはみ出る場合、それを 切り取るかどうかを決める。指定できる値は以下のどれか。

• visible

  ブロックボックスの外にはみ出してでも内容を 表示する。

• hidden

  はみ出た部分を切り取り、表示しない。 どの部分を切り取り、どの部分を表示するかも決定でき それにはclip特性を利用する。

• scroll

  決まった面積内ではみ出た部分も表示できるよう ボックスの脇にスクロール機構を提供する。 内容が少なくはみ出ない場合もスクロール機構を付けるようにする。

• auto

  はみ出た場合のみスクロール機構を提供するなど、 ユーザエージェントに依存した自動的な切り替えを行なう。

プログラムリストなど改行位置に意味を持つものは標準的なbody要素の 幅を超えることがある。overflow特性を用いてこれを制御する例を示す。

• overflow: visible の場合

  int main()
  {
    printf("この行はあきれるほどとても長い内容を含んでいて右側に大きくはみ出してしまいそうな予感がします。でも気にせずにどんどんいっちゃいましょう\n");
  }
  

• overflow: hidden の場合

  int main()
  {
    printf("この行はあきれるほどとても長い内容を含んでいて右側に大きくはみ出してしまいそうな予感がします。でも気にせずにどんどんいっちゃいましょう\n");
  }
  

• overflow: scroll の場合

  int main()
  {
    printf("この行はあきれるほどとても長い内容を含んでいて右側に大きくはみ出してしまいそうな予感がします。でも気にせずにどんどんいっちゃいましょう\n");
  }
  

• overflow: auto の場合

  int main()
  {
    printf("この行はあきれるほどとても長い内容を含んでいて右側に大きくはみ出してしまいそうな予感がします。でも気にせずにどんどんいっちゃいましょう\n");
  }
  

clip特性

ボックス全体のうち、指定した範囲のみを見せる場合には clip特性を利用する。

clip特性

ボックスの持つ本来の表示域を基準として、さらに そのどの範囲を表示するか決める。ただし、position特性値に absolute を持つ要素のみに適用される。指定できる値は auto と 「範囲形状表現」 であり、範囲を 限定したい場合は後者を指定する。現状では表現として 長方形範囲を決める rect() のみが規定されている。 rectは、

rect(U, R, B, L)

のような4つの長さを指定する。それぞれの値の意味は見える部分 の長方形の、上辺、右辺、下辺、左辺 の位置で、

• U

  視野となる長方形の上辺の、包含ボックスの上端からの距離

• R

  視野となる長方形の右辺の、包含ボックスの左端からの距離

• B

  視野となる長方形の下辺の、包含ボックスの上端からの距離

• L

  視野となる長方形の左辺の、包含ボックスの左端からの距離

で指定する。たとえば、

のような画像に対して、

img {position: absolute; clip: rect(50px ,200px ,130px ,35px);}

というCSSを指定すると

となる。ただし、現状ではclip特性の文法やそれに対する挙動が ユーザエージェントによってまちまちであるためCSSの段階で 指定することはあまり得策でない。