SCSS/SASS – mimihokuro

JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法

Posted on 2023.08.232026.05.11 by mimihokuro

記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。

そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。

スライダーを実装するとき、よく使われるのがSlickやSwiperといったJavaScriptライブラリですが、使わないスタイルやメソッドも多いためサイトの表示速度遅延に影響を及ぼすことも。

今回はJavaScriptを使わずCSSだけでスライダーを作る方法をご紹介します。

この記事ではマウススクロールやフリックによるスクロールで動作するスライダーについて紹介しています。SwiperやSlickのようなボタンによるスワイプについては説明していませんのでご注意ください。

デモ

デモとして一度に表示する画像は1枚、横方向のシンプルなスライダーを用意しました。

See the Pen
Untitled by mimihokuro (@mimi_hokuro)
on CodePen.

基本のコード

<div class="slider">
  <img src="https://placehold.jp/0aa864/ffffff/600x300.png">
  <img src="https://placehold.jp/0aa864/ffffff/600x300.png">
  <img src="https://placehold.jp/0aa864/ffffff/600x300.png">
</div>

HTMLでは画像にダミー画像生成のplacehold.jpで生成したものを使用したシンプルな構成になっています。

.slider {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 400px;
  width: 100%;
  margin: auto;
  scroll-snap-type: x mandatory;
}

img {
  width: 100%;
  scroll-snap-align: center;
}

解説

今回は親要素にflexを指定して横並びに、表示域を幅400pxで制限して、はみ出す分はスクロールするようにしています。

追加スタイルその1：scroll-snap-type

ここで指定しているscroll-snap-typeが今回のポイントの1つです。

ところでスクロールスナップとは？という点ですが、MDNではこのように解説しています。

ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる

MDN「CSS スクロールスナップの基本概念」より抜粋

ちょっとこれだけだと分かりづらいですが、特定の位置にピタッと移動（スクロール）させる動作、というと分かりやすいでしょうか？

このscroll-snapのおかげでCSSだけを使ってSwiperやSlickに似た動作をさせることができます。

前述しましたが、ここではあくまで、マウススクロールやフリックをしたときのスクロール動作についての話になります。SwiperやSlickのようなボタンクリックでスクロールさせるためにはJavaScriptが別途必要ですのでご注意ください。

サンプルコードのscroll-snap-typeには二つの値が指定されていますが、1つ目の値にはスクロールスナップを適用させる方向、2つ目の値にはスナップの度合いを指定します。

まずxがスクロールの方向になり、x軸に沿ったスクロール方向ということになります。

y軸に適用させたいならyを指定する、ということですね。

2つ目の値についてですが、mandatoryかproximityのどちらかを指定することができます。

mandatoryはスナップをSwiperやSlickのような軽い操作感で演出してくれますが、それ故に簡単にスナップしてしまうので、ユーザーが見たい部分が見れずにスナップしてしまうなど、逆にユーザーをイラつかせてしまう可能性もあるので使用には慎重になる必要があります。

proximityは、スナップ地点が近くなるまでスクロールするとスナップされるため、mandatoryに比べて軽い操作感というわけにはいきませんがコンテンツを見逃してしまう可能性は低くなります。

と、つらつらと言葉を並べてきましたが言ってることが分かりづらいかと思いますので、百聞は一見に如かず、こちらのデモで使用感を見てください。

See the Pen
Difference between 〇 and △ by mimihokuro (@mimi_hokuro)
on CodePen.

追加スタイルその2：scroll-snap-align

scroll-snap-alignはどの位置をスナップの基準にするか指定できます。

startはスナップする範囲の先頭に、centerは中央、endは末尾にピタッと移動します。

こちらもデモを用意しました。

スナップ位置が分かりやすいよう、親要素よりも子要素を大きくはみ出した状態に設定しています。

See the Pen
scroll-snap-align by mimihokuro (@mimi_hokuro)
on CodePen.

子要素の表示域を親要素に合わせるならどの値を指定しても問題ありません。

