【Dart Sass対応】Sassを利用してカスタムカーソルを使ってみたお話


2019/12/10

さて、
前記事・便利なSassの使い方ガイド 〜 複数のscssファイルを分割してみるでご紹介させていただいたテクニックの応用編として、cssのカスタムカーソルを実装してみましょう。

そしてこの程、
公式のLibSass非推奨化のアナウンスを受けて、全面的に@import構文も今後は非推奨になりました。


cssのカーソルのスタイリング基本形

css カーソルなどで検索すると、色々と出てきますので、詳細を確認したい方は、【CSS】cursorの使い方:カーソル形状の変え方と値一覧などをください。

例えば、
pointerのカーソルスタイルを、my-cursorクラスをhtml要素に指定したい場合には、

            
            .my-cursor {
    cursor: pointer;
}
        
とスタイリングします。


cssのカスタムカーソルの画像準備

通常カーソルに表示する画像は、プロジェクト内の適当なフォルダへ保存し、cursor: url(ファイルパス);を利用することがメジャーなやり方かと思います。

本記事では、リソースへのファイルパスではなく、base64画像を直接取り込むやり方をご紹介します。

特に、base64画像をcssソースへinlineで埋め込んだコードは、何かと長くなりがちで、しかも1つのファイルに、複数のbase64画像を埋め込んでしまうと、どれがどの画像であるのか分からなくなる恐れもあります。

そこで、scssファイルごとに1つのbase64画像を対応させて、リソース管理すると見通しも効率も良くコーディングできると思います。


プロジェクトのファイル構造

さて、今回の最低限のソースコードのファイル構造は以下のような構成になります。

動作確認は
angular@~10.1.0相当で行っております。

特に複雑なコーディングではないので、sassのビルド環境があれば再現できると思います。

            
            $ tree
.
├── my-custom-css-cursor.component.html         # メインのhtmlファイル
├── my-custom-css-cursor.component.scss         # メインのscssファイル
└──cursor-images
    ├── _clocks.my-custom-css-cursor.component.scss # 時計のbase64画像を保持したカーソル
    ├── _entry.my-custom-css-cursor.component.scss  # エントリーのbase64画像を保持したカーソル
    ├── _heart.my-custom-css-cursor.component.scss  # ハートのbase64画像を保持したカーソル
    ├── _info.my-custom-css-cursor.component.scss   # インフォメーションのbase64画像を保持したカーソル
    └── _slipt.my-custom-css-cursor.component.scss  # 滑った人のbase64画像を保持したカーソル
        
なお、今日日、base64をフリー素材を紹介されているサイトも色々とあります。

base64画像の一部はこのサイトのフリー版を頂いて利用させてもらっております


html部分の実装

            
            <div class="usual-cursor">
    <p>Default Pointer</p>
</div>
<div class="custom-cursor-heart">
    <p>Custom Heart Cursor</p>
</div>
<div class="custom-cursor-entry">
    <p>Custom Entry Cursor</p>
</div>
<div class="custom-cursor-info">
    <p>Custom Info Cursor</p>
</div>
<div class="custom-cursor-clocks">
    <p>Custom Clocks Cursor</p>
</div>
<div class="custom-cursor-slipt">
    <p>Custom Slipt Cursor</p>
</div>
        
先程のファイル構造でも説明したように、cursor-imagesフォルダ以下に、div要素のクラス名ごとにスタイル分けを行い、別のscssファイルで管理するような構成になっています。


scssファイルの実装

では最初にプロジェクトのルートフォルダにあるメインのmy-custom-css-cursor.component.scssの中身を実装します。

            
            @use 'cursor-images/heart.my-custom-css-cursor.component';
@use 'cursor-images/entry.my-custom-css-cursor.component';
@use 'cursor-images/info.my-custom-css-cursor.component';
@use 'cursor-images/clocks.my-custom-css-cursor.component';
@use 'cursor-images/slipt.my-custom-css-cursor.component';

.usual-cursor {
    cursor: pointer;
}
        
となります。

@useで各画像を記述したcursor-imagesフォルダ以下にあるscssファイルへ分岐させております。

base64画像を仕込んだ各scssファイルの実装

以下は、base64をそのまま埋め込んでおります。

オリジナルの画像は
このサイト等で変換もできますのでご参考ください。

時計の画像

_clocks.my-custom-css-cursor.component.scssの中身です。

