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>

widthプロパティのサンプル表示

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>

heightプロパティのサンプル表示

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>

line-heightプロパティのサンプル表示

ここで注意しなければならないのは、あくまでもインラインボックスあるいはラインボックスの高さを設定することであり、 その要素の内容領域の高さではない。また、フォントサイズも拡大、縮小されたりはしないことだ。

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>

vertical-alignプロパティのサンプル表示

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プロパティにlist-itemを指定した表示

今度は、displayプロパティの値を"inline"にして、同じHTMLを表示してみる。

li {
    display: inline;
    border: 1px solid #000;
}

displayプロパティにinlineを指定した表示

このように(X)HTMLのリスト構造という文書における論理構造に変化はないが、 視覚的に、つまり文書の物理構造としては、まったく異なる表現が可能となる。(※ この手法は、メニューバーを構築する場合の基礎となるものである。)

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.