TOP  »  スタイルシート(CSS)  »  Text - テキスト

Text - テキスト

参考:CSS Text Level 3

direction
文字表記の方向

データなし

direction: ltr | rtl | inherit

directionプロパティは、文字表記の方向(右→左、左→右)を指定します。 すべての要素に指定可能です。 例えば、日本語は文字表記の方向が「左→右」なのでltr、アラビア語は文字表記の方向が「右→左」なのでrtlになります。 デフォルトは、ltr(左→右)です。

directionプロパティをspan要素などのインライン要素に指定する場合は注意が必要です。 directionプロパティだけでなく、併せてunicode-bidiプロパティbidi-override(上書き)を指定してください。

《directionプロパティの値》
説明
ltr左→右に文字を表記する(デフォルト)。
rtl右→左に文字を表記する。
inherit親要素のスタイルを継承する。
※directionプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
<style type="text/css">
	/* メールアドレスのスパム対策 */
	/* 「右→左」に記述したメールアドレスを「右→左」に表示 */
	address span.backwards {
		direction:rtl;
		unicode-bidi:bidi-override;
	
		font-style:italic;
	}
</style>

<address>連絡先:<span class="backwards">pj.oc.niamod@egoh</span></address>
連絡先:pj.oc.niamod@egoh
このページの先頭へ

unicode-bidi
unicodeの文字表記の方向

データなし

unicode-bidi: normal | embed | bidi-override

unicode-bidiプロパティは、Unicodeの文字表記の方向を上書きする際に使用します。 すべての要素に指定可能です。 デフォルトは、normalです。

《unicode-bidiプロパティの値》
説明
normal言語に応じて適切に表示する(デフォルト)。
embedUnicodeによる文字表記の方向設定を変更する。
bidi-overrideUnicodeによる文字表記の方向設定を無効にし、文字表記の方向はdirectionプロパティで指定した値を適用する。日本語の表記を逆方向にしたい場合は、この値を指定する。
inhrit親要素のスタイルを継承する。
※unicode-bidiプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。
<style type="text/css">
	p.embed {
		direction:rtl;
		unicode-bidi:embed;
	}
	p.override {
		direction:rtl;
		unicode-bidi:bidi-override;
	}
</style>

<p class="embed">"Teacher" is "&#1605;&#1615;&#1583;&#1614;&#1585;&#1616;&#1617;&#1587;&#1612;" in the Arabia language.</p>
<p class="override">"Teacher" is "&#1605;&#1615;&#1583;&#1614;&#1585;&#1616;&#1617;&#1587;&#1612;" in the Arabia language.</p>

"Teacher" is "مُدَرِّسٌ" in the Arabia language.

"Teacher" is "مُدَرِّسٌ" in the Arabia language.

このページの先頭へ

writing-modeCSS3~
縦書き表示

データなし

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | ihnerit
IE 5.0+対応

writing-modeプロパティは、テキストを縦書きにします。 すべての要素に指定可能です。

《writing-modeプロパティの値》
説明
lr-tb横書き(左→右、上→下)
rl-tb横書き(右→左、上→下)
tb-rl縦書き(上→下、右→左)
bt-rl縦書き(下→上、右→左)

縦書き表示

<style type="text/css">
	div.tategaki {
		writing-mode:tb-rl;  /* 縦書き */
	}
</style>

<div class="tategaki">テキストを縦書きにします。</div>
テキストを縦書きにします。
このページの先頭へ

letter-spacing
文字間隔

データなし

letter-spacing: normal | <length> | <%>

letter-spacingプロパティは、文字の間隔を指定します。 すべての要素に指定可能です。 デフォルトは、normalです。

《letter-spacingプロパティの値》
説明
normal通常の文字間隔(デフォルト)。
<length>em、pxなど。
※%指定不可。
※負の値指定可。
inherit親要素のスタイルを継承する。
※letter-spacingプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
<style type="text/css">
	.space1 {
		letter-spacing:1.2em;  /* em指定(1em=1文字) */
	}
	.space2 {
		letter-spacing:-2px;  /* px指定 */
	}
</style>

<div class="space1">
	文字間隔を1.2emにしました。<br />
	文字間隔を1.2emにしました。<br />
	文字間隔を1.2emにしました。
</div>

<br />

<div class="space2">
	文字間隔を-2pxにしました。<br />
	文字間隔を-2pxにしました。<br />
	文字間隔を-2pxにしました。
</div>
文字間隔を1.2emにしました。
文字間隔を1.2emにしました。
文字間隔を1.2emにしました。

文字間隔を-2pxにしました。
文字間隔を-2pxにしました。
文字間隔を-2pxにしました。
このページの先頭へ

line-height
行間隔

データなし

line-height: normal | <number> | <length> | <%> | inherit

line-heightプロパティは、行の高さを指定します。 すべての要素に指定可能です。 デフォルト値は、normal(自動調整)です。

《line-heightプロパティの値》
説明
normal自動調整(デフォルト値)。
数値文字サイズに数値を乗算した高さ。
<長さ>em、pxなど。
<%>文字サイズを基準に%指定。
inherit親要素のスタイルを継承する。
※line-heightプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
<style type="text/css">
	.line1 { line-height:1.5em; }	/* em 指定(1em = 1文字) */
	.line2 { line-height:90%; }	/* パーセント指定 */
</style>

<div class="line1">
	行間隔を1.5にしました。<br />
	行間隔は1.4~1.5くらいが文章が読みやすくなります。<br />
	行間隔を狭すぎても広すぎても読みずらいので適度に開けましょう。
</div>

<br />

<div class="line2">
	行間隔を90%にしました。<br />
	行間隔が狭いと文章が読みやずらいです。<br />
	行間隔は気持広めくらいにとった方が読みやすくなります。
</div>
行間隔を1.5にしました。
行間隔は1.4~1.5くらいが文章が読みやすくなります。
行間隔を狭すぎても広すぎても読みずらいので適度に開けましょう。

行間隔を90%にしました。
行間隔が狭いと文章が読みやずらいです。
行間隔は気持広めくらいにとった方が読みやすくなります。
このページの先頭へ

text-align
水平方向の整列位置

データなし

text-align: start | end | left | right | center | justify | <string>

text-alignプロパティは、ブロック内でのテキストの左右整列位置を指定します。 すべての要素に指定可能です。 デフォルトは、startです。

《text-alignプロパティの値》
説明
start先頭。
end末尾。
left左揃え。
center中央寄せ(センタリング)。
right右揃え。
justify両端揃え。
<文字列>
<table border="1" style='width:100%;'>
	<tr height="50"><td style="text-align:start;">text-align: start;</td></tr>
	<tr height="50"><td style="text-align:end;">text-align: end;</td></tr>
	<tr height="50"><td style="text-align:left;">text-align: left;</td></tr>
	<tr height="50"><td class="text-align:center;">text-align: center;</td></tr>
	<tr height="50"><td class="text-align:right;">text-align: right;</td></tr>
	<tr height="50"><td class="text-align:justify;">text-align: justify;</td></tr>
</table>
text-align: start;
text-align: end;
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
このページの先頭へ

text-decoration
文字装飾

データなし

text-decoration: none | underline | overline | line-through | blink

text-decorationプロパティは、テキスト部分の装飾を指定します。 すべての要素に指定可能です。 デフォルトは、none(装飾なし)です。

《text-decorationプロパティの値》
説明
none装飾なし(デフォルト)
underlineテキストに下線を付ける。
overlineテキストに上線を付ける。
line-throughテキストに打ち消し線を付ける。
blinkテキストを点滅させる。
※IE未対応。
inhrit親要素のスタイルを継承する。
※text-decorationプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。
<style type="text/css">
	.deco_none { text-decoration:none; }
	.deco_under { text-decoration:underline; }
	.deco_over { text-decoration:overline; }
	.deco_through { text-decoration:line-through; }
	.deco_blink { text-decoration:blink; font-weight:bold; }
</style>

<p class="deco_none">text-decoration:none;</p>
<p class="deco_under">text-decoration:underline;</p>
<p class="deco_over">text-decoration:overline;</p>
<p class="deco_through">text-decoration:line-through;</p>
<p>Netscape、FireFox などのブラウザでは、<span class="deco_blink">この部分</span>が点滅します。IEではサポートされていません。 </p>

text-decoration:none;

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

Netscape、FireFox などのブラウザでは、この部分が点滅します。IEではサポートされていません。

