ホームページ

  • Twitter
  • Facebook
  • HATENA
  • POCKET

最近知ったテキストに関するCSSプロパティについて

目次

  1. アルファベットの頭文字だけ大文字にできる text-transform
  2. 文字詰めができちゃう font-feature-setting
  3. CSSでシェイプができちゃう background-clip
  4. まとめ
好きな炭酸ドリンクはジンジャーエールです。とらりんです。
さてさて、今回は私が最近知ったテキストに関するCSSについてです。
今頃?と思われる方も多いかと思いますが。。。
生温かい目でお見守り下さい。

アルファベットの頭文字だけ大文字にできる text-transform

text-transformは「大文字・小文字・全角文字への変換を指定する」プロパティです。
設定値は以下参照。
noneテキストを変換しない(初期値)
capitalize単語の先頭文字を大文字にする
uppercase全ての文字を大文字にする
lowercase全ての文字を小文字にする
full-width全ての文字を全角形式にする。対応する全角形式が無い場合にはそのまま表示
私がなるほど使えるなと思ったのが「capitalize」。
テンプレートでページに付与するクラス名とページタイトルを共通で指定するのだけど、クラス名は小文字でタイトル名は頭文字が大文字の場合。
例えばページのクラス名はaccessにしたいけどタイトルはAccssにしたい場合等です。
そんな時これがあれば大丈夫。なんてピンポイントな使い方!
需要は少なそうですが必要な人にはありがたいですよね。

文字詰めができちゃう font-feature-setting

font-feature-settingは「文字間隔を調整する」プロパティです。
テキストで気になる全角半角問題。
「」。、がなんか間延びして気持ちが悪いってことありますよね。
半角対策としてはフリーフォントのYaku Han JPが有名ですが、CSSでも解決できました。

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

機能名にはpalt、smcp、swsh等があり、下記サイトで詳しく紹介されています。
なんて便利なプロパティ!なのですが、環境によっては適用されない場合もあります。
確かに全く問題なければ半角フォントの必要性無いですもんね。
早く問題なく使える日が来ることを祈ります。

CSSでシェイプができちゃう background-clip

background-clipは「背景の適用範囲を指定する際に使用する」プロパティです。
このプロパティ、使い道あるかなあと思ったのですが面白いのでご紹介します。
border-box背景をボーダーボックスに適用する(初期値)
padding-box背景をパティングボックスに適用する
content-box背景をコンテントボックスに適用する
text背景をテキストに適用する
お分かりだろうか。文字で背景がシェイプされていることが。
めんどくさいこだわりの強いデザイナがテキストをグラデーションで彩った時などに使えるかもしれません。

まとめ

いかがでしたか。知らなこと、まだまだまだまだありますね。
自分自身のアップデート、どこかの誰かのアップデートのお役に立てるよう日々精進です。
  • Twitter
  • Facebook
  • HATENA
  • POCKET
  •  
  • 株式会社アイズオブシー
  • 伝わる・拡がる マンガLLP

Follow us!