単一の HTML 要素の星評価コンポーネント

これまで、カスタム コンポーネントを作成するには、HTML、CSS、JavaScript を複雑に組み合わせる必要がありました。しかし、近年の CSS の進歩により、ブラウザにすでに組み込まれているロジックを活用して、HTML と CSS だけを使用して多くのコンポーネントを構築できるようになりました。車輪のほとんどは再利用できるのに、なぜ車輪を再発明する必要があるのでしょうか?

チェックボックス、ラジオボタン、トグルスイッチなどの単純なコンポーネントは、機能をブラウザーに依存しながら、HTML と CSS を使用して作成できます。しかし、単純なコンポーネントに限定されるわけではありません。より複雑なコンポーネントもこの方法で実現できます。

この記事では、単一の HTML と 1 つの JavaScript コマンドを使用して星評価システムを構築する方法を説明します。

HTML

星評価コンポーネントは基本的に、ユーザーが選択できる値の範囲です。バリエーションには、5 つの値 (星ごとに 1 つ) または 10 の値 (半分の星も可能) が含まれる場合がありますが、考え方は同じです。ユーザーは 1 つの値を 1 つだけ選択できます。

HTML は、コンポーネントのベースとして使用できる範囲用に設計された入力タイプを提供します。

<input type="range">

現状では、この入力はあまり役に立ちません。設計仕様に基づいていくつかの属性を定義する必要があります:

1. 星半分の評価を許可します。
2. 星の範囲は 0.5 から 5 つです。
3. デフォルトの選択は 2.5 つ星です。

上記の仕様に基づくと、HTML は次のようになります:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

このコンポーネントは範囲入力 () で、ユーザーは 0.5 (min="0.5") から 5 つ星 (max="5") までの値を増分で選択できます。 0.5 (ステップ = "0.5")。初期値は星2.5(value="2.5")に設定されています。

最小値を 0 ではなく 0.5 に設定するのは、珍しいのように思えるかもしれませんが、これには実際的な理由があります。星 0 個のレビューを許可すると 11 個の潜在的な値が作成されますが、範囲は視覚的に 10 個の値 (半分の星 10 個) を表すため、クリック可能な領域と範囲内の星の間に不一致が生じます。この設計の選択により、使いやすさが向上し、後の実装が簡素化されます。

最小値を 0.5 に設定すると、より自然なクリック領域が可能になります

この問題は、11 個のラジオ ボタンを使用してコンポーネントを作成することで部分的に解決されます。しかし、それはデザイン (マウスを使用して 0 の値を選択する方法)、使いやすさ (範囲入力のネイティブ動作またはラジオ ボタンのネイティブ動作を模倣する必要があるか)、およびアクセシビリティ (どのように操作するか) において新たな問題を引き起こすでしょう。コンポーネント全体のフォーカスを管理しますか?)

これらは、ラジオ ボタンを使用して評価コンポーネントを作成する方法に関する別のチュートリアルに適した質問です。単一の HTML 要素を使用してコンポーネントを作成する方法に関するこのチュートリアルでは、これらの複雑さを避けるために最小値 0.5 を選択しました。

後でいくつかの調整を追加しますが、このコードは確実な出発点として機能します。 CSS を使用しない場合、視覚的には標準の範囲入力と似ています:

次に、さらにいくつかの属性を追加します。現時点では重要ではないように見えますが、後で重要になります:

• クラス名: CSS での範囲入力を識別するのに役立ちます。
• インライン スタイル: 入力の値を保存するカスタム プロパティを使用します。
• インライン JavaScript: 上記のインライン スタイルでカスタム プロパティを更新する単一のコマンド。

最終的なコードは次のようになります (読みやすいようにフォーマットされています)。

<input type="range">

次のセクションでは、このルールを少し改良します。 Chrome/Safari と Firefox のスタイルを定義する必要があり、いくつかの繰り返しになります。カスタム プロパティを使用して値を保存し、両方のスタイルに適用することでプロセスを合理化できます。

トラックのスタイリング

トラックは要素のサイズ全体を占め、その後、グラデーションを使用して必要な部分に色を付けます。

幅については心配する必要はありません – 幅は要素の幅全体を占めます – ですが、高さについては別の話になります。 Chrome と Firefox はトラックの高さをコンテナに一致させますが、Safari はそうではありません。したがって、高さ 100% を明示的に指定する必要があります。

