文字の均等割付
文字の均等割付の方法について解説します
通常のタグでは文字を均等に割り付けするのは不可能でした、しかし文字を打っていくと如何してもレイアウト的に均等にしたい場合が多々あります、タグのみで均等を実現させるには、スペースや透明画像を使うのが一般的でした、しかし、タグ以外の技術を用いる事でこの問題に終止符を打つ事が出来るようになります。
CSS(カスケードスタイルシート)と言う技術を使えば簡単に表現できてしまいます。
基本 (タグを直接打つ場合)
まずページのヘッダで均等効果を宣言する為に、<head>〜</head>の間に以下の記述をします。
<style type="text/css">
<!--
.kin {
text-align: justify;
text-justify:distribute-all-lines;
}
-->
</style>
そして、<body>以下の領域に、
<p class="kin">均等テストをしています・均等テストをしています・均等テストをしています・均等テストをしています</p>
と記述してブラウザで確認して見て下さい、ブラウザの横幅一杯に文字が均等割付されている筈です、
さらにブラウザの横サイズを縮めるとテキストが二段になっても最後の行が常に均等割付状態で対応します。
設置例.1
均等テストをしています・均等テストをしています・均等テストをしています・均等テストをしています
基本 (FrontPageExpressを使う場合)
まずページのヘッダで均等効果を宣言する為に、表示(V)⇒HTML(H)でHTMLの表示と編集画面を出して<head>〜</head>の間に以下の記述をします。
<style type="text/css">
<!--
kin {
text-align: justify;
text-justify:distribute-all-lines;
}
-->
</style>
挿入(I)⇒HTMLマークアップ(H)で直接入力画面を出します、そこへ
<p class="kin">均等テストをしています・均等テストをしています・均等テストをしています・均等テストをしています</p>
と記述してOKを押すと、FrontPageExpress編集画面に<?>このような記号が表示されます、
この記号が表示されている箇所(段落)へテキストが表示されます。
上記のメモ帳で作成した動作と同じ結果が現れます。
応用「テーブルを使用する」 (タグを直接打つ場合)
まずページのヘッダで均等効果を宣言する為に、<head>〜</head>の間に以下の記述をします、
<style type="text/css">
<!--
.kin {
text-align: justify;
text-justify:distribute-all-lines;
}
-->
</style>
そして、<body>以下の領域に
<table
border="0" width="350">
<tr>
<td>
<div class="Kin">
通常のタグでは実現できなかった均等割付をCSSを使って実現させていますIEでのみ動作します、他のブラウザでは均等にはなりません。
</div>
</td>
</tr>
</table>
と記述すると、均等割付した文字列がテーブルの中に入ります、 テーブルの横幅は350ピクセルですので、文字列は350ピクセル地点で折り返す事になり、ぐ〜っと配置し易くなります、 テーブルタグへ入れ子に出来る事で、これを使った応用が直ぐ出来ると言う事になりますね。
設置例.2
応用「テーブルを使用する」 (FrontPageExpressを使う場合)
まずページのヘッダで均等効果を宣言する為に、表示(V)⇒HTML(H)でHTMLの表示と編集画面を出して<head>〜</head>の間に以下の記述をします。
<style type="text/css">
<!--
.kin {
text-align: justify;
text-justify:distribute-all-lines;
}
-->
</style>
FrontPageExpressの 表(A)⇒表の挿入(I)で画面に表を作ります、その表の中へカーソルを持って行き、右クリックでPOPメニューを出します、
表のプロパティでレイアウトを中央へ最小幅を350ピクセルと設定したらOKを押すと350ピクセルの表が画面に出てきます、その表の中にカーソルを持って行きメニューバーの挿入(I)⇒HTMLマークアップ(H)で直接入力画面を出します、
そこへ
<div class="Kin">通常のタグでは実現できなかった均等割付をCSSを使って実現させていますIEでのみ動作します、他のブラウザでは均等にはなりません。
</div>
と記述してOKを押すと、表の中に<?>このような記号が表示されます、この記号が表示されている箇所(段落)へテキストが表示されますので、表の中に文字列が表示される事になります。
応用「座標を利用する」 (タグを直接打つ場合)
まずページのヘッダで均等効果を宣言する為に、<head>〜</head>の間に以下の記述をします
<style type="text/css">
<!--
#spn{width:350px;
position:absolute;
left:500px;
}
. kin {text-align:justify;
text-justify:distribute-all-lines;
}
-->
</style>
そして、<body>以下の領域に
<div class="kin"
id="spn">
通常のタグでは実現できなかった均等割付をCSSを使って実現させています
IEでのみ動作します、他のブラウザでは均等にはなりません。
</div>
を記述します、そうすると配置箇所はブラウザの左から500ピクセルの位置へ幅350ピクセルで配置されます、この値は<head>部分で宣言した、left:400px がブラウザ左からの位置になり、width:350px が表示幅になります。
設置例.3
応用「座標を利用する」 (FrontPageExpressを使う場合)
まずページのヘッダで均等効果を宣言する為に、表示(V)⇒HTML(H)でHTMLの表示と編集画面を出して<head>〜</head>の間に以下の記述をします
<style type="text/css">
<!--
#spn{width:350px;
position:absolute;
left:400px;
}
.kin {text-align:justify;
text-justify:distribute-all-lines;
}
-->
</style>
メニューバーの挿入(I)⇒HTMLマークアップ(H)で直接入力画面を出します、そこへ
<div class="kin" id="spn">
通常のタグでは実現できなかった均等割付をCSSを使って実現させていますIEでのみ動作します、他のブラウザでは均等にはなりません。
</div>
記述してOKを押すと、FrontPageExpress編集画面に<?>このような記号が表示されます
この記号が表示されている段落の左から400ピクセルの個所へテキストが表示されます。