line-through(打消線)の使用例

<style type="text/css">
	.old_price { text-decoration:line-through; }	/* 打ち消し線 */
	.new_price { color:red; font-weight:bold; }
</style>

キャンペーン中につき、
<span class="old_price">5,000円</span> → 
<span class="new_price">1,980円</span>でご奉仕!
キャンペーン中につき、 5,000円 →  1,980円でご奉仕!
このページの先頭へ

text-indent
先頭行のインデント

データなし

text-indent: [ <length> | <%> ] hanging?

text-indentプロパティは、ブロック内の先頭行のインデント(字下げ)を指定します。 ブロックレベル要素、インラインレベル要素、テーブルのセルにのみ指定可能です。 デフォルトは0(インデントなし)です。

《text-indentプロパティの値》
説明
<length>em、pxなど(デフォルトは0)。
<%>親ブロックを基準に%指定。
inherit親要素のスタイルを継承する。
※text-indentプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。

段落の字下げ

<style type="text/css">
	.indent {
		text-indent:1em;    /* 1文字分インデント */
		line-height:1.5em;  /* 行間隔1.5文字分 */
	}
</style>

<p class="indent">日本語の場合はインデントするなら「em」単位で指定しましょう。1文字分なら「1em」、2文字分なら「2em」を指定します。ついでに、文章を読みやすくする為に、line-height:1.5em;」などのように行間隔を気持広めに指定しておくと良いでしょう。</p>

日本語の場合はインデントするなら「em」単位で指定しましょう。1文字分なら「1em」、2文字分なら「2em」を指定します。ついでに、文章を読みやすくする為に、line-height:1.5em;」などのように行間隔を気持広めに指定しておくと良いでしょう。

注釈の※印

<style type="text/css">
	/* 左余白を1文字分とり、インデントをマイナス1文字分するのがポイント */
	p.kome {
		padding-left:1em;
		text-indent:-1em;
	}
	/* 1文字目の※印を赤色に */
	p.kome:first-letter {
		color:red;
	}
</style>

<p class="kome">※注釈などで「※印」をつける時に、2行目以降がインデントされてたらいいなと思うことはありませんか?テーブルで括ると面倒ですよね。そんな時、余白とインデントを上手く組み合わせれば簡単にできますよ。</p>

※注釈などで「※印」をつける時に、2行目以降がインデントされてたらいいなと思うことはありませんか?テーブルで括ると面倒ですよね。そんな時、余白とインデントを上手く組み合わせれば簡単にできますよ。

このページの先頭へ

text-transformCSS3~
テキストの大文字化

データなし

text-transform: none | capitalize | uppercase | lowcase

text-transformプロパティは、テキストの大文字化を指定します。 すべての要素に指定可能です。 デフォルトは、none(大文字化しない)です。

《text-transformプロパティの値》
説明
none大文字化しない(デフォルト)。
capitalize各単語の最初の文字を大文字にする。
uppercase各単語のすべての文字を大文字にする。
lowercase各単語のすべての文字を小文字にする。
inherit親要素のスタイルを継承する。
※text-transformプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
<p style="text-transform:capitalize;">happy birthday to you!</p>
<p style="text-transform:uppercase;">happy birthday to you!</p>
<p style="text-transform:lowercase;">HAPPY BIRTHDAY TO YOU!</p>

happy birthday to you!

happy birthday to you!

HAPPY BIRTHDAY TO YOU!

このページの先頭へ

text-justifyCSS3~
テキストの均等割付形式

データなし

text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | tibetan

text-justifyプロパティは、テキストの均等割付形式を指定します。 すべての要素に指定可能です。 デフォルトは、autoです。

《unicode-bidiプロパティの値》
説明
autoブラウザに依存(デフォルト)。
inter-word単語間隔が均等になるように調整。
inter-ideograph
inter-cluster
distribute
kashida
inhrit親要素のスタイルを継承する。
<div id="d_textjustify">
	<p style="text-justify:auto;">text-justify:auto;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:inter-word;">text-justify:inter-word;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:inter-ideograph;">text-justify:inter-ideograph;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:distribute;">text-justify:distribute;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:newspaper;">text-justify:newspaper;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:inter-cluster;">text-justify:inter-cluster;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
	<p style="text-justify:kashida;">text-justify:kashida;<br />正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。</p>
