30代プログラム初心者がWEBエンジニアになる

30代プログラム初心者が、WEBエンジニアになるまでの奮闘を書いていきます。

letter-spacing と text-indent で等間隔で中央揃え

こんにちは、ぐっちと申します。

今回は前回書いたドロップダウンリスト作成中に、リストの文字を等間隔で表示しようとした時の話をしようと思います。

 

編集・削除という文字を下図の様に、要素の中に等間隔で配置したかったので

f:id:Yamaguchi-T:20190729193842p:plain


 とりあえず text-align: center; を当てた場合はこんな感じになる

f:id:Yamaguchi-T:20190729193119p:plain

 

半角スペースを入れてみる

f:id:Yamaguchi-T:20190729193637p:plain

 

間が狭いので全角スペースにしてみる

f:id:Yamaguchi-T:20190729193741p:plain

 やっぱり等間隔にはならないので、別の方法を考える事に……

そもそもスペースで調節するとか邪道な気がします。微調整出来ませんし……

 

調べるとテキストの文字間を指定するCSS「letter-spacing」があるみたいなので早速当ててみると……

f:id:Yamaguchi-T:20190729195019p:plain

想像していたのと違う……

どうやらこれは文字の後ろに隙間が適応されている為で

「編□集□」こんな感じになっている様です。

もうちょっと調べると「text-indent」という文章の一行目のインデント幅を指定するものがある事が分かり、「letter-spacing」と同じ値を指定して無事等間隔になりました。

f:id:Yamaguchi-T:20190729193842p:plain

 

今回は2文字でしたが、文字数が多い程有用なやり方だと思いました。

 

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています(@Yamaguc45844169