HOME

テキストのスタイル

デフォルトの表示

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

CSS

行の高さを変更

body {
	line-height: 1.5em;
	}

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

▲このページのトップへ

font-familyプロパティ

body {
	font-family: Georgia, Times, serif;
	}

上記のサンプルの解説:Georgiaフォントを使用してすべてのテキストを表示する。ユーザがGeorgiaフォントをインストールしていない場合には、Timesを使用する。ユーザがTimesフォントもインストールしていない場合は、デフォルトのserifフォントを使用する。

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

スペースを含むフォント名

名前を引用符で囲む。
日本語フォント名も同様。全角、半角をそのとおりに表記する。

body {
	font-family: "メイリオ", "MS Pゴシック", sans-serif;
	}

▲このページのトップへ

カーニング(またはletter-spacing)

カーニングとは、タイポグラフィの世界で文字間の間隔を示すのに使用する用語で、これに相当するCSSプロパティはletter-spacingである。
タイトルの文字間を詰めるには、マイナスのletter-spacingを適用する。

h1 {
	letter-spacing: -2px;
	}

The Prayer of St.Francis of Assisi

正の値を指定し、読みやすくなるようイタリック体で表示する。

h1 {
	letter-spacing: 3px;
	font-style: italic;
	}

The Prayer of St.Francis of Assisi

▲このページのトップへ

ドロップキャップ

ドロップキャップとは、段落にある先頭の一文字を大きく表示し、デザインにメリハリをつける手法のことを言い、印刷物では普通である。
これを、画像なしで、CSSだけで実現する。

.drop {
	float: left;
	font-size: 400%;
	line-height: 1em;
	margin: 4px 10px 10px 0;
	padding: 4px 10px;
	border: 2px solid #ccc;
	background: #eee;
	}

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

いくつかのモダンブラウザ(Windows版IE5.5以降、Netscape6以降、Opera6以降、Mozilla、Macintosh版IE5、Safariなど)は:first-letter疑似要素を使って最初の文字にアクセスできるため、余分な<span>要素を追加する必要がない。
ただし、日本語の文字の場合文字化けを起こす危険性がある。

▲このページのトップへ

行揃え

印刷の世界に発想を得たもので、テキストに両端揃えを適用することができる。
さらに、タイトルを中央揃えにするために、<h1>要素にtext-alignプロパティを追加する。

body {
	text-align: justify;
	}
h1 {
	text-align: center;
	}

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

※日本語の場合は必ずしも両端がそろうとは限らない。

▲このページのトップへ

テキストの変形

マークアップ

<h1>The Prayer of St.Francis of Assisi</h1>

CSSでtext-transformプロパティを使用すれば、マークアップを変更しなくてもタイトル全体を大文字化(または小文字化)することができる。

CSS

h1 {
	letter-spacing: 3px;
	font-style: italic;
	text-align: center;
	text-transform: uppercase;
	}

The Prayer of St.Francis of Assisi

スモールキャップ

スモールキャップは大文字を小さくしたような形を持つフォントである。
日本語に対してこのプロパティを適用することは意味がない。

h1 {
	letter-spacing: 3px;
	font-style: italic;
	text-align: center;
	font-variant: small-caps;
	}

The Prayer of St.Francis of Assisi

▲このページのトップへ

パラグラフのインデント

text-indentプロパティにプラスの値を設定すると1行目のテキストがその分だけインデントされる。
単位にemを使用すれば、ユーザがフォントサイズを増減する場合にも適切に反映される。

p {
	text-indent: 3em;
	}

The Prayer of St.Francis of Assisi

Lord, make me an instrument of your peace, Where there is hatred, let me sow love; where there is injury, pardon; where there is doubt, faith; where there is despair, hope; where there is darkness, light; where there is sadness, joy;

O Divine Master,  grant that I may not so much seek to be consoled as to console; to be understood as to understand; to be loved as to love.

For it is in giving that we receive; it is in pardoning that we are pardoned; and it is in dying that we are born to eternal life.

▲このページのトップへ