CSSを使って美しいステップバーを作成する方法

最新の Web サイトの人気が高まるにつれ、多くの Web サイトでは登録ページ、支払いページなどの複数の手順の操作が必要になります。このような状況下、ユーザーにより良い操作体験を提供するために、ステップバーの導入が一般的になってきました。ステップバーは、現在の進行状況をユーザーに伝えるだけでなく、過去の操作を表示し、便利かつ迅速に前のステップに戻る機能もユーザーに提供します。したがって、複雑なページをデザインする場合には、ステップバーが特に必要になります。

この記事では、CSS を使用して見栄えの良いステップバーを作成する方法を紹介し、そのテクニックと手順を詳しく説明します。

ステップ バーの設計と実装

CSS ステップ バーを作成するには、次の手順に従う必要があります。

ステップ 1: HTML コードの記述

In このステップでは、ステップ バーのコンテナ要素と各ステップの子要素を含む、ステップ バーの HTML コードを記述する必要があります。ステップバーのコンテナ要素では、「ul」タグを使用して順序なしリストを作成する必要があります。各ステップでは、子要素として「li」タグを使用する必要があります。ステップ バーの進行状況を表示するには、各子要素に現在の進行状況を表す数字またはその他の識別子を追加する必要があります (図 1 を参照)。識別子には、アイコン、色、または進行状況バーを使用できます。

  
• 1
  
• 2
  
• 3

図 1: ステップ識別子の例

ステップ 2: CSS の記述

このステップでは、ステップ バー スタイルを設計するための CSS スタイル シートを記述する必要があります。ステップ バー CSS のデザインは、ステップ識別子とステップ バー自体の 2 つの部分で構成されます。

ステップ識別子の設計には、アイコンや画像、進行状況を表す数字やその他の要素、または進行状況バーを使用するなど、さまざまな方法を使用できます。以下にその一例を示します。

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

図 2: ステップ識別子のスタイルの例

この例では、円形のアイコンを使用して各ステップを表します。円形のアイコンを作成するには、CSS 疑似クラス「::before」を使用して、li 要素の前に疑似要素を作成します。 「height」プロパティと「width」プロパティを使用してアイコンの高さと幅を設定し、「line-height」プロパティを使用してアイコンを垂直方向の中央に配置します。 「margin」属性を使用して、親要素内の要素を垂直方向の中央に配置します。 「border-radius」プロパティを使用すると、要素の外観を円形に見えるように変更できます。ステップ識別子を選択するには、「:first-child」擬似クラスを使用して最初の li 要素を選択します。

ステップバー自体のデザインについては、さまざまな方法を使用して実現できます。ここでは、長方形の進行状況バーを使用して現在の進行状況を表します。背景色と影のプロパティを使用した例を次に示します。

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

図 3: ステップ バーの例

この例では、「flex」プロパティを使用してステップ シンボルを水平に配置します。 。 「list-style」属性を使用して、ul 要素からデフォルトの箇条書きを非表示にします。 「margin」プロパティと「padding」プロパティを使用して、ステップバーのマージンとパディングを設定します。また、「background-color」プロパティと「box-shadow」プロパティを使用して、ステップ バーに明るい背景と影の効果を追加しました。

各ステップ要素について、「flex: 1」属性を使用して、ステップバー内のステップシンボルを均等に配置します。また、「font-size」属性を使用してステップ記号のフォント サイズを設定し、「text-align」属性を使用してステップ記号を中央揃えにします。相対位置指定には「position」属性を使用し、最後のステップを除くすべてのステップに進行状況バーを追加するには「:not(:last-child):after」疑似要素を使用します。要素内に疑似要素を追加するには、「:after」疑似要素を使用します。 「top」属性と「left」属性を使用して、擬似要素をステップ シンボルの中心の右側に配置します。 「width」プロパティと「height」プロパティを介して疑似要素の寸法を設定します。 「background-color」属性を使用して、疑似要素の色を設定します。 「z-index」属性を負の数値に設定して、ステップ シンボルが擬似要素をオーバーレイするようにします。ステップ バー要素を選択するには、「:active」疑似クラスを使用して、現在アクティブな li 要素を選択します。

ステップ 3: インタラクション デザインのフォローアップ

ステップ バー デザインが実装されようとしているので、インタラクション デザイン全体を見直して、各ステップが正しくリンクされていることを確認する必要があります。対応するフォームページ。サイトがモバイル ファーストの設計段階にある場合は、ステップ バー スタイルが正しく拡大縮小されていることを確認してください。アニメーション効果を追加してステップ バーのインタラクティブ効果を強化し、ユーザー エクスペリエンスを向上させることも検討できます。

結論

この記事では、CSS を使用してステップ バーをデザインするために必要な手順のいくつかについて説明しました。ステップバーのデザインは主にHTMLとCSSを使用して作成・レンダリングを行っております。ユーザーが実行している操作を理解できるようにステップ バーを設計し、ユーザーがより時間と労力を節約して必要な操作を完了できるようにする必要があります。もちろん、ステップバーのデザインに基づいて、他の多くのインタラクティブな要素と組み合わせて、Web サイトのインタラクティブ性をさらに向上させることもできます。

以上がCSSを使って美しいステップバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。