覚えておいて損はないCSS一覧

更新日：2020/02/28

コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。
僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。
そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、
うまく使えばコーディングがちょっと便利になる、そんなユニークで面白いCSSをご紹介します。
頭の片隅で覚えておいて損はないはずなので、是非皆様の参考になれば嬉しいです。

【目次】

文頭に数字を連番で自動出力するCSS
テキストの大文字・小文字・全角文字を変換するCSS
テキストに圏点を入れるCSS
要素の形に合わせてテキストを表示するCSS
要素をクリッピングマスクするCSS
inputの数値の範囲の判定後に装飾するCSS
カーソルを自分好みにカスタマイズできるCSS
要素に変化を与えるCSS

1文頭に数字を連番で自動出力するCSS

文頭に数字を連番で自動出力してくれるcounter-incrementというプロパティを紹介します。

counter-reset:(カウンター名) (リセット値);	カウンターをリセットして特定の番号から表示することができます。
counter-increment:(カウンター名);	連番で数字が自動表示されます。

使い方ですが、まず親となるセレクタに
counter-reset: number;
を付与します。
※こちらの「number」ですが名前は何でも構いません。

そして、子要素の疑似要素に
counter-increment: number;
content: counter(number)”位”;
を付与すると下記のように出力されます。

[HTML]

<p>すきな果物ランキング</p>
 <div class="count-box">
  <div>リンゴ</div>
  <div>バナナ</div>
  <div>イチゴ</div>
 </div>

<p>すきな果物ランキング</p>

</div>

[CSS]

.count-box {
  counter-reset: number;
}

.count-box div:before {
  counter-increment: number;
  content: counter(number)"位";
  padding-right: 5px;
}

.count-box {

counter-reset: number;

}

.count-box div:before {

counter-increment: number;

content: counter(number)"位";

padding-right: 5px;

}

【使用例】

リストを作成する際に追加するだけで自動で数字が出力されるので、ヒューマンエラーの防止に繋がるかと思いました。
個人的にはリストや見出しなどの数が増えたときにでも自動で連番されるので「入力する手間が省けて楽だな」と思ってます。
弊社の実績にも紹介しています下記のサイトでも使用しております。
参考：脳科学に基づいた脳の健康維持アプリ脳にいいアプリ

2テキストの大文字・小文字・全角文字を変換するCSS

テキストの形式をCSSで自由に変換することができるtext-transformというプロパティを紹介します。

text-transform: capitalize;	単語の先頭を大文字に変換します。

【原文】
lorem ipsum dolor sit amet, consectetur adipiscing elit,
【指定後】
lorem ipsum dolor sit amet, consectetur adipiscing elit,

text-transform: uppercase;	全ての文字を大文字に変換します。

【原文】
lorem ipsum dolor sit amet, consectetur adipiscing elit,
【指定後】
lorem ipsum dolor sit amet, consectetur adipiscing elit,

text-transform: lowercase;	全ての文字を小文字に変換します。

【原文】
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT,
【指定後】
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT,

【使用例】

WPなどのCMS化した箇所で指定された形式で出力させたい場合などうっかりミスを防ぐため保険としてこちらのプロパティを指定してあげると親切かと思われます。