地味に役立つテキストに関するCSSプロパティについて

好きな炭酸ドリンクはジンジャーエールです。とらりんです。

さてさて、今回は私が最近知ったテキストに関するCSSについてです。

知っていると意外と役立つ場面がありそうです。

text-transformは「大文字・小文字・全角文字への変換を指定する」プロパティです。

設定値は以下参照。

私がなるほど使えるなと思ったのが「capitalize」。

テンプレートでページに付与するクラス名とページタイトルを共通で指定するのだけど、クラス名は小文字でタイトル名は頭文字が大文字の場合。

例えばページのクラス名はaccessにしたいけどタイトルはAccssにしたい場合等です。

そんな時これがあれば大丈夫。なんてピンポイントな使い方！

需要は少なそうですが必要な人にはありがたいですよね。

font-feature-settingは「文字間隔を調整する」プロパティです。

テキストで気になる全角半角問題。

「」。、がなんか間延びして気持ちが悪いってことありますよね。

半角対策としてはフリーフォントのYaku Han JPが有名ですが、CSSでも解決できました。

font-feature-settings: 機能名 有効or無効;

機能名にはpalt、smcp、swsh等があり、下記サイトで詳しく紹介されています。

https://ics.media/entry/14087/

なんて便利なプロパティ！なのですが、環境によっては適用されない場合もあります。

確かに全く問題なければ半角フォントの必要性無いですもんね。

早く問題なく使える日が来ることを祈ります。

background-clipは「背景の適用範囲を指定する際に使用する」プロパティです。

このプロパティ、使い道あるかなあと思ったのですが面白いのでご紹介します。

MDNの記事　https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

お分かりだろうか。文字で背景がシェイプされていることが。

めんどくさいこだわりの強いデザイナがテキストをグラデーションで彩った時などに使えるかもしれません。

いかがでしたか。知らなこと、まだまだまだまだありますね。

自分自身のアップデート、どこかの誰かのアップデートのお役に立てるよう日々精進です。