Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

文字の水平位置指定

■ 文字の水平位置指定(行揃え指定)

文字の行揃えを設定します。

値には、次のような指定方法あります。

justifyは均等割付を行う値ですが、実際はtext-alignプロパティ単体では動作しません。均等割付については、次の「文字の均等割付」の項で説明します。

■ 作例

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css>
<title>文字の垂直位置指定</title>
<style type="text/css">
<!--
.sample1  {text-align:left; color:red}
.sample2  {text-align:right; color:green}
.sample3  {text-align:center; color:blue}
-->
</style>
</head>
<body>
<p class="sample1">
text-align:left 左寄せを指定</p>
<p class="sample2">
text-align:right 右寄せを指定 </p>
<p class="sample3">
text-align:center センタリングを指定 </p>
</body>
</HTML>

text-align:left 左寄せを指定

text-align:right 右寄せを指定

text-align:center センタリングを指定

■ 行揃えを指定するHTMLタグをCSSに改める

HTMLタグで文字の行揃えを指定するには、次のようにalign属性を利用します。

HTMLタグのalign属性の多くは、Deprecated(推奨しない)とされており、行揃えはスタイルシートで指定することが推奨されています。また、スタイルシートなら上記以外の要素の行揃えを指定することも可能です(ただし、ブロックレベル要素のみ)。同様の効果をスタイルシートで表現すると以下のようになります。

<<<戻る
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial