ページ全体の文字間を変える
ページ全体の文字間を指定する
文字間隔を調整することができます。指定した数値はデフォルト値に対して追加されます。
下記のサンプルの{letter-spacing: 2px;} は、デフォルト値＋2pxの文字間隔になります。
スタイルシートで設定
<head>と</head>の間に下記のように記述します。
ページ全体に適用されます。
<style type="text/css">
<!--
body {letter-spacing: 2px;}
-->
</style>
<!--
body {letter-spacing: 2px;}
-->
</style>
上記の記述では、テーブル内の文字間隔は変化しないので、セル内も同時に設定したい場合は、下記のようにtdを追加してまとめて設定することができます。
<style type="text/css">
<!--
body,td {letter-spacing: 2px;}
-->
</style>
文字の大きさの単位は、他に pt pc em などがあります。<!--
body,td {letter-spacing: 2px;}
-->
</style>
私は旅行が好き。 → 文字間を2pxに指定
私は旅行が好き。 → デフォルト値
部分的に文字間を変えることもできます。
文字間を2pxにするhtml<span style="letter-spacing:2px">大切なものを見送るのは愛ではないそうよ。</span><br>
大切なものを見送るのは愛ではないそうよ。
実際のウェブ上での見え方です。大切なものを見送るのは愛ではないそうよ。
<span>で囲まれた部分の文字間が広がっています。
大切なものを見送るのは愛ではないそうよ。
大切なものを見送るのは愛ではないそうよ。
大切なものを見送るのは愛ではないそうよ。
部分的に文字間を変える（スタイルシートに記述するやり方）
<head>と</head>の間に下記のように記述します。任意のクラス名「.moji」でスタイルを記述します。
→ htmlでspanに囲まれた文字間隔が変化します。
<style type="text/css">
<!--
.moji {letter-spacing: 2px;}
-->
</style>
html
<!--
.moji {letter-spacing: 2px;}
-->
</style>
<span class="moji">大切なものを見送るのは愛ではないそうよ。</span><BR>
大切なものを見送るのは愛ではないそうよ。
実際のウェブ上での見え方です。
大切なものを見送るのは愛ではないそうよ。
大切なものを見送るのは愛ではないそうよ。
大切なものを見送るのは愛ではないそうよ。
大切なものを見送るのは愛ではないそうよ。
<span>の使い方
<div>と<span>の違い コメント（メモ） 見出しをつける 段落をつける 位置を決める
●当サイトのソースは、IE6.0＋のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。
★skip ページtop
