14. 視覚表現
視覚表現には、視覚メディアを対象としたいろいろなプロパティがある。ここでは、そのボックスの幅と高さおよびボックスの生成自体に関する 主要なプロパティについて説明する。
widthプロパティ
「widthプロパティ」は、ブロックレベル要素および置換要素が生成するボックスの内容領域の幅を指定する。(※ ただし、ブラウザによっては、ボーダー領域まで含めるものがあるので注意すること。)その書式は以下のとおりである。
widthプロパティ | |
---|---|
値 | <長さ> | <%値> | auto | inherit |
初期値 | auto |
適用対象 | 非置換要素および表の行、表の行グループ要素以外のすべての要素 |
継承 | しない |
パーセント値 | 包含ブロックの横幅に対する割合 |
- <長さ>
- 単位付き数値で横幅を指定する。負の数を指定することはできない。
- <%値>
- 包含ブロックの横幅に対する割合で横幅を指定する。負の数を指定することはできない。
- auto
- 他のプロパティの関係により横幅が自動的に計算される。(※ 計算ルールはかなり複雑なので割愛する。)
つぎにスタイルシートの例と、それを適用したHTMLおよび表示結果を示す。
p#a1 {
width: 100px;
color: #fff;
background-color: #000;
}
p#a2 {
width: 80%;
color: #fff;
background-color: #000;
}
<p id="a1">幅が100pxの段落</p>
<p id="a2">幅が80%の段落</p>
heightプロパティ
「heightプロパティ」は、ブロックレベル要素および置換要素が生成するボックスの内容領域の高さを指定する。(※ ただし、ブラウザによっては、ボーダー領域まで含めるものがあるので注意すること。)その書式は以下のとおりである。
heightプロパティ | |
---|---|
値 | <長さ> | <%値> | auto | inherit |
初期値 | auto |
適用対象 | 非置換要素および表の列、表の列グループ要素以外のすべての要素 |
継承 | しない |
パーセント値 | 包含ブロックの高さに対する割合(※ 包含ブロックの高さが明確でなく、その要素が絶対配置でない場合は"auto"として扱います。) |
- <長さ>
- 単位付き数値で高さを指定する。負の数を指定することはできない。
- <%値>
- 包含ブロックの高さに対する割合で高さを指定する。負の数を指定することはできない。
- auto
- 他のプロパティの関係により高さが自動的に計算される。(※ 計算ルールはかなり複雑なので割愛する。)
つぎにスタイルシートの例と、それを適用したHTMLおよび表示結果を示す。
p#a1 {
width: 200px;
height: 20px;
color: #fff;
background-color: #000;
}
p#a2 {
width: 80%;
height: 50px;
color: #fff;
background-color: #000;
}
<p id="a1">幅が200px高さ20pxの段落</p>
<p id="a2">幅が80%高さ50pxの段落</p>
line-heightプロパティ
「line-heightプロパティ」は、インラインボックスの高さを指定する。"line-heightプロパティ"が、インライン要素で構成されるブロックボックス、テーブルのセル、キャプション、"inline-block"が」指定された要素に対して指定された場合は、そのインラインボックスの「最小の高さ」の 指定となる。また、インライン要素に対して指定された場合は、そのインラインボックスの実際の高さを指定することになる。"line-heightプロパティ"の書式は以下のとおりである。
line-heightプロパティ | |
---|---|
値 | normal | <数値> | <長さ> | <%値> | inherit |
初期値 | normal |
適用対象 | 置換要素を除く、すべての要素 |
継承 | する |
パーセント値 | その要素が持つフォントサイズに対する割合 |
- normal
- 指定された要素のフォントサイズを基にUAが適当な大きさを設定する。
- <数値>
- 指定された要素のフォントサイズに"数値"で指定された値を乗じた値を高さとする。負の数を指定することはできない。
- <長さ>
- 単位付き数値で高さを指定する。負の数を指定することはできない。
- <%値>
- 指定された要素のフォントサイズに対する割合で高さを指定する。負の数を指定することはできない。
つぎにスタイルシートの例と、それを適用したHTMLおよび表示結果を示す。
p {
color: #000;
background-color: #ccc;
font-size: 12pt;
line-height: 10pt;
}
em {
color: #fff;
background-color: #000;
line-height: 24pt;
}
<p>最小の高さが10ptの段落</p>
<p><em>em要素</em>の高さが2emの段落</p>
ここで注意しなければならないのは、あくまでもインラインボックスあるいはラインボックスの高さを設定することであり、 その要素の内容領域の高さではない。また、フォントサイズも拡大、縮小されたりはしないことだ。
vertical-alignプロパティ
「vertical-alignプロパティ」は、ラインボックス内におけるインラインボックスの垂直位置を指定する。 その書式は以下のとおりである。
vertical-alignプロパティ | |
---|---|
値 | baseline | sub | super | top | text-top | middle | bottom | text-bottom| <%値> | <長さ> | inherit |
初期値 | baseline |
適用対象 | インラインレベル要素、表セル要素 |
継承 | しない |
パーセント値 | その要素が持つ"line-heightプロパティ"に対する割合 |
- baseline
- インラインボックスのベースラインを親ボックスのベースラインに揃える。 インラインボックスにベースラインが存在しない場合、親ボックスのベースラインにインラインボックスのマージン辺を揃える。
- sub
- インラインボックスのベースラインを親ボックスの下付き添字の適当な位置まで下げる。 要素のフォントサイズには、影響しない。
- super
- インラインボックスのベースラインを親ボックスの上付き添字の適当な位置まで上げる。 要素のフォントサイズには、影響しない。
- middle
- インラインボックスの中心線を親ボックスのベースラインから英小文字"x"の半分の高さ(※ "0.5ex"ということ。)だけ上げる。
- text-top
- インラインボックスの上辺を親ボックスの内容領域の上辺に揃える。
- text-bottom
- インラインボックスの下辺を親ボックスの内容領域の下辺に揃える。
- top
- インラインボックスの上辺をラインボックスの上辺に揃える。
- bottom
- インラインボックスの下辺をラインボックスの下辺に揃える。
- <%値>
- "line-heightプロパティ"に対する割合を指定し、その値(※ line-heightに割合を乗じた値。)分だけ 値が正ならばインラインボックスを上げ、負ならばインラインボックスを下げる
- <長さ>
- 上げ下げする値を単位付き数値で指定する。 値が正ならばインラインボックスを上げ、負ならばインラインボックスを下げる
つぎにスタイルシートの例と、それを適用したHTMLおよび表示結果を示す。
body {
background-color: #000;
}
p {
color: #000;
background-color: #fff;
font-size: 20pt;
border: 10px solid #ccc;
}
em {
color: #fff;
background-color: #000;
font-size: 0.5em;
font-style: normal;
}
em#baseline { vertical-align: baseline; }
em#sub { vertical-align: sub; }
em#super { vertical-align: super; }
em#middle { vertical-align: middle; }
em#text-top { vertical-align: text-top; }
em#text-bottom { vertical-align: text-bottom; }
em#top { vertical-align: top; }
em#bottom { vertical-align: bottom; }
<body>
<p>
glx
<em id="baseline">baseline</em>
<em id="sub">sub</em>
<em id="super">super</em>
<em id="middle">middle</em>
<em id="text-top">text-top</em>
<em id="text-bottom">text-bottom</em>
<em id="top">top</em>
<em id="bottom">bottom</em>
</p>
</body>
displayプロパティ
「displayプロパティ」は、要素がどのようなボックスを生成するかを指定する。 その書式(※ この書式は、"CSS 2.1"のものである。実際の使用に際しては、"inline"、"block"、"list-item"、"list-item"の4種類ぐらいが大体サポートされている。 また、このプロパティ自体を実装していないブラウザも存在する。)は以下のとおりである。
displayプロパティ | |
---|---|
値 | inline | block | list-item | run-in | inline-block| table | inline-table | table-row-group | table-header-group| table-footer-group | table-row | table-column-group| table-column | table-cell | table-caption| none | inherit |
初期値 | inline |
適用対象 | すべての要素 |
継承 | しない |
パーセント値 | 受けつけない |
- inline
- 指定された要素を1つ以上のインラインボックスとして生成する。
- block
- 指定された要素を1つのブロックボックスとして生成する。
- list-item
- 指定された要素を1つのブロックボックスとマーカーのインラインボックスとして生成する。(※ (X)HTMLのli要素に相当する。)
- run-in
- 指定された要素を1つのランインボックス(※ 文書ツリーから子孫要素にブロックボックスを含む場合はブロックボックス、そうでなければインラインボックスとなる。)として生成する。
- inline-block
- 指定された要素を1つのブロックボックスとして生成するが、そのボックス自体はインラインボックスとして配置される。(※ "CSS 2.1"で追加されたプロパティであり、置換要素に類似した働きをするものである。)
- none
- 指定された要素のボックスを生成しない。また、その子孫要素のボックスも生成しない。 そのため"none"が指定された要素は「非表示」となる。
なお、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、 table-column-group、table-column、table-cell、table-captionのテーブル(表)に関連する各プロパティについては、 テーブルに関する他のプロパティとともに後述する。
では、li要素を使った例を示す。まずは、一般的なブラウザの状態、 すなわち、"list-item"が指定されているスタイルシートを記述する。
li {
display: list-item;
border: 1px solid #000;
}
つぎに、このスタイルシートを適用するHTMLを記述し、その表示結果を見てみよう。
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
今度は、displayプロパティの値を"inline"にして、同じHTMLを表示してみる。
li {
display: inline;
border: 1px solid #000;
}
このように(X)HTMLのリスト構造という文書における論理構造に変化はないが、 視覚的に、つまり文書の物理構造としては、まったく異なる表現が可能となる。(※ この手法は、メニューバーを構築する場合の基礎となるものである。)