Web制作者は要チェック! SVGとCSSを使用したUIコンポーネントの実装テクニック

SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。

SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。

SVGとCSSを使用したUIコンポーネントの実装テクニック

Building UI Components With SVG and CSS
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケースはたくさんあります。

たとえば、円形のローディングアニメーションを実装したり、画像にマスクを適用したりすることが挙げられます。CSSで実装できないわけではありませんが、使用するテクニック(マスクなど)に応じてクロスブラウザの問題と戦うのが困難になることがあるため、SVGを使用すると時間と労力を節約できます。

SVGが優れている点は、レスポンシブでパフォーマンスも高く、HTMLとCSSで簡単に実装できることです。

この記事では、SVGをHTMLやCSSとともに使用してさまざまなUIコンポーネントを構築するユースケースを解説したいと思います。
では、さっそく始めましょう!

1. SVGで切り抜きを実装

このアバターは、FacebookのCSSを勉強していたときに見つけたものです。メッセンジャーではアバターの右下にバッジを付けることができ、バッジのためのスペースを確保するために切り取られています。

SVGで切り抜きを実装

アバターには、バッジのスペースを確保するために右下が切り取られている

CSSでホワイトのボーダーを追加することで実現できます(応急処置として)。しかし、これをさらに発展させて動的なSVGコンポーネントにしてみませんか?

ボーダーが使えるのに、なぜSVGを使うのか、と思われるかもしれません。まあ、これに正しいも間違いもないのですが。しかし、他よりも優れた解決策があります。数学の授業で、先生がある問題にはさまざまな解決方法があり、そのうちの1つが柔軟性の点で優れていると言ったのを覚えていますか? それと同じです。

ボーダーがうまく機能しない例を挙げておきます。

  • ダークモード: ホワイトのボーダーが黒っぽい背景の上になります。
  • ホバー時: 背景が変化するので、ホワイトのボーダーが奇妙に見えます。

下記の画像では、バッジの周りのホワイトのボーダーが、ダーク背景とホバー状態とでどのように干渉してしまうのかに注目してください。

ボーダーがうまく機能しない例

上: デフォルト、中: ダーク背景、下: ホバー状態

ホバー時はボーダーのカラーを変更することでいちおう解決できますが、それは最良の解決策とは言えません。

SVGを使用し、右下のバッジを切り抜くことで、より良い方法で解決することができます。この実装で、どのような背景でもうまく機能します。

SVGを使用した場合

SVGで右下のバッジを切り抜く

アバターを含めるためにSVGの<image>要素を使っています。バッジを切り取るために<circle要素を作成し、1つはホワイトでもう1つはブラックにします。

マスクでは、ブラックに塗りつぶされた要素はすべて非表示になり、ホワイトの要素は表示されます。ブラックの円は右下に配置し、半径は18にしました。

デザインツールでは、これを減算と呼びます。大きな円から小さな円を引き算したものです。

実際の動作は、デモページでご覧ください。

See the Pen
Avatar - SVG Mask
by Ahmad Shadeed (@shadeed)
on CodePen.

このテクニックについてより詳しく学びたい人は、下記をご覧ください。

画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック

実装の仕組みが分かれば簡単!画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック

2. SVGでセクションの見出しを実装

私はあるクライアントのプロジェクトで、SVGとCSSを組み合わせてセクションの見出しをデザインし、実装しました。そのブランドはセキュリティに関連しているため、このようなスタイルが適していると思います。

SVGでセクションの見出しを実装

SVGでセクションの見出しを実装

このコンポーネントは、短いテキストと長いテキストで機能する必要があり、テキストが長すぎる場合は、レイアウトを崩すことなく複数行に折り返す必要があります。これを構築するために、私は次のようにしました。

  • まず、固定部分(右側)をコピーして、インラインのSVGとして追加する。
  • CSSでテキスト下の線と、最初と最後の小さな丸を実装する。
  • レイアウトはFlexboxで構築し、無駄な配置をしないようにする。
実装の仕組み

実装の仕組み

基本的なHTMLとCSSは、下記の通りです。

基本的な構造

基本的な構造