こちらはpngベースのbase64画像を使っています。

            
            .custom-cursor-clocks {
    cursor: url("data:image/png;base64,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") 20 20, auto;
}
        

エントリーの画像

_entry.my-custom-css-cursor.component.scssのファイルの中身は以下です。

svg画像をbase64化したものを利用しました。

            
            .custom-cursor-entry {
    cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDJweCIgaGVpZ2h0PSI0MnB4IiB2aWV3Qm94PSItMC41IC0wLjUgNDIgNDIiIGNvbnRlbnQ9IiZsdDtteGZpbGUgaG9zdD0mcXVvdDt3d3cuZHJhdy5pbyZxdW90OyBtb2RpZmllZD0mcXVvdDsyMDE5LTEyLTA5VDEwOjU1OjIwLjE4NFomcXVvdDsgYWdlbnQ9JnF1b3Q7TW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTAuMTU7IHJ2OjcxLjApIEdlY2tvLzIwMTAwMTAxIEZpcmVmb3gvNzEuMCZxdW90OyB2ZXJzaW9uPSZxdW90OzEyLjMuOCZxdW90OyBldGFnPSZxdW90O05yOHAzbmdSVU8yU04waWtGQmRIJnF1b3Q7IHBhZ2VzPSZxdW90OzEmcXVvdDsmZ3Q7Jmx0O2RpYWdyYW0gaWQ9JnF1b3Q7cnU1OXJZQVVCWC1hR0ZsUkpKZ18mcXVvdDsmZ3Q7alpOTmI0TXdESVovRGZkQXVyYTdsclhkb1pNbTliQnpSQUtKR3VJcWhBSDk5VXRJd29lcVN1T0E0c2Qrc1dPYkJPZDFmOWJrenIrQU1wbGtpUFlKL2tpeWJMZmQycmNEZ3dkdmVPTkJwUVgxS0ozQlZUeFlnQ2pRVmxEV3JBSU5nRFRpdm9ZRktNVUtzMkpFYStqV1lTWElkZFk3cWRnVHVCWkVQdE1mUVEzM2RKL3RadjdKUk1WajVuVDc3ajAxaWNIaEpnMG5GTG9Gd3NjRTV4ckErRlBkNTB5NjNzVytlTjNwaFhjcVRETmwvaVBJdk9DWHlEYmM3YWlNTUVPb3pnenh5azBuYWttVXRRNEZGNUpleUFDdFM5RVlVdHlpZGVDZ3hRT1VJZEs2VWd1c1c1c3dRWXhXRVZlbnROalJVa2laZ3dROVpzTUk3WXV5ZE54R0x2aHBmQ3pYMENyS2FFamlva0tPZEJQdFVEc2FpOUJ3bTBhVk9UMXJiUHgzN0JPYTBJVTBKcFllWitPOGxEUjh6T2NNSWtXbDdMbXdhbVpMTzRRdU1tMVkvM0lTNlRSZisxOHdxSm5SdHM4b0N1SktESEhYZzkzTkc3WUppQytXS3pJU2RycWF2anlQM1I3QzVLTTViOWpvVy95bStQZ0gmbHQ7L2RpYWdyYW0mZ3Q7Jmx0Oy9teGZpbGUmZ3Q7Ij48ZGVmcy8+PGc+PHBhdGggZD0iTSA0MSAzMSBMIDQxIDExIFEgNDEgMSAzMSAxIEwgMTEgMSBRIDEgMSAxIDExIEwgMSAzMSIgZmlsbD0iIzAwOGNmZiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxwYXRoIGQ9Ik0gMSAzMSBMIDEgMzEgUSAxIDQxIDExIDQxIEwgMzEgNDEgUSA0MSA0MSA0MSAzMSBMIDQxIDMxIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIvPjxwYXRoIGQ9Ik0gMSAzMSBMIDQxIDMxIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIvPjxnIGZpbGw9IiNGRkZGRkYiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTRweCI+PHRleHQgeD0iMjAiIHk9IjIxLjUiPkVudGl0eTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==") 20 20, auto;
}
        

ハートの画像

_heart.my-custom-css-cursor.component.scssのファイルは以下のように編集します。

