【CSS】CSSで文字詰めが簡単にできる！

こんにちは、プロクラスの渡辺です 🙂
今年は祇園祭をやるってニュースをみまして、なんだかうれしくなりました 😳

さて、今日はCSSのブログを書いていこうと思います！

いつも通り私のメモなのですが…よろしくおねがいします！

実は最近、ここ何年も悩み続けてとりあえずの対処としてで囲うとかしてた「文字詰め」がCSSでできるっていうのを知りまして！

しかも1行で簡単にできて今までやっていた微調整よりもはるかにhtmlもcssも少なくできてハッピーです！
「」から始まる文章とか、タイトルの時に設定すると頭がそろってきれいに見えますよ 🙂

.css {
　　font-feature-settings: "palt";
}

これだけで完了です！
め～ちゃくちゃ簡単というか、一つ一つ調整していた過去の作業が笑えてくる感じです。
長い文章とかかぎかっこのある文章、タイトルとかで使用するときれいでした。

▼【palt】を設定した文章です！

ゴーシュにめがけたまし。
「栗がとりだした。セロ、それに扉。押し出し。」
そこはたくさんのままのまた元来のうちにこすりでた。
助けは棚をご狸を押し出して楽長を工合を煮てもちろん途中弾いられるましときへなるたた。

▼何も設定していませんが、比較のためにフォントファミリーは同じものを使用しました！

どうでしょう？
「」とか　。　の余白が詰まっているのが分かると思います。
特にかぎかっこは本当に助かります…！

ただ、注意点としては「このcssが使えるフォントが限られている」ということです 😥
このブログのデフォルトフォント（メイリオ）はこのcssが効かないので上記のは游ゴシックにしています。

使えるフォントは以下の条件を満たしている必要があるようです！

※OpenTypeフォントとは、文字ごとの字詰め情報を持っているフォントのことです。また、プロポーショナルメトリクスとは、書体ごとに最適な詰め組を行うためのOpenTypeフォントの機能です。

WEBフォントは結構使えるんじゃないかなと思うんですが、私もまだ手探りで探しています 😀

すっごい便利で普段のコーディングもとても助かっています。
（最近はメイリオじゃなくて、游ゴシックやWEBフォントを使用する機会が多いので余計にありがたさを実感しています。）

ただ、paltだけだと詰まりすぎているので、私は普段一緒に「 letter-spacing」も指定するようにしています。

.css {
　　font-feature-settings: "palt";
　　letter-spacing: 1px;
}

【palt】と【letter-spacing】を設定した文章です！

より読みやすくなったんじゃないかなと思います！
もうちょっと余白が欲しいときは、letter-spacingの数値をいじって調整しています 😳

他にも「font-feature-settings」にはいろいろ設定できるみたいなのですが、とりあえずこれさえ覚えておけば面倒な文字詰めは簡単にできちゃいます！ 😆

プロクラスでは、WEB制作入門授業もあるのでもっと詳しく知りたい！勉強したい！という方におすすめです🌞
授業のことで質問があればお気軽にお問い合わせください🎵

プログラミングの入門講座やホームページの作成方法、IT業界への就職・転職、売り上げアップのためのWeb戦略や企業での研修などなんでもご相談ください。プロクラスなら、現役のITのプロから最新技術を学べます。