次に、<span>要素にボーダーを追加して、SVGに接続された線を模倣します。

実装の仕組み

テキストの下にボーダーを追加して線を繋げる

しかし、ここでSVGと線がつながっていないことに気づきました。Flexboxを使用しているので、その問題を修正するのは簡単です。flexアイテムをflex-endに揃えるだけです。

次に、絶対位置指定の擬似要素を使用して、最初と最後に円を追加します。

See the Pen
Section Title
by Ahmad Shadeed (@shadeed)
on CodePen.

SVGを使用することの優れている点は、SVGのパスを点線にして、アニメーション化できることです。そのためには、SVGで書き出されたパスがアウトライン化されていないことを確認する必要があります。

Jake Archibaldの記事からこのテクニックを学びました。 アイデアは、パスの長さを取得したいということです。

デベロッパーツールでSVGを調べて、<path>要素を選択すると、末尾の横に== $0があることに気がつきます。これを選択したまま、コンソールに移動して、以下のスクリプトを記述します。

$0は下記のようなことをせずにDOMから要素を選択する簡単な方法です。

それはこの例のコンテキスト内での簡単なヒントでした。
長さが決まったら、あとはやりたいことが何でもできます。たとえば、ホバー時にアニメーションさせることもできます。

See the Pen
Section Title - Animated
by Ahmad Shadeed (@shadeed)
on CodePen.

あるいは単純に、点線にすることもできます(その場合、パスの長さを知る必要はありません)。

デモのキャプチャ

点線に変更

3. SVGでリンクの下線を実装

SVGを使用して、クリックするのが楽しくなるリンクの下線を実装することができます。私は数年前に、ランダムにパスを生成し、ホバー時にそれを再描画するスクリプトを作成しました。

SVGでリンクの下線を実装

SVGでリンクの下線を実装

このアイデアは各リンクにSVGを挿入することで、下記のようになります。

このマジックは、d属性の値を変更することで起こります。パスが実際にどのように描画されるかをビジュアルでご覧ください。

SVGの描画

パスがどのように描画されるか

実際の動作は、デモページでご覧ください。

See the Pen
Underline.js
by Ahmad Shadeed (@shadeed)
on CodePen.

テクニック的の詳細については、私の記事Custom Underlines with SVG、またはUnderliner.js -GitHubをご覧ください。

4. SVGでテープを実装

あるクライアントのプロジェクトに携わっているとき、CSSを使用してどこにでも配置でき、1つのCSS変数(カスタムプロパティ)のみで色を変えることができる動的な方法で、セクションにテープを加える実装が必要でした。

SVGでテープを実装

SVGでテープを実装

Adobe Illustratorで、テープをレイヤーに分けてみました。

  • The base: 塗りつぶしの色
  • Transparent black: 暗い部分
  • Transparent white: 明るい部分
テープの構造

テープの構造

SVGのコードを見てみましょう

fill="currentColor"があることに注目してください。currentColorキーワードは、CSSのcolorプロパティから値を継承するため、1つのプロパティだけで動的に色を変更することができます。

ベタ塗りのベース、そして明るい部分と暗い部分の2つのレイヤーがあるため、色を変更すると、見た目が異なるテープができます。

テープのバリエーション

1つのプロパティを変更するだけで、簡単に色を変更できる

さらに良いことに、SVGをテンプレートにし、SVGの<use>要素を使用すると、SVGを複製せずにテープを再利用することができます。

<use>要素でテープを追加していることに注目してください。これの何がいいかというと、CSSの変数をインラインスタイルとして使用できることです。

CSSは次のようになります。

実際の動作は、デモページでご覧ください。

See the Pen
SVG Tape
by Ahmad Shadeed (@shadeed)
on CodePen.

終わりに

SVGを使用してUIコンポーネントを構築すると、作業がより簡単に、より分かりやすくなります。UIコンポーネントの中には、100%完璧なユースケースやSVGではないものもあるかもしれませんが(例:アバターの切り抜き)、それは取り組むプロジェクトのコンテキストによって異なります。

SVGとCSSの使用が優れている他のユースケースはありますか? もし何かあれば、@shadeed9までお願いします。

sponsors

top of page

©2022 coliss