フォント・テキスト関係(2/2)

line-height、font-variant、font、text-align、vertical-align、text-indent、letter-spacing、white-space

行間を指定する

line-heightプロパティは、行の高さを指定します。単位を付けないで数値だけ指定した場合は、フォントサイズにその値を掛けた高さに設定されます。また、％単位で指定するとフォントサイズに高さの割合になります。
なお、line-heightで指定した値がfont-sizeプロパティで指定した数値よりも小さい場合は、行が重なって表示されます。

※ 文字を読みやすくするには、line-heightプロパティを使用してフォントサイズに適した数値で指定するようにします。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { line-height:normal;}
            .type2 { line-height:1.5em;}
            .type3 { line-height:200%;}
    	</style>
    

HTML

    	<p class="type1">行の高さを設定することにより文字が読みやすくなります。行の高さを設定することにより文字が読みやすくなります。</p>
    	<p class="type2">行の高さを設定することにより文字が読みやすくなります。行の高さを設定することにより文字が読みやすくなります。</p>
        <p class="type3">行の高さを設定することにより文字が読みやすくなります。行の高さを設定することにより文字が読みやすくなります。</p>
    

小文字を大文字に指定する

font-variantプロパティは、フォントをスモールキャップにするときに使用します。スモールキャップとは、小文字の表示形式が小文字サイズの大文字になっているものを指します。指定したフォントにスモールキャップがない場合は、大文字を縮小したものを小文字として表示します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { font-variant:normal;}
            .type2 { font-variant:small-caps;}
    	</style>
    

HTML

    	<p class="type1">abcDEFGhijk</p>
    	<p class="type2">abcDEFGhijk</p>
    

フォント関係をまとめて指定する

fontプロパティは、フォント関連のプロパティをまとめて指定します。サイズと行間は「/」で区切りますが、それ以外の値は半角スペースで区切ります。値は基本的に「斜体 太さ サイズ/行間 フォント名」の順に指定しますが、サイズとフォント名は省略できます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type { font:normal bold 16px/1.3em メイリオ,sans-serif;}
    	</style>
    

HTML

    	<p>fontプロパティを利用することによって、フォント関連のプロパティをまとめて指定知ることができるので便利である。</p>
    	<p class="type">fontプロパティを利用することによって、フォント関連のプロパティをまとめて指定知ることができるので便利である。</p>
    

行揃えを指定する

text-alignプロパティは行揃えを設定します。このプロパティは、ブロックレベル要素に対して指定し、その内容の行揃えを設定するものです。値には、left（左揃え）、center（中央揃え）、right（右揃え）があります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { text-align:left;}
            .type2 { text-align:center;}
            .type3 { text-align:right;}
    	</style>
    

HTML

    	<p class="type1">左揃え</p>
    	<p class="type2">中央揃え</p>
        <p class="type3">右揃え</p>
    

垂直方向の位置を指定する

vertical-alignプロパティは、指定されたインライン要素が表示される行の中で、垂直方向の位置を指定します。
このプロパティをth要素またはtd要素に指定した場合、「top」、「middle」、「bottom」でセルの上、中央、下に揃えることができます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { vertical-align:top;}
            .type2 { vertical-align:middle;}
            .type3 { vertical-align:bottom;}
    	</style>
    

HTML

    	<p>
        <img src="tree.png" />
    	<span class="type1">上揃え</span>
    	<span class="type3">下揃え</span>
        </p>
        <p>
        <img src="tree.png" />
        <span class="type2">中央揃え</span>
        </p>
    

1行目のインデントを指定する

text-indentプロパティは、ブロックレベル要素に指定して、そこに含まれるテキストの先頭の字下げ（インデント）を設定します。値にはマイナスを設定できます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p { font-family:monospace;}
            .type { text-indent:5em;}
    	</style>
    

HTML

    	<p>インデント設定なし</p>
    	<p class="type">５文字分のインデント設定</p>
    

文字の間隔を指定する

letter-spacingプロパティは、文字と文字の間隔を調整します。値は、数値で指定します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { letter-spacing:1em;}
            .type2 { letter-spacing:22px;}
    	</style>
    

HTML

    	<p class="type1">文字の間隔</p>
    	<p class="type2">文字の間隔</p>
    

空白や改行の表示方法を指定する

white-spaceプロパティは、ソース内のスペース（空白）や改行の表示方法を指定します。値を「pre」にすると、連続する半角スペースやタブ、改行を入力されている通りにそのまま表示されます。値を「nowrap」にすると、連続する半角スペースやタブ、改行を一つの半角スペースに変換して、改行せずに表示します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p {width:200px;background-color:#fde;}
            .type1 { white-space:normal;}
            .type2 { white-space:pre;}
    	</style>
    

HTML

    	<p class="type1">ここで改行します。
        改行、半角スペース、ボックス内で自動改行しているか？</p>
    	<p class="type2">ここで改行します。
        改行、半角スペース、ボックス内で自動改行しているか？</p>