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

※ 当ページには【広告/PR】を含む場合があります。

2019/12/10

[Dart Sass対応] 便利なSassの使い方ガイド ~ 複数のscssファイルを分割してみる

[Dart Sass対応] URLエンコード形式のsvg画像でカスタムカーソルを試してみる

この程、

公式のLibSass非推奨化のアナウンス

を受けて、全面的に

@import

構文も今後は非推奨になりました。

[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する

LibSassからdart-sassをサクッと移行する方法を解説します。

さて

前記事・便利なSassの使い方ガイド〜複数のscssファイルを分割してみる

でご紹介させていただいたテクニックの応用編として、cssのカスタムカーソルを実装してみましょう。

【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集

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

css カーソル

などで検索すると、色々と出てきますので、詳細を確認したい方は、

【CSS】cursorの使い方：カーソル形状の変え方と値一覧

などをください。

例えば、

pointer

のカーソルスタイルを、

my-cursor

クラスをhtml要素に指定したい場合には、

開く/閉じる

            
            .my-cursor {
    cursor: pointer;
}

とスタイリングします。

【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集

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

通常カーソルに表示する画像は、プロジェクト内の適当なフォルダへ保存し、

cursor: url(ファイルパス);

を利用することがメジャーなやり方かと思います。

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

特に、base64画像をcssソースへinlineで埋め込んだコードは、何かと長くなりがちで、しかも１つのファイルに、複数の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;
}

【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集

ビルド後のスタイル

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

【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集

まとめ

以上、base64画像をscssファイルごとにリソース管理を行い

@use

で呼び出す方法を紹介しました。

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

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

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集

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

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

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

html部分の実装

scssファイルの実装

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

時計の画像

エントリーの画像

ハートの画像

インフォの画像

スリップする人の画像

ビルド後のスタイル

まとめ

その他のリンク記事

[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する

[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する

[Dart Sass対応] 便利なSassの使い方ガイド ~ 複数のscssファイルを分割してみる

[Dart Sass対応] 便利なSassの使い方ガイド ~ 複数のscssファイルを分割してみる

[Dart Sass対応] URLエンコード形式のsvg画像でカスタムカーソルを試してみる

[Dart Sass対応] URLエンコード形式のsvg画像でカスタムカーソルを試してみる