</div>

text-justify:auto;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:inter-word;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:inter-ideograph;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:distribute;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:newspaper;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:inter-cluster;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

text-justify:kashida;
正式名称は「カスケーディング・スタイルシート(Cascading Style Sheet)」。略して「スタイルシート」や「CSS」などと呼ばれています。スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。

このページの先頭へ

text-overflowCSS3~
テキストのあふれ方

データなし

text-overflow: clip | ellipsis | ellipsis-word | inherit

ブロック要素からテキストがあふれる場合の表示方法を指定します。 デフォルトは「clip」(切り抜き)です。 ブロックレベル要素にのみ指定可能です。

<style type="text/css">
#d_textoverflow p {
	white-space:nowrap;
	width:7em;
	overflow:hidden;
	border:1px solid #ccc;
}
#d_textoverflow p:hover {
	text-overflow:inherit;
	overflow:visible;
}
</style>
<div id="d_textoverflow">
	<p style="text-overflow:ellipsis;">text-overflow:ellipsis;</p>
	<p style="text-overflow:clip;">text-overflow:clip;</p>
	<p style="text-overflow:ellipsis-word;">text-overflow:ellipsis-word;</p>
</div>

text-overflow:ellipsis;

text-overflow:clip;

text-overflow:ellipsis-word;

このページの先頭へ

text-shadowCSS3~
テキストに影を付ける

データなし

text-shadow: none | [<shadow>, ] * <shadow>

text-shadowプロパティは、テキストに影効果を付けます。 <影>には、[<color> <length> <length> <length>? | <length> <length> <length>? <color>?]を指定可能です。 すべての要素と生成されたコンテンツに指定可能です。 デフォルトは、none(影なし)です。

テキストの右下に2px影を付け、2pxぼかすには、text-shadow: 2px 2px 2px #000;のように指定します。

<style type="text/css">
#d_textshadow {
	font-family:"Trebuchet MS","Century Gothic",helvetica,arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
#d_textshadow .glow {
	color:#fff;
	background:#fff;
	text-shadow:0 0 10px #333;
}
#d_textshadow .shadow {
	color:#333;
    text-shadow:2px 2px 2px #999;
}
#d_textshadow .fire {
	margin:10px; padding:30px 30px 10px 30px;
	background:#000;
	color:#fff;
	font-size:30px;
	text-shadow:#fff 0 0 4px, #ff3 0 -5px 4px, #fd3 2px -10px 6px, #f80 -2px -15px 11px, #f20 2px -25px 18px;
}
</style>
<div id="d_textshadow">
	<span class="glow">Text-Shadow</span>
	<span class="shadow">影付きテキスト</span>
	<div class="fire">TOOOOOO! HOT! OMG!</div>
</div>
Text-Shadow 影付きテキスト
TOOOOOO! HOT! OMG!
このページの先頭へ

white-space
空白の扱い

データなし

white-space: normal | pre | nowrap | pre-wrap | pre-line

white-spaceプロパティは、テキストの空白文字の表示方法を指定します。 ブロックレベル要素にのみ指定可能です。 デフォルトは、normal(複数のスペースを1つとする)です。

《white-spaceプロパティの値》
説明
normal複数のスペースを1つとする(デフォルト)。
pre複数のスペースをそのまま表示する。
nowrap折り返さない。
inherit親要素のスタイルを継承する。
※white-spaceプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。

preの使用例

ブロック要素にwhite-space:preを指定すると、pre要素と同じになります。 <br />を記述しなくても、改行が見たまま表示されます。 widthで幅を指定している場合、指定した幅で折り返されますが、指定していない場合は、折り返されません。

<style type="text/css">
	div.ws_pre {
		white-space:pre;  /* 複数のスペースをそのまま表示 */
		width:90%;
		padding:1em;
		background-color:#ffffcc;
		font-family:monospace;
	}
</style>

