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

【目次】

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

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

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

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

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

[HTML]

[CSS]

【使用例】

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

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

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

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

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

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

【使用例】

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

3テキストに圏点を入れるCSS

テキストに圏点を入れるtext-emphasis-styleというプロパティを紹介します。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。

※FirefoxやSafariやChoromeやEdgeのモダンブラウザは対応してますが、IEは非対応みたいです。
また、完全に対応してブラウザもありますのでベンダープレフィックスは付けておいた方が良さそうです。

【使用例】

WPなどでCMS化した箇所に圏点を入れることが出来るタグを用意していると記事のクオリティが上がりますので、自分のブログでも取り入れようと思いました。

4要素の形に合わせてテキストを表示するCSS

要素の形に合わせて自由にテキストを入り込ませることができるshape-outsideというプロパティを紹介します。

まず、floatで画像を浮かび上げテキストを回り込ませます。
そして、下記のスタイルをimgタグにあてると
shape-outside: circle();
円形の画像の周りにテキストが回り込んできます。

[HTML]

[CSS]

shape-image-threshold: 0.4;

[HTML]

[CSS]

※IEは非対応です。

【使用例】

雑誌でたまに見受けられるこちらのデザインですが、Webで再現する機会があれば一見複雑で難しいように思えるこちらのデザインでも実はCSSで簡単に実装可能でしたので、コーディングの幅が広がりそうですね。
実用的な例でいうと記事のアイキャッチの右側にテキストを持ってくるときなどに便利です。

5要素をクリッピングマスクするCSS

要素にクリッピングマスクをかけることが出来るclip-pathというプロパティを紹介します。

最初に四角形のimgタグを用意しました。
こちらのimgタグにプロパティをあてて色々な形でクリッピングマスクをしていきます。

ひし形

下記の指定でひし形を作成することが出来ます。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

四分割した円の右下の部分

clip-path: ellipse(50% 50% at 0 0);

※FirefoxやSafariやChoromeのモダンブラウザは対応してますが、IEは非対応みたいです。
また、完全に対応してブラウザもありますのでベンダープレフィックスは付けておいた方が良さそうです。

【使用例】

動的なコンテンツに対して画像の形を変えたい場合にかなり使えます。

6inputの数値の範囲の判定後に装飾するCSS

inputの数値の範囲の判定をし、その後にCSSで装飾が可能な記述を紹介します。

まず、html側でinputタグを記述します。
そして中に最小値と最大値を設定します。
min=”最小値”
max=”最大値”

判定のCSSは下記の通りです。
疑似要素として指定します。
・範囲内
:in-range
・範囲外
:out-of-range

こちらを装飾をすると下記のようになります。

:in-rangeに範囲内のプロパティを指定し、:out-of-rangeに範囲外のプロパティを使用しております。また、「範囲内です。」と「範囲外です！」のテキストは疑似要素で表示しております。

[HTML]

[CSS]

【使用例】

ユーザーに数値を入力させる際に制限を設けたい場合に役に立つCSSです。
JSを使用せず、簡単に実装できるので重宝できそうですね。

7カーソルを自分好みにカスタマイズできるCSS

カーソルを自分好みの画像にカスタマイズできるcursorというプロパティを紹介します。

下記の記述を指定することで、独自のカーソルを指定することができます。
cursor: url(cursor.png), auto;
※cursor.png

また、注意点としてChromeとFirefoxではpng画像で表示されますが、
IEとEdgeではpng画像に対応していなく.curか.aniの形式でないと表示されません。
下記のサイトで.cur形式に変換してください。
curに変換できるサイト
また、Firefoxは.aniに対応しておりません。
ですので、.cur形式で表示させるのが無難みたいです。

下記のデモでは画像にのみ指定しておりますが、htmlにcursor: (値);を指定することで、常に表示させたい画像をカーソルとして表示させることもできます。

【使用例】

他のサイトと差をつけたい場合にこのように要素によってはカーソルを変更するとユニークなサイトが出来上がると思います。
こちらのプロパティを使用し、遊び心溢れたサイトがありました。
参考：Walk the 90s

8要素に変化を与えるCSS

要素に様々な変化を与えることができるfilterというプロパティを紹介します。

【元画像】

各imgタグにプロパティをあてていますので、どのように変化するかご確認ください。

輝度を調整する

filter: brightness(50%);

ぼかしをつける

filter: blur(5px);

コントラストをつける

filter: contrast(200%);

グレースケールを調整できる

filter: grayscale(80%);

ドロップシャドウをつける

filter: drop-shadow(0 0 20px #23344f);

色相環を回転させる

filter: hue-rotate(90deg);

【使用例】

画像のホバーはおそらくopacityで透過させるのが一般的かと思いますが、このように様々なプロパティがありますのでホバーアニメーションのストックが増えました。

おわりに

CSSも視野を広げるとこんなにもユニークなモノが用意されていたのは驚きでした。
今回はユニークなものにフォーカスを当て紹介させていただきましたが、他にも沢山驚くようなCSSが用意されているのでお時間ある時に是非、調べてみてください。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Reference