さていかがでしたでしょうか？

CSSにたった2つのスタイルを追加するだけでスライダーがJavaScriptなしで実装できてしまうなんて神かよ、と思いましたね。

この記事が参考になれば幸いです～。

CSSで色変更もできるSVGアイコンを使うための3ステップ

Posted on 2023.06.282026.05.11 by mimihokuro

こんにちは。mimihokuro（みみほくろ）です。

みなさんはWebデザインでアイコンをつけたいとき、何を使いますか？

画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。

SVGとは

SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。

また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。

ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。

SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体のサイズや色などの調整ができれば十分です。

調整なくそのままでも使えますが、最適化することでさらにファイルサイズの縮小ができSEOへの影響も期待できます。

SVGの構造

それでは基本的なSVGファイルのコードを見ていきましょう。

アイコンはGoogle Iconsから引用

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>

シンプルな形状のアイコンでもコード上で見るとなかなかに複雑ですね。

SVGアイコンに色情報を付与する

Google Iconsから取得したままの状態だと色情報を持っていないので、fill属性を使って色情報を与えます。

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#ff0000"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>

svgタグにfill属性を付与しました。この場合アイコンが赤色（#ff0000）になります。

これで色変更ができるSVGアイコンの基本形ができました。

SVGをCSSで色変更するための3ステップ

お待たせしました、ようやく本題です。

SVGはHTMLにインラインで記述もできますが、今回は疑似要素を使ってご紹介します。

.svg::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="%23ff0000"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>');
  background-size:100%;
  background-repeat: no-repeat;
}

一見SVGファイルのコードをそのまま貼り付けたように見えますが、3つポイントがあります。

data:image/svg+xml;utf8から始めよう
包括するクォーテーションはシングル
色コードの # を %23 に変更する

data:image/svg+xml;utf8から始めよう

本来外部ファイルとして読み込むSVGファイルをインラインコードで埋め込むために必要なものです。今回のようなCSSでSVGを使う場合は必須です。

utf8は文字コードなので必要に応じて書き換えてください。

包括するクォーテーションはシングル

これはSVGファイルのコードにダブルクォーテーションが使われているので、その上からダブルクォーテーションで囲ってしまうとコードを分割したと判断されてしまうのでシングルクォーテーションで囲う必要があります。

mimihokuro

ちなみにsvgタグ内のクォーテーションをすべてシングルにして、svgタグを囲うクォーテーションをダブルにしてもOKです。
でも、Google IconsでダウンロードしたものやPhotoshopなどで書き出したSVGファイルはsvgタグ内にダブルクォーテーションが使われているケースがほとんどなので、svgタグを囲うクォーテーションはシングルがおすすめです。

色コードの#を%23に変更する

かなり地味ですが、これが今回のキモです。

今回のようなアイコンを表示するためにbackground-imageでURLを指定してSVGファイルを読み込む場合、カラーコードを示す # は使えません。

そのため、URLエンコードを使って**#の代わりに%23に変換することで色コードを表現する**ことができます。

上記のコードでは「#ff0000」を「%23ff0000」に変換しています。

複数個所で使うならSCSS/SASSで共通化が便利！

ここからはSCSS/SASSを使った便利な方法のご紹介です。

複数個所で使う場合、すべてコピペするのはナンセンスですし、いざ変更が入ったときにすべて修正するのは大変です。

SCSS/SASSにはよく使うコードを共通化できるmixinという機能があって、使いたい箇所で呼び出すと定義してあったスタイル一式をCSSにコンパイルした時に出力してくれる便利な機能です。

mixinは引数も渡せるので、今回のような色だけ変更したいけど他は同じものを表示したいよ、というときにもよく使います。

コード

@mixin svgIcon($baseColor: "dddddd") {
  width:48px;
  height:48px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="%23#{$baseColor}"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>');
  background-size:100%;
  background-repeat: no-repeat;
}