次に、色付きの領域を定義します。前に作成した --val および --size カスタム プロパティを利用します。 --val プロパティで示された点で色を変更する、左から右への線形グラデーションを設定します。

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

このグラデーションを親要素内の別のカスタム プロパティに移動します。これにより、前に述べたように、Chrome/Safari および Firefox の値を再利用できるようになります…そしておそらく後ほど説明します。

これにより、選択した値を表す暗い領域を持つ長方形が得られます。四角形をクリックまたはスライドすると黒い領域が変化します。これは望ましい機能ですが、ビジュアルが欠けています。 CSS マスクが必要です。

それは否定しませんが、次の部分は醜いです。私は、外部画像やインライン SVG に依存せず、CSS をすべて使用することにしました。これらのオプションのいずれかを使用すると、コードを簡素化できます。

次のコードは星型の評価コンポーネント用ですが、マスクを変更することで簡単に形状を変更できます (たとえば、円に)。

CSS マスクを使用して、一連の円錐グラデーションを使用して 5 点の星をクリップします。範囲入力のサイズが考慮されるため、マスクが水平方向に繰り返された後、5 つの星が得られます:

<input type="range">

上記の線形グラデーションと同様に、このマスクを Chrome/Safari と Firefox の両方のスタイルに適用します。コードの繰り返しを避けるために、親要素内のカスタム プロパティでコードを定義します。

最終的なコードは次のようになります:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Webkit と Firefox のコードがほぼ同じであることに注目してください。 CSS のミックスインのような機能は、このような状況では非常に役立ちますが、サポートされている標準が 1 つある方がさらに良いでしょう。

コンポーネントが画面に表示されているとおりに正確に印刷されるようにするために、いくつかのスタイル (print-color-adjust:exact) も追加しました。通常、デフォルトでは背景が印刷されないため、これは背景を扱うときに便利です。

親指のスタイリング

この星評価システムの場合、親指は特に重要ではありません。視覚効果はトラック自体を使用して実現されます。そこで、親指を非表示にします。

不透明度をゼロに設定することでこれを行うことができます:

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are ::-webkit-slider-thumb (Chrome and Safari) and ::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are ::-webkit-slider-runnable-track (Chrome and Safari) and ::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

お気づきかもしれませんが、上記のコード スニペットでは CSS ネストを使用していません (下のデモでは CSS ネストを使用しています)。これは、ネストが比較的新しいものであり、いくつかの制限があるためです。多くの古いブラウザーはネストをサポートしておらず、一部の最新のブラウザーは非標準の疑似要素に苦労しています。Safari でのこの動作については、WebKit でバグを報告しました。

例

百聞は一見に如かずと言います。そこで、単一の HTML 要素を使用してコーディングできる入力範囲の例をいくつか示します。

この記事で説明されている星評価コンポーネントから始めましょう:

次に、カラフルな例です。これは特殊な形状をしており、範囲入力のすべての部分 (範囲自体、トラック、サム) をスタイル設定する必要があります:

最後に、私のお気に入りです。アニメーション化された単一要素のユーザー満足度コンポーネントです。さまざまな面のいずれかを選択すると、選択に基づいて移動します:

結論

このコンポーネントをコーディングするにはさまざまな方法があります。私は HTML と CSS のみを使用して (1 つのインライン JavaScript コマンドを使用して) これを実行しましたが、画像や複数の JavaScript を使用して、醜いインライン化を防ぐこともできます。 

重要なアイデアは、HTML と CSS を最小限に変更するだけで仕様を調整でき、星評価システムの動作がわずかに異なったり、見た目がまったく異なったりするということです。

コンポーネントは複数のラジオ ボタンを使用して再作成することもできます。これにより、JavaScript 行と一部の CSS が不要になります。それは有効なアプローチです。アクセシビリティを確保し、入力範囲を備えたデフォルトの動作を再現するには、追加のコードが必要になります。このアプローチが簡単だと感じる人もいるでしょうし、確かに実行可能です。

これは、私がソフトウェア開発で最も気に入っている点の 1 つです。さまざまなアプローチとオプションがあり、それぞれに長所と短所があり、すべてが美しく達成可能です。

記事をお楽しみいただけたでしょうか。コーディングを続けてください!

以上が単一の HTML 要素の星評価コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。