About Blog Works Contact

カテゴリー: SCSS/SASS

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

Posted on 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 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

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 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には戻れません・・・。

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

モーダルウインドウの実装方法4選！それぞれのメリットとデメリットもご紹介

Posted on by mimihokuro

今回実装方法としてご紹介するのは以下の4つです。

  • 素のJavaScript（Vanilla-JS）
  • jQuery
  • Input ＋ Label（HTML）
  • Dialog（HTML+JavaScript）

一つ一つ見ていきましょう！

素のJavaScript（Vanilla-JS）

JavaScriptメインで一番スタンダードな、初心者の方にも取っつきやすいやり方かなと思います。

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

デモでは、OPENボタンを押すことで非表示になっているモーダル部分にopacity: 1とvisibility: visibileを設定したクラスを付与することで表示するようスタイルを上書きしています。

素のJavaScriptによるメリット

メリットとしては実装が簡単な点が挙げられます。JavaScriptを勉強し始めの方も目にするメソッドを使用しているので、初心者の方にはオススメです。

素のJavaScriptによるデメリット

デメリットとしては、後述のDialogタグを使用するよりも冗長で分かりにくいという点があります。

また、ECカートシステムなどで注文手続き画面といった個人情報を入力するページではWebスキミング対策としてJavaScriptの使用を禁止していることがあります。モーダルを使ってユーザーにもっとアピールしたい！となっても使えないというデメリットがあります。

スタイルの設定においても、opacityやvisibilityといった冗長的になりやすく、記述量が増えてしまうといったところもデメリットでしょうか。

jQuery

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

JavaScriptのライブラリであるjQueryによる実装も初心者の方には簡単な方法となります。

jQueryのメリット

メリット・デメリットは素のJavaScriptに加えて、fadeInやfadeOutといったメソッドがjQueryによってすでに用意されているので、CSS・JavaScriptの記述量を大幅に減らすことができてコードがスッキリ、かつ分かりやすい点が大きなメリットとなります。

jQueryのデメリット

大きなデメリットとして、jQueryはライブラリを構成するプログラムを一式読み込む必要があるため、それがないと動かないということと、それ自体の容量が膨大で使用したいメソッド以外のものまで読み込んでしまうためページ速度に影響が出てしまうという点が挙げられます。

また、ReactやVueといった軽量でモダンなフレームワークの普及によって、近年のフロントエンド開発に採用されなくなっているという観点から脱jQueryが進んでいます。とはいっても、未だにjQueryを利用しているところも多いようなので、こんな感じでできるよ程度で覚えてもらうのがいいと思います。

Inputタグ＋Lableタグ

inputタグとlabelタグを利用したモーダル実装です。モーダルだけでなくハンバーガーメニューのようなボタンクリックで開くUIには汎用的に使える方法になります。

See the Pen
Modal(Input+label) by mimihokuro (@mimi_hokuro)
on CodePen.

Input ＋ Lableのメリット

最大のメリットはJavaScriptを使用しないというところです。HTMLタグとCSSのみ使用することでページ速度の向上が見込まれます。また、前述したようなJavaScriptが使えない特殊な環境でも対応できるため、環境依存に強い点もメリットの一つです。

Input ＋ Lableのデメリット

デメリットとしては少しテクニカルな方法なので、初心者の方には取っつきにくい方法なのかなと思います。

可読性も他の3つの方法より下がるため、JavaScriptを使えない、もしくは理由があってどうしても使いたくないという場合を除いて使用する優先度は低くなります。

Dialogタグ

他の3つの方法に比べて最近使えるようになったHTMLタグです。JavaScriptと組み合わせて使いますが、より直感的で可読性も高い方法、かつ記述量が少ないためオススメです。

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

Dialogタグのメリット

dialogタグを使うことでpositionプロパティによる配置をすることなく自動で中央に配置され、記述量が減らせて可読性も上がります。

Dialogタグのデメリット

こちらもJavaScriptを使用しているのでJavaScriptが使えない環境では採用できません。記述も少しクセがありますが、モダンなWebデザインにおいては使い勝手の良い方法です。

最後に

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