【業務向け】あまり知られていない便利なCSSプロパティと関数と疑似クラス

cssテクニック ホームページ制作

CSS3って意外と知られてなかったりするプロパティがあります。

ここ数年はずっと忙しかったせいかCSS3のプロパティってどれよ!って感じで、特に勉強もせずあんまり使ってませんでした。
ベテランの人の方が逆に知らないなんてこともあるかもしれない。

意外と知られてないけど、めっちゃ便利なプロパティと関数、疑似クラスを紹介します。
※随時更新していきます。

HTML5&CSS3辞典

便利すぎるCSS3プロパティ

CSS3のプロパティは便利すぎるので使わない手はありません。

  • pointer-events
  • font-feature-settings
  • counter-increment、counter-reset、content:counter
  • object-fit
  • position sticky

イベント打消しのプロパティ「pointer-events」

pointer-eventsはイベント関連のプロパティです。
aタグだけどリンクさせたくない場合もこれを使います。

使用用途

  • セレクトボタンのデザイン
  • アコーディオンタイプの親メニューのリンク打消し

テキストのカーニング「font-feature-settings」

テキストのカーニングをする時に使います。
カナだけ、英数記号のカーニングとあります。

使用用途

  • カンマの隙間が気になる
  • ひらがなの隙間が気になる

※縦書きはずれる時があります。

要素をカウントする「counter-increment、counter-reset、content:counter」

要素をカウントしてcontentで表示できます。
この3つはセットで使います。

使用用途

  • リストに数字があり、カウントしていく場合

1,2,3,4と順番にカウントしていく、○○の手順とかで使ったりできます。
画像で書き出したり、数字入力、疑似クラスで出したりするのはめんどくさいですよね。
更新も手間です。これは結構使います。

追従コンテンツが簡単に作れる「position sticky」

よく見る追従コンテンツが簡単に作る事が出来ます。
position fixedとかで上に固定するのとはまた違い、スクロールした時に発動します。

便利すぎる関数

  • calc

CSSの数値を計算する関数「calc」

かなり使います。
レイアウト調整にこれ使うと簡単に出来ていいですね。
数字の計算とかしなくなります。

足し算、引き算、掛け算、割り算と使えます。

使用用途

  • レイアウト時、サイドの横幅が決まっててコンテンツをレスポンシブにする
  • メニューのサイズを均等割

便利すぎる疑似クラス

  • empty

要素が空の時に使える疑似クラス「empty」

要素が空の時だけ反応する疑似クラス。
空っぽの時は削除みたいなときに使えます。flexとの相性が良いかもしれないですねぇ。

使用用途

  • Flexのバグ対応の空要素にプロパティを適応する時

まとめ

CSS3の本とか買って読んだことがないので、まだまだ知らないプロパティや疑似クラス、関数もありそうです。
今まで難しかったことがCSS3だと簡単に出来る!なんてことも多々あります。

ネットでも調べたら簡単に出てくると思いますが、一冊くらい持ってても良いかも。

気に入った記事であれば、ぽちっとお願いします<(_ _)>