コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。
僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。
そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、
うまく使えばコーディングがちょっと便利になる、そんなユニークで面白いCSSをご紹介します。
頭の片隅で覚えておいて損はないはずなので、是非皆様の参考になれば嬉しいです。
目次
1文頭に数字を連番で自動出力するCSS
文頭に数字を連番で自動出力してくれるcounter-incrementというプロパティを紹介します。
| counter-reset:(カウンター名) (リセット値); | カウンターをリセットして特定の番号から表示することができます。 |
|---|---|
| counter-increment:(カウンター名); | 連番で数字が自動表示されます。 |
使い方ですが、まず親となるセレクタに
counter-reset: number;
を付与します。
※こちらの「number」ですが名前は何でも構いません。
そして、子要素の疑似要素に
counter-increment: number;
content: counter(number)”位”;
を付与すると下記のように出力されます。
[HTML]
1 2 3 4 5 6 | <p>すきな果物ランキング</p> <div class="count-box"> <div>リンゴ</div> <div>バナナ</div> <div>イチゴ</div> </div> |
[CSS]
1 2 3 4 5 6 7 8 9 | .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化した箇所で指定された形式で出力させたい場合などうっかりミスを防ぐため保険としてこちらのプロパティを指定してあげると親切かと思われます。
3テキストに圏点を入れるCSS
テキストに圏点を入れるtext-emphasis-styleというプロパティを紹介します。
| text-emphasis-style: ‘〇’; | 〇の中に指定したテキストを圏点に入れることができます。ただし、一文字のみですので注意してください。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-style: open; | 値にopenを指定することで、圏点に小さな円を表示させることができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-style: circle; | 値にcircleを指定することで、圏点に大きな円を表示させることができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-style: double-circle; | 値にdouble-circleを指定することで、圏点に二重丸を表示させることができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-style: triangle; | 値にtriangleを指定することで、圏点に三角形を表示させることができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-style: sesame; | 値にsesameを指定することで、圏点にゴマを表示させることができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
| text-emphasis-color: red; | 圏点に色を指定することができます。 |
|---|
吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。
※FirefoxやSafariやChoromeやEdgeのモダンブラウザは対応してますが、IEは非対応みたいです。
また、完全に対応してブラウザもありますのでベンダープレフィックスは付けておいた方が良さそうです。
【使用例】
WPなどでCMS化した箇所に圏点を入れることが出来るタグを用意していると記事のクオリティが上がりますので、自分のブログでも取り入れようと思いました。
4要素の形に合わせてテキストを表示するCSS
要素の形に合わせて自由にテキストを入り込ませることができるshape-outsideというプロパティを紹介します。
| shape-outside: （関数）; | フロート要素への回り込みの形状を指定する際に使用します。 |
|---|
まず、floatで画像を浮かび上げテキストを回り込ませます。
そして、下記のスタイルをimgタグにあてると
shape-outside: circle();
円形の画像の周りにテキストが回り込んできます。
[HTML]
1 2 3 4 5 6 7 | <div class="box"> <img src="./img/fireworks.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> |
[CSS]
1 2 3 4 5 6 7 8 | .box { width: 500px; } img { float: left; shape-outside:circle(); } |
| shape-image-threshold: （値）; | shape-outsideの値に指定された要素の透過性のしきい値を設定するスタイルです。数値を下げれば下げるほど透過していき、上げれば上げるほど不透明になっていきます。 |
|---|
[HTML]
1 2 3 4 5 6 | <div class="box"> <div class="square"></div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> |
[CSS]
1 2 3 4 5 6 7 8 9 10 11 12 13 | .box { width: 500px; } .square { width: 250px; height: 250px; float: left; background-image: linear-gradient(45deg, #ff6c08, transparent 80%,transparent); shape-outside: linear-gradient(45deg, #ff6c08, transparent 80%, transparent); shape-image-threshold: 0.4; } |
※IEは非対応です。
【使用例】
雑誌でたまに見受けられるこちらのデザインですが、Webで再現する機会があれば一見複雑で難しいように思えるこちらのデザインでも実はCSSで簡単に実装可能でしたので、コーディングの幅が広がりそうですね。
実用的な例でいうと記事のアイキャッチの右側にテキストを持ってくるときなどに便利です。
5要素をクリッピングマスクするCSS
要素にクリッピングマスクをかけることが出来るclip-pathというプロパティを紹介します。
| clip-path: （値）; | 要素のどの部分を表示するかを設定するクリッピング領域を作ります。 |
|---|
最初に四角形のimgタグを用意しました。
こちらのimgタグにプロパティをあてて色々な形でクリッピングマスクをしていきます。
ひし形
| clip-path: polygon(X軸 Y軸,X軸 Y軸,X軸 Y軸,X軸 Y軸); | ()の中ですが、それぞれ頂点を指しており、左がX軸で右がY軸です。 そして順番に左、右、右下、左下を指定しています。 |
|---|
下記の指定でひし形を作成することが出来ます。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
四分割した円の右下の部分
| clip-path: ellipse(縦幅 横幅 at X軸 Y軸); | 横幅と縦幅をはじめに記述し、atの次にX軸とY軸の位置を指定します。 |
|---|
clip-path: ellipse(50% 50% at 0 0);
※FirefoxやSafariやChoromeのモダンブラウザは対応してますが、IEは非対応みたいです。
また、完全に対応してブラウザもありますのでベンダープレフィックスは付けておいた方が良さそうです。
【使用例】
動的なコンテンツに対して画像の形を変えたい場合にかなり使えます。
6inputの数値の範囲の判定後に装飾するCSS
inputの数値の範囲の判定をし、その後にCSSで装飾が可能な記述を紹介します。
| :in-range{（プロパティ）} | 範囲内に適用することができるセレクタです。 |
|---|---|
| :out-of-range{（プロパティ）} | 範囲外に適用することができるセレクタです。 |
まず、html側でinputタグを記述します。
そして中に最小値と最大値を設定します。
min=”最小値”
max=”最大値”
判定のCSSは下記の通りです。
疑似要素として指定します。
・範囲内
:in-range
・範囲外
:out-of-range
こちらを装飾をすると下記のようになります。
:in-rangeに範囲内のプロパティを指定し、:out-of-rangeに範囲外のプロパティを使用しております。また、「範囲内です。」と「範囲外です！」のテキストは疑似要素で表示しております。
[HTML]
1 2 3 | 1から10の間の値が有効です。 <input type="number" placeholder="1 to 5" min="1" max="5"> <label>あなたの値は</label> |
[CSS]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | input { border: 1px solid #38eaec; width: 70px; } input:in-range { background-color: #38eaec; } input:out-of-range { background-color: #f93b1b; border: 2px solid #f93b1b; } input:in-range + label::after { color: #38eaec; font-weight: bold; content: '範囲内です。'; } input:out-of-range + label::after { color: #f93b1b; font-weight: bold; content: '範囲外です！'; } |
【使用例】
ユーザーに数値を入力させる際に制限を設けたい場合に役に立つCSSです。
JSを使用せず、簡単に実装できるので重宝できそうですね。
7カーソルを自分好みにカスタマイズできるCSS
カーソルを自分好みの画像にカスタマイズできるcursorというプロパティを紹介します。
| 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というプロパティを紹介します。
| filter: (値); | ぼかしや色変化などのグラフィック効果を要素に適用します。 |
|---|
【元画像】
各imgタグにプロパティをあてていますので、どのように変化するかご確認ください。
輝度を調整する
| filter: brightness(数値); | （）の中の数値を変更することで輝度を調整できます。 |
|---|
filter: brightness(50%);
ぼかしをつける
| filter: blur(数値); | （）の中の数値を変更することでぼかし度を調整できます。 |
|---|
filter: blur(5px);
コントラストをつける
| filter: contrast(数値); | （）の中の数値を変更することでコントラストを調整できます。 |
|---|
filter: contrast(200%);
グレースケールを調整できる
| filter: grayscale(数値); | （）の中の数値を変更することでグレースケールを調整できます。 |
|---|
filter: grayscale(80%);
ドロップシャドウをつける
| filter: drop-shadow(数値); | （）の中の数値を変更することでドロップシャドウを調整できます。 |
|---|
filter: drop-shadow(0 0 20px #23344f);
色相環を回転させる
| filter: hue-rotate(数値); | （）の中の数値を変更することで色相環を調整できます。 |
|---|
filter: hue-rotate(90deg);
【使用例】
画像のホバーはおそらくopacityで透過させるのが一般的かと思いますが、このように様々なプロパティがありますのでホバーアニメーションのストックが増えました。
おわりに
CSSも視野を広げるとこんなにもユニークなモノが用意されていたのは驚きでした。
今回はユニークなものにフォーカスを当て紹介させていただきましたが、他にも沢山驚くようなCSSが用意されているのでお時間ある時に是非、調べてみてください。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Reference