.svg {
  &::before {
    content: "";
    @include svgIcon($baseColor: "00ff00");
  }
}

@mixinでスタイルを一式定義（この場合svgIcon）して、@includeで定義したスタイルをカラーコード#00ff00（緑色）を引数として渡して呼び出します。

引数はsvgタグの色コードの部分に割り当ててあるので、この場合カラーコード#00ff00のSVGアイコンが表示されます。

さらにmixinは初期値も持たせることができるので、色の指定がなければ初期値の色で表示させることが可能です。この場合#ddddddを初期値として設定しています。

応用編

ここからはさらにテクニカルな方法をご紹介します。

文字列を一部だけ抽出するstr-slice関数

SCSS/SASSにはstr-sliceという指定の位置の文字列を抽出する便利な関数が存在します。

詳しい使い方はこちらの記事で紹介しています。

[

SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法

こんにちは。みみほくろです。今回はJavaScriptでよく見る文字列の一部を取り出す方法をSCSS/SASSで行う方法をご紹介します。私はSCSSを採用しているため、サンプルコードはSCSSの記法になります。SASSを採用している方は変換…

mimihokuro.com

](https://mimihokuro.com/blog/extract-string-by-sass-scss/ "SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法")

SCSS/SASSを使うとき、よく色コードを変数に格納して使うことが多いと思いますが、コンパイルすると「#」も含んでいるため上記でご紹介した方法でSVGが使えません。

そこで、str-sliceで変数から#を除いた色コードだけを抽出して、定義したmixinに渡すことで直接色コードを指定することなく使いまわせます。

str-slice関数を使ったコード

変数に色コードを格納し、mixinで使いまわせるように定義したコードがこちら！

$svg-color: #0000ff;

@mixin svgIcon($baseColor: "#dddddd") {
  display: block;
  width:48px;
  height:48px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="%23#{str-slice(#{$baseColor}, -6)}"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>');
  background-size:100%;
  background-repeat: no-repeat;
}

.svg {
  &::before {
    content: "";
    @include svgIcon($baseColor: $svg-color);
  }
}

ちなみにこれをコンパイルするとこうなります。

.svg::before {
  content: "";
  width:48px;
  height:48px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="%230000ff"><path d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"/></svg>');
  background-size:100%;
  background-repeat: no-repeat;
}

いかがでしたでしょうか？

SVG画像はほとんどのブラウザでサポートするようになりましたし、Google Iconsのような商用OKで無料提供しているサイトも多数あって、非常に便利になりました。

この記事を読んでSVGアイコン使ってみようと思っていただけると嬉しいです！

SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法

Posted on 2023.06.252026.05.11 by mimihokuro

こんにちは。みみほくろです。

今回はJavaScriptでよく見る文字列の一部を取り出す方法をSCSS/SASSで行う方法をご紹介します。

私はSCSSを採用しているため、サンプルコードはSCSSの記法になります。
SASSを採用している方は変換してお使いください。

取り出しにはstr-slice関数を使用します。

str-slice("文字列", 開始位置, 終了位置);
// または
str-slice("文字列", 開始位置);

こんな感じに使います。

$str: "Hello World";

$hello: str-slice($str, 1 , 5);  // 1文字目から5文字目まで取り出し
.string1::before {
  content: "#{$hello}";
}

$hello: str-slice($str, 3);  // 3文字目から最後まで取り出し
.string2::before {
  content: "#{$hello}";
}

$hello: str-slice($str, -5);  // 最後から5文字目まで取り出し
.string3::before {
  content: "#{$hello}";
}

// コンパイルすると
.string1::before {
  content: "Hello";
}
.string2::before {
  content: "llo World";
}
.string3::before {
  content: "World";
}

このSCSS/SASSで文字列を取り出す方法ってどんな場面で使うの？と思うかもしれません。

この関数なかなか便利でして、疑似要素を使って色を可変できるSVGアイコンを表示するときにも使えます。

詳しい手順はこちらの記事をご覧ください。

[

CSSで色変更もできるSVGアイコンを使うための3ステップ

こんにちは。mimihokuro（みみほくろ）です。みなさんはWebデザインでアイコンをつけたいとき、何を使いますか？画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。…

mimihokuro.com

](https://mimihokuro.com/change-color-svg-in-css/ "CSSで色変更もできるSVGアイコンを使うための3ステップ")

SCSS/SASSは便利な関数が多くて今更素のCSSには戻れません・・・。

この記事が参考になれば嬉しいです。

【2026年最新】モーダルウィンドウ実装の最適解！脱z-indexなモダン手法をまるっと解説

Posted on 2023.03.042026.07.30 by mimihokuro

ユーザーに重要な確認を求めたり、画面遷移なしでサクッと情報を表示したり……。UIデザインにおいて「モーダルウィンドウ」はとっても便利で、Web開発でも欠かせない存在ですよね。

でも、いざ新しく実装しようと思ったとき、ふとこんな風に迷うことはありませんか？

「あれ？モーダルってどうやって実装するのが最新の正解なんだっけ？」

少し前までは <div> を重ねて、複雑なJavaScriptを書いて、z-index: 9999 を指定するような「自前実装」が当たり前でした。

しかし今は、ブラウザの標準APIが劇的に進化し、「脱z-index」で、より簡単かつ安全に実装できるアプローチが揃っています。

この記事では、「今、モーダルを実装するならどんな選択肢があるの？」という疑問にお答えすべく、2026年現在のモダンな実装手法をまるっと整理してご紹介します！

プロジェクトにぴったりの方法を一緒に見つけていきましょう。

2026年の「大本命」： `<dialog>`要素＋ `showModal()`

2026年現在、モーダルウィンドウを実装するなら真っ先に選びたいのが、HTMLのネイティブ要素である <dialog> です。

JavaScriptの .showModal() メソッドと組み合わせるだけで、びっくりするくらい簡単に、しかもアクセシビリティに優れたモーダルが作れちゃいます。

なぜこれが大本命なの？

自分で一から作るのとは違い、ブラウザが以下のような「欲しかった機能」を標準で提供してくれるからです。

Top Layerに確実に出る: もう z-index の数値の戦いとは無縁です！ DOMツリーのどこに書いても、確実に最前面（Top Layer）に表示されます。
自動フォーカストラップ: モーダルが開いている間、Tabキーでの移動がモーダルの中に自動で閉じ込められます。
背面コンテンツのブロック (inert): モーダルが開いている間は、後ろのボタンが押せなくなったり、スクリーンリーダーの読み上げが防がれたりする処理を勝手にやってくれます。
Escキーでサクッと閉じる: ユーザーにとって嬉しい基本機能がデフォルトで備わっています。

実際の実装コード

<dialog id="my-modal">
  <div class="dialog-window">
    <p>Hello,Dialog!</p>
    <button id="close-btn">CLOSE</button>
  </div>
</dialog>

<button id="open-btn">OPEN</button>

const modal = document.getElementById('my-modal');
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');

// モーダルを開く
openBtn.addEventListener('click', () => modal.showModal());

// モーダルを閉じる
closeBtn.addEventListener('click', () => modal.close());

背景の暗転（オーバーレイ）も、CSSの ::backdrop 擬似要素を使えば簡単にスタイリングできちゃいます。

dialog::backdrop {
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px); /* 背景を少しぼかすと、一気にリッチな印象に！ */
}

See the Pen Modal (Vanilla-JS) by mimihokuro (@mimi_hokuro) on CodePen.

なんとJSすら不要に!? 最新仕様「Invoker Commands API」

「もっと手軽に使いたい！」「いちいちJSのイベントリスナーを書くのが面倒…」という方。最新トレンドの Invoker Commands API はぜひ知っておいてほしい仕様です。（2025年〜2026年にかけて主要ブラウザでサポートが整いました！）

なんと、HTMLに commandfor と command という属性を追加するだけで、ボタンとモーダルの連動が完結してしまうんです。

<!-- ボタンと対象のダイアログを属性だけで紐付け！ -->
<button commandfor="invoker-modal" command="show-modal" class="open-btn">OPEN</button>

<dialog id="invoker-modal" class="dialog-window">
  <p>JavaScriptを1行も書かずに呼び出せたモーダルです。</p>
  
  <!-- 閉じるボタンも同じように属性だけでOK -->
  <button commandfor="invoker-modal" command="close" class="close-btn">CLOSE</button>
</dialog>

See the Pen Modal (JQuery) by mimihokuro (@mimi_hokuro) on CodePen.

JavaScriptのフレームワークを使わない静的なページや、ちょっとしたお知らせ表示を作るときに、圧倒的なスピードで実装できちゃいますね。

アニメーションをCSSだけで滑らかに： `@starting-style`

<dialog> 要素は便利ですが、「フワッと出して、フワッと消すアニメーションがやりにくい」というのが、少し前までのフロントエンド界隈の大きな悩みでした。（display: none からのアニメーションが難しかったためです）

実はそれ、2026年現在ではCSS単体でとってもキレイに解決できるんです。新機能の @starting-style と allow-discrete を組み合わせるのが今のトレンドです。

See the Pen Modal (Dialog) by mimihokuro (@mimi_hokuro) on CodePen.

これで、重たいアニメーションライブラリ（Framer Motionなど）や複雑なJSの実装に頼らなくても、美しくて滑らかな開閉アニメーションが実現できます！

便利な「Popover API」とはどう使い分ける？

同じように画面の最前面（Top Layer）を使う新しいAPIとして、popover 属性も話題ですよね。「全部 Popover でいいのでは？」と思うかもしれませんが、実は <dialog> とは得意なシーンが違います。

<dialog showModal()> を使うシーン: 画面全体をロックして、ユーザーに必ず応答してほしいとき。（重大な警告、フォームの入力、利用規約の同意など）
popover を使うシーン: 背景の操作を邪魔せず、外側をポチッとクリックしたらフワッと消えてほしいような、一時的な情報表示。（ドロップダウンメニュー、ツールチップ、ちょっとした通知など）

「今のユーザーの作業をストップさせるべきかどうか？」を基準にして、便利な機能を使い分けてみてくださいね。

ReactやVueでの開発なら：ヘッドレスUIという選択肢

「Web標準が便利なのは分かったけど、ReactやVueみたいなフレームワークで大規模なアプリを作るときはどうするの？」という疑問もあると思います。

複雑な状態（State）管理が必要な場合は、無理に自前で作るのではなく、アクセシビリティがしっかり担保されたヘッドレスUIライブラリ（Radix UI、React Aria、Ark UI、Headless UI など）の Dialog コンポーネントを使うのが、2026年現在も安心で便利な選択肢です。

これらのライブラリは、内部的に最新のWeb標準を上手に使いつつ、フレームワークにぴったりの使いやすい書き方（宣言的UI）を提供してくれます。

まとめ：用途に合わせて最適なモーダル実装を選ぼう！

便利なモーダルウィンドウを実装するための、2026年現在の選択肢をおさらいしましょう。

基本は迷わず <dialog> と .showModal() ！
JSを減らして手軽に作りたいときは Invoker Commands API を活用。
アニメーションは @starting-style ＋ CSSトランジションで完結。
用途によっては Popover API と使い分ける。
大規模なフレームワーク開発ならヘッドレスUIを活用する。

便利なモーダルだからこそ、ユーザーにとっても開発者にとっても優しい「今の正解」を選んでいきたいですよね。

ぜひこの記事を参考に、古い z-index 実装から卒業して、最新のWeb標準の進化を取り入れた快適なモーダル実装を試してみてください！

いかがでしょうか？今モーダルを実装したい環境にどんな方法を取るのがいいのか、悩まれていたのなら参考になれば幸いです。

デモ