ホーム >>> HTML整理ノート

letter-spacing　文字間隔

設定値
＜normal＞･･･(初期値)プラウザ標準の文字間隔
＜数値＞･･･cm，mm，em，pxなどの単位で指定（%指定はできない）
＊マイナス(-)指定すれば，文字がダブッて表示される。

Sample

letter-spacing 文字間隔は設定されていない

letter-spacing 文字間隔を3pxに設定

letter-spacing 文字間隔を3mmに設定

letter-spacing 文字間隔を0.6cmに設定

letter-spacing 文字間隔を1emに設定

letter-spacing 文字間隔を-1pxに設定

あっはっは！ワッハッハ！
Script プロパティ･･･＜letterSpacing＞

CSS　letterSpacing

伸びて縮んで、また伸びて！

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var spac = 1;   　　　//文字間隔(letter-spacing)
var flg = true; 　　　//ﾌﾗｸﾞ変数(拡大／縮小を切り替える)
function letterSpac(){
　　if(flg){
        p1.style.letterSpacing = spac;
        p2.style.letterSpacing = spac;
        spac += 1;     　　　　　　　　 //文字間隔を1増加
        if(spac > 13){flg = false;}     //ﾌﾗｸﾞ変数を切り替え
　　}else{
        p1.style.letterSpacing = spac;
        p2.style.letterSpacing = spac;
        spac -= 1;
        if(spac < 0){flg = true;}
　　}
    setTimeout("letterSpac()",100); 　　 //0.1秒間隔で実行
}
//--></script>
</head>

<body onload="letterSpac();">
<p>letter-spacing 文字間隔は設定されていない</p>
<p style="letter-spacing:3px">letter-spacing 文字間隔を3pxに設定</p>
<p style="letter-spacing:3mm">letter-spacing 文字間隔を3mmに設定</p>
<p style="letter-spacing:0.6cm">letter-spacing 文字間隔を0.6cmに設定</p>
<p style="letter-spacing:1em">letter-spacing 文字間隔を1emに設定</p>
<p style="letter-spacing:-1px">letter-spacing 文字間隔を-1pxに設定</p>
<MARQUEE style="letter-spacing:8mm">あっはっは！ワッハッハ！</MARQUEE>

<p id="p1" style="color:green;font:16 'Comic Sans MS','ＭＳ 明朝';">
　　　　　　CSS　letterSpacing</p>
<p id="p2" style="color:blue;font:14 'ＭＳ 明朝';" align="right">
　　　　　　伸びて縮んで、また伸びて！</p>