文字間隔のCSS

　前からyoruno3さんの詩で文字を1文字づつ動かしたいなと思っていました。しかし、一文字づつspanタグで囲まなければいけないので、CSSのコードが膨大になります。どうしようかと思ってCSSの辞典を見ていたら、文字間隔を調整できるCSSを見つけました。

　コードは

　　　letter-spacing

です。これを使うとワードの文字間隔の設定と同じように、広くしたり狭くしたりできます。例えば、文字間隔を1文字にするためは

　　　letter-spacing: 1em;

という具合です。emは1文字の大きさという意味です。

　これでおもしろいのはマイナスの値が取れるんです。マイナスにすると文字が重なります。例えば

 　　letter-spacing: -1em;　

にすると、文字を１文字に重ねることができます。ワードではマイナスは取れません。ちょっと面白いです。普通はマイナスの文字間隔なんて考えませんが、開発した人はなにか理由があったのでしょうね。

　このCSSコードのおかげで１行を横に伸ばしたり縮めたりできるようになり、表現の幅が広がりました。文字を一か所に集めてしまうのはかなり面白いと思っています。いま、三種類ほどポエムマッピングで使うことを考えています。でき上がったら次回にオープンします。


　



　　
　



るのでできそうもありません。