<div class='ws_pre'>&lt;style type='text/css'&gt;
div.ws_pre {
	white-space:pre;
	padding:1em;
	width:90%;
	background-color:#ffffcc;
}
&lt;/style&gt;</div>
<style type='text/css'> div.ws_pre { white-space:pre; padding:1em; width:90%; background-color:#ffffcc; } </style>

nowrapの使用例

HTML :: <td nowrap="nowrap">

<p style="white-space:normal; background-color:#ffffcc;">
	何も指定しないので折り返しされます。
	何も指定しないので折り返しされます。
	何も指定しないので折り返しされます。
</p>

<p style="white-space:nowrap; background-color:#ffffcc;">
	nowrapを指定しているので折り返しされません。
	nowrapを指定しているので折り返しされません。
	nowrapを指定しているので折り返しされません。
</p>

何も指定しないので折り返しされます。 何も指定しないので折り返しされます。 何も指定しないので折り返しされます。

nowrapを指定しているので折り返しされません。 nowrapを指定しているので折り返しされません。 nowrapを指定しているので折り返しされません。

このページの先頭へ

word-spacing
単語間隔

データなし

word-spacing: normal | <length>

word-spacingプロパティは、単語と単語の間隔を指定します。 すべての要素に指定可能です。 デフォルトは、normal(通常の単語間隔)です。

《word-spacingプロパティの値》
説明
normal通常の単語間隔(デフォルト)。
<length>em、pxなど。
※%指定不可。
inherit親要素のスタイルを継承する。
※word-spacingプロパティは子要素に継承されます。子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
<style type="text/css">
	.wsp1 { word-spacing:1em; }	/* 単語間隔を1文字分に揃える */
	.wsp2 { word-spacing:5px; }	/* 単語間隔を5pxに揃える */
</style>

<p class="wsp1">PHP & JavaScript Room</p>
<p class="wsp2">PHP & JavaScript Room</p>

PHP & JavaScript Room

PHP & JavaScript Room

このページの先頭へ

word-breakCSS3~
非CJKスクリプトの改行間隔

データなし

word-break: normal | break-all | keep-all | hyphenate
IE 5.0+対応

word-breakプロパティは、単語内での改行方法を指定します。 すべての要素と生成されたコンテンツに指定可能です。 デフォルトは、normal(改行しない)です。

《word-breakプロパティの値》
説明
normal日本語の単語の途中の文字が行末にきた場合、その位置で改行し、英語は単語の前後で改行する(デフォルト)。
break-all言語を問わず、単語の途中の文字が行末に来た場合、その位置で改行する。
keep-all言語を問わず、単語の前後で改行する。
hyphenate

break-allの使用例

<style type="text/css">
	div.break_all {
		word-break:break-all;  /* 単語の途中でも改行 */
	}
</style>

<div class="break_all">
	word-breakにbreak_allを指定すると、日本語も英語も、単語の途中の文字が行末に来た場合、その位置で改行されます。
</div>

IEでの表示のされ方IEでの表示のされ方

keep-allの使用例

<style type="text/css">
	div.keep_all { word-break:keep-all; }	/* 単語の途中で改行しない */
</style>

<div class="keep_all">
	word-breakにkeep-allを指定すると、日本語も英語も、単語の途中では改行せずに、単語の前後で改行されます。
</div>

IEでの表示のされ方IEでの表示のされ方

このページの先頭へ

word-wrapCSS3~
単語の改行方法

データなし

word-wrap: normal | break-word

word-wrapプロパティは、単語の途中で改行する可動化を指定します。

《word-wrapプロパティの値》
説明
normal単語の途中では改行しない。
break-word必要に応じて、単語の途中で改行します。
<style type="text/css">
.d_wordwrap1 {
	width:150px;
	background:#ddeef6;
	word-wrap:normal;
}
.d_workdwrap2 {
	width:150px;
	background:#ddeef6;
	word-wrap:break-word;
}
</style>

<p class="d_wordwrap1">
「PHP & JavaScript Room」(http://phpjavascriptroom.com/)では、PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。
</p>
<p class="d_wordwrap2">
「PHP & JavaScript Room」(http://phpjavascriptroom.com/)では、PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。
</p>

「PHP & JavaScript Room」(http://phpjavascriptroom.com/)では、PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。

「PHP & JavaScript Room」(http://phpjavascriptroom.com/)では、PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。

このページの先頭へ

vertical-align
垂直方向の整列位置

データなし

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <%> | inherit

vertical-alignプロパティは、インラインレベル要素の親要素(ボックス要素)における上下方向の表示位置を指定します。 行内レベル要素およびth要素、td要素に指定可能です。 デフォルト値は、baseline(親要素の基準位置に揃える)です。

《vertical-alignプロパティの値》
説明
baseline親要素の基準位置に揃える(デフォルト値)。
top基準位置を親要素の上ラインに揃える。
middle基準位置を親要素の垂直方向の中央ラインに揃える。
bottom基準位置を親要素の下ラインに揃える。
text-top基準位置を親要素のフォントの上ラインに揃える。
text-bottom基準位置を親要素のフォントの下ラインに揃える。
super基準位置を親要素の上付き文字の位置に揃える。
sub基準位置を親要素の下付き文字の位置に揃える。
<長さ>px、emなど。 ※負の値指定不可。
<%>親要素を基準に%指定。
inhrit親要素のスタイルを継承する。
※vertical-alignプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。
<table border="1" style="width:100%;">
	<tr style="height:50px;"><td style='vertical-align:baseline;'>vertical-align:baseline ;</td></tr>
	<tr style="height:50px;"><td style='vertical-align:top;'>vertical-align:top;</td></tr>
	<tr style="height:50px;"><td style='vertical-align:middle;'>vertical-align:middle;</td></tr>
	<tr style="height:50px;"><td style='vertical-align:bottom;'>vertical-align:bottom;</td></tr>
	<tr style="height:50px;"><td>標準位置<span style='vertical-align:text-top;'>vertical-align:text-top;</span></td></tr>
	<tr style="height:50px;"><td>標準位置<span style='vertical-align:text-bottom;'>vertical-align:text-bottom;</span></td></tr>
	<tr style="height:50px;"><td>標準位置<span style='vertical-align:super;'>vertical-align:super;</span></td></tr>
	<tr style="height:50px;"><td>標準位置<span style='vertical-align:sub;'>vertical-align:sub;</span></td></tr>
</table>
vertical-align:baseline ;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
標準位置vertical-align:text-top;
標準位置vertical-align:text-bottom;
標準位置vertical-align:super;
標準位置vertical-align:sub;
<style type="text/css">
	.wave         { font-weight:bold; letter-spacing:0.5; padding:0 0 2em 0; }
	.wave span.v1 { vertical-align: 6px; }
	.wave span.v2 { vertical-align: 12px; }
	.wave span.v3 { vertical-align: -6px; }
	.wave span.v4 { vertical-align: -12px; }
</style>

<div class="wave">
P
<span class="v1">H</span>
<span class="v2">P</span>
<span class="v1">&amp;</span> J
<span class="v3">a</span>
<span class="v4">v</span>
<span class="v3">a</span>
<span class="v1">S</span>
<span class="v2">c</span>
<span class="v1">r</span>i
<span class="v3">p</span>
<span class="v4">t</span> R
<span class="v2">o</span>
<span class="v1">o</span> m
</div>
P H P & J a v a S c ri p t R o o m
このページの先頭へ
Q. このサイトの情報はお役に立ちましたでしょうか?

     

投票する | 投票結果を見る | 管理人に【web拍手】を送る web拍手(1行メッセージも送れます♪)

1契約で容量を気にせず複数サイトを運営するなら、ヘテムルがおすすめ!

ヘテムル」は、国内最大級の個人向けホスティングサービス『ロリポップ!レンタルサーバー』を運営する株式会社paperboy&co.の提供する大容量・高機能のレンタルサーバー。

独自ドメイン50個、データベース10個までを、追加費用無料で設定できます。
しかも、サーバー容量は余裕の10GB

動画配信・音源配信・ポッドキャスティングなど、Flash、音楽、動画ファイル等をふんだんに使って、自由にWEBサイトを表現することが可能です。 また、マルチドメイン、マルチデータベース、共有SSLなどサイト運営に大変便利な機能や、FlashMediaServer、ColdFusionなど他にはないユニークな機能を搭載。 もちろん、MovableTypeやWordPress、Xoopsといった各種webアプリケーション、CGI、 Perl、PHP4、PHP5、Rubyなどの各種開発言語にも対応しています。

実際にファイルをアップしたりできる15日間のお試し期間があるので、借りてから「サイトを移植してみたらプログラムが動かなかったー(><)」なんてことにはなりません♪