こちらはpngベースのbase64画像を使っています。

            
            .custom-cursor-heart {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0EwMEYyRjlDMjZFMTFFNUI4QkRFMkRBRDg3QkNFRUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0EwMEYyRkFDMjZFMTFFNUI4QkRFMkRBRDg3QkNFRUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQTAwRjJGN0MyNkUxMUU1QjhCREUyREFEODdCQ0VFRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQTAwRjJGOEMyNkUxMUU1QjhCREUyREFEODdCQ0VFRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi/X/ugAAAY6SURBVHja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') 40 40, auto;
}
        

インフォの画像

_info.my-custom-css-cursor.component.scssの中身は以下です。

元はsvgベースのbase64画像です。

            
            .custom-cursor-info {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48cGF0aCBkPSJNIDI1IDIgQyAxMi4zMDkyOTUgMiAyIDEyLjMwOTI5NSAyIDI1IEMgMiAzNy42OTA3MDUgMTIuMzA5Mjk1IDQ4IDI1IDQ4IEMgMzcuNjkwNzA1IDQ4IDQ4IDM3LjY5MDcwNSA0OCAyNSBDIDQ4IDEyLjMwOTI5NSAzNy42OTA3MDUgMiAyNSAyIHogTSAyNSA0IEMgMzYuNjA5ODI0IDQgNDYgMTMuMzkwMTc2IDQ2IDI1IEMgNDYgMzYuNjA5ODI0IDM2LjYwOTgyNCA0NiAyNSA0NiBDIDEzLjM5MDE3NiA0NiA0IDM2LjYwOTgyNCA0IDI1IEMgNCAxMy4zOTAxNzYgMTMuMzkwMTc2IDQgMjUgNCB6IE0gMjUgMTEgQSAzIDMgMCAwIDAgMjIgMTQgQSAzIDMgMCAwIDAgMjUgMTcgQSAzIDMgMCAwIDAgMjggMTQgQSAzIDMgMCAwIDAgMjUgMTEgeiBNIDIxIDIxIEwgMjEgMjMgTCAyMiAyMyBMIDIzIDIzIEwgMjMgMzYgTCAyMiAzNiBMIDIxIDM2IEwgMjEgMzggTCAyMiAzOCBMIDIzIDM4IEwgMjcgMzggTCAyOCAzOCBMIDI5IDM4IEwgMjkgMzYgTCAyOCAzNiBMIDI3IDM2IEwgMjcgMjEgTCAyNiAyMSBMIDIyIDIxIEwgMjEgMjEgeiI+PC9wYXRoPjwvc3ZnPg==") 30 30, auto;
}
        

スリップする人の画像

_slipt.my-custom-css-cursor.component.scssの中身は以下です。

pngベースのbase64画像を使っています。

            
            .custom-cursor-slipt {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABeklEQVRIib3UMU8UQRjG8R8qR2ljDAUVYmiMlRWFgR4vkcTEjkjBB7AAayv0AxCNJR2huRoSY7CQBsSGAkJiECQ0oI0xUc5iRh3Xubu9BX2SyWTfPPv8d953M1TXKtbO8H5b9aOJz52MFyoCrsd9+18BhuK+k9RqeIID7GMOtUtnBKQneIyZ5Hm2YjZYFGYwmdQOYi1dH89zBs2M73tVwLW4Dye1hYwvVyulVb/b8Aq3hSHPCQP+NeSqgD4882e/X2McF6uG5jSFLwXQXgSdm27hsAA5amVex1vhKiirHqHnKaDlFbIZDVtdQMb8/f83Wpn7Y3hZSA9eZgAP2r3UDWQ6E/5eid+zCBnEAG5iFBN4iK8ZwL1i2Breod4GUna9yH3tm8SwEr8yhWyUDG+gNweoxeMeR+M3PMfVxHMZ97GbCT7FU3S8+q9gPgKa+CTc7/V4stNM+Afc7RRc1A0sZ8J+rhMsCYPu6zY81R1h+EdCfx9hRIlW/Ff9ABPvlB5EuAw+AAAAAElFTkSuQmCC") 20 20, auto;
}
        

ビルド後のスタイル

さてコレを早速ビルドさせてみると、、、以下のような感じにカスタムカーソルが動作すればOKです。


まとめ

以上、base64画像をscssファイルごとにリソース管理を行い@useで呼び出す方法を紹介しました。

今回のテクニックは弊社サイトのどこかで動作させております。

探せた方は今回の記事のことを思い出してやってください。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。