ホームページの基礎（2. CSS 編） - HITP 広島工業大学専門学校

2.14 視覚表現

CSSの視覚表現には，視覚メディアを対象としたいろいろなプロパティがあります。ここでは，その中からボックスの幅と高さおよびボックスの生成自体に関連する主なプロパティについて説明します。

2.14.1 widthプロパティ

「widthプロパティ」は，ブロックレベル要素および置換要素が生成するボックスの内容領域の幅を指定します。(※ ただし，ブラウザによっては，ボーダー領域まで含めるものがあるので注意する必要があります。)その書式は以下のとおりです。

widthプロパティ
値	<長さ> \| <％値> \| auto \| inherit
初期値	auto
適用対象	非置換要素および表の行，表の行グループ要素以外のすべての要素
継承	しない
パーセント値	包含ブロックの横幅に対する割合

<長さ>: 単位付き数値で横幅を指定します。負の数を指定することはできません。
<％値>: 包含ブロックの横幅に対する比率で横幅を指定します。負の数を指定することはできません。
auto: 他のプロパティの関係により横幅が自動的に計算されます。(※ 計算ルールはかなり複雑なので割愛します。)

つぎにスタイルシートの例と，それを適用したXHTMLおよび表示結果を示します。

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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

2.14.2 heightプロパティ

「heightプロパティ」は，ブロックレベル要素および置換要素が生成するボックスの内容領域の高さを指定します。(※ ただし，ブラウザによっては，ボーダー領域まで含めるものがあるので注意する必要があります。)その書式は以下のとおりです。

heightプロパティ
値	<長さ> \| <％値> \| auto \| inherit
初期値	auto
適用対象	非置換要素および表の列，表の列グループ要素以外のすべての要素
継承	しない
パーセント値	包含ブロックの高さに対する割合(※ 包含ブロックの高さが明確でなく，その要素が絶対配置でない場合は"auto"として扱います。)

<長さ>: 単位付き数値で高さを指定します。負の数を指定することはできません。
<％値>: 包含ブロックの高さに対する比率で高さを指定します。負の数を指定することはできません。
auto: 他のプロパティの関係により高さが自動的に計算されます。(※ 計算ルールはかなり複雑なので割愛します。)

つぎにスタイルシートの例と，それを適用したXHTMLおよび表示結果を示します。

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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

2.14.3 line-heightプロパティ

「line-heightプロパティ」は，インラインボックスの高さを指定します。「"line-heightプロパティ"が，インライン要素で構成されるブロックボックス，テーブルのセル，キャプション，"inline-block"」が指定された要素に対して指定された場合は，そのインラインボックスの「最小の高さ」の指定となります。また，インライン要素に対して指定された場合は，そのインラインボックスの実際の高さを指定することになります。"line-heightプロパティ"の書式は以下のとおりです。

line-heightプロパティ
値	normal \| <数値> \| <長さ> \| <％値> \| inherit
初期値	normal
適用対象	置換要素を除く，すべての要素
継承	する
パーセント値	その要素が持つフォントサイズに対する割合

normal: 指定された要素のフォントサイズを基にUAが適当な大きさを設定します。
<数値>: 指定された要素のフォントサイズに"数値"で指定された値を乗じた値を高さとします。負の数を指定することはできません。
<長さ>: 単位付き数値で高さを指定します。負の数を指定することはできません。
<％値>: 指定された要素のフォントサイズに対する比率で高さを指定します。負の数を指定することはできません。

つぎにスタイルシートの例と，それを適用したXHTMLおよび表示結果を示します。

p {
    color: #000;
    background-color: #ccc;
    font-size: 12pt;
    line-height: 10pt;
}
em {
    color: #fff;
    background-color: #000;
    line-height: 2em;
}

<p>最小の高さが10ptの段落</p>
<p><em>em要素</em>の高さが2emの段落</p>

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

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

CSS総目次 | ページ先頭に戻る

2.14.4 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に割合を乗じた値になります。)分だけ値が正ならばインラインボックスを上げ，負ならばインラインボックスを下げます。
<長さ>: 上げ下げする値を単位付き数値で指定します。値が正ならばインラインボックスを上げ，負ならばインラインボックスを下げます。

つぎにスタイルシートの例と，それを適用したXHTMLおよび表示結果を示します。

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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

2.14.5 displayプロパティ

「displayプロパティ」は，要素が生成するボックスの種類を指定します。その書式(※ この書式は，"CSS 2.1"のものです。)は以下のとおりです。

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: 指定された要素を１つ以上のインラインボックスとして生成します。
block: 指定された要素を１つのブロックボックスとして生成します。
list-item: 指定された要素を１つのブロックボックスとマーカーのインラインボックスとして生成します。
run-in: 指定された要素を１つのランインボックス(※ 文書ツリーから子孫要素にブロックボックスを含む場合はブロックボックス，そうでなければインラインボックスとなります。)として生成します。
inline-block: 指定された要素を１つのブロックボックスとして生成しますが，そのボックス自体はインラインボックスとして配置されます。(※ "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;
}

つぎに，このスタイルシートを適用するXHTMLを記述し，その表示結果を見てみましょう。

<body>
    <ul>
        <li>項目１</li>
        <li>項目２</li>
        <li>項目３</li>
    </ul>
</body>

displayプロパティにlist-itemを指定した表示

今度は，displayプロパティの値を"inline"として，同じXHTMLを表示してみましょう。

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

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

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

CSS総目次 | ページ先頭に戻る