【CSS】字間のサイズを調節するletter-spacingで遊んでみます
どうも！LSSです！！
CSSにはアニメーションやグラデーション、HTML要素を傾けたりするtransformなど、派手な効果を持つ物が多数あります。
が、本来、Webページは「文書」を記述するものであって、その「文書」を見やすく調節するためのCSSプロパティも用意されています。
今回はそんなCSSプロパティのひとつ、「letter-spacing」をご紹介しつつ、最後にはやっぱりアニメーションで遊んでみましたｗ
字間のサイズを調節する、letter-spacing
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(無設定)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(10px)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(5px)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(0px)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(1em)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(2em)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.05em)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.1em)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.2em)
百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.5em)
コード
<p>百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(無設定)</p>
<hr />
<p style="letter-spacing: 10px;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(10px)</p>
<hr />
<p style="letter-spacing: 5px;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(5px)</p>
<hr />
<p style="letter-spacing: 0px;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(0px)</p>
<hr />
<p style="letter-spacing: 1em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(1em)</p>
<hr />
<p style="letter-spacing: 2em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(2em)</p>
<hr />
<p style="letter-spacing: -0.05em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.05em)</p>
<hr />
<p style="letter-spacing: -0.1em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.1em)</p>
<hr />
<p style="letter-spacing: -0.2em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.2em)</p>
<hr />
<p style="letter-spacing: -0.5em;">百聞は一見に如かず、早速letter-spacingの使用例を見てみましょう！(-0.5em)</p>
<hr />
書式
letter-spacing:字間のサイズ;
で、文字と文字の間の隙間の広げたり狭めたりできます。
サイズ指定はpx（ピクセル）やem（1em＝1文字の大きさ）など様々な単位を使う事ができます。
※ただし、emは文字の「高さ」のサイズであって、横幅とは一致しません。
サンプルのように、小数やマイナスの値を指定する事もでき、マイナスの値を指定した場合には文字が詰まった感じになったり、重なって判読できなくなったりします。
アニメーションにしてみるとこんな感じ
Little Strange Software
コード
<style>
@keyframes ltrspca{
0%,50%,100%{letter-spacing:0.1em;}
60%,80%{letter-spacing:-0.3em;}
70%{letter-spacing:40em;}
90%{letter-spacing:1em;}
}
.ltrspc{
height:2em;
padding:0.5em;
overflow:hidden;
animation:ltrspca 10s linear 0s infinite;
}
</style>
<div class="ltrspc">Little Strange Software</div>
コードをコピペしてから、赤文字部分を好きな言葉に変えて使う事ができます^^
ただ演出の都合上、「はみ出した部分は表示しない」overflow:hidden;を使用しているため、画面幅の狭いスマホ環境では横がはみ出した部分は表示されないため、スマホでも見られるようにするにはこの程度の長さに抑えておくのが良いかと思われます。
あとがき
元々、フォントごとの字間は読みやすい適切なサイズとなっていますが、レイアウトの都合や好みの問題で変更したい場合にはこの「letter-spacing」プロパティで調整する事ができます。
このletter-spacingは横の隙間を調節するものですが、縦の隙間を調節する「line-height」というプロパティもあるので、縦横ともに好みで調節する事ができますね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
