CSS を使用して簡単なステップナビゲーションを作成する方法-フロントエンドQ&A-php.cn

CSS を使用して簡単なステップナビゲーションを作成する方法

PHPz

リリース： 2023-04-25 13:50:04

オリジナル

654 人が閲覧しました

ステップナビゲーションは、Web デザインでよく使用されます。特に複数ステップのタスクを完了する場合に、ユーザーの操作を容易にします。ステップナビゲーションは、ユーザーが現在の進行状況を理解し、操作プロセスを習得するのに役立ちます。この記事では、CSS を使用して簡単なステップナビゲーションを作成する方法について説明します。

まず、HTML ファイルを開き、ファイル内にステップナビゲーションを含む div 要素を作成する必要があります。この div 要素には、「step-nav」というクラス名が付けられます。

<div class="step-nav">

</div>

ログイン後にコピー

次に、ステップごとにカスタムステップ要素を作成する必要があります。この例では、4 ステップのナビゲーションを作成します。

<div class="step-nav">
  <div class="step">
    <span>步骤1</span>
  </div>
  <div class="step">
    <span>步骤2</span>
  </div>  
  <div class="step">
    <span>步骤3</span>
  </div>
  <div class="step">
    <span>步骤4</span>
  </div>
</div>

ログイン後にコピー

各ステップは、「step」というクラス名を持つカスタム div 要素と、ステップ名を含む scan 要素です。

次に、CSS を使用してステップナビゲーションをカスタマイズする必要があります。まず、「step-nav」クラスと「step」クラスの基本スタイルを定義します。

.step-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  margin: 0 10px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}

ログイン後にコピー

ここでは、Flexbox を使用してステップナビゲーションを中央に配置し、ステップ要素を水平に広げました。さらに、ステップ要素の幅、背景色、余白、テキストの配置、行の高さ、フォントサイズ、テキストの色、境界線の半径などのスタイルプロパティを定義します。

次に、アクティブなステップ (ユーザーが現在いるステップ) にスタイルを追加します。疑似クラスセレクター「:nth-child」を使用して、ステップ内の最初の要素を選択できます。

.step:nth-child(1) {
  background-color: #007aff;
}

ログイン後にコピー

ここでは、ステップナビゲーションの最初の要素の背景色を青に変更して、アクティブなステップであることを示します。

次に、各ステップにホバースタイルを追加する必要があります。ユーザーがステップ要素の上にマウスを置くと、CSS を通じて明るい色を追加してユーザーの注意を引くことができます。

.step:hover {
  background-color: #ff4a57;
}

ログイン後にコピー

これで、ステップナビゲーションにすでにいくつかの基本スタイルが設定されていることがわかります。ただし、ステップ間のフローをより適切に表現するために、ステップ間の接続を追加する必要もあります。疑似要素セレクター「::before」と「::after」を使用して、長方形の線を作成できます。

.step::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 20px solid #ccc;
  left: -20px;
  z-index: -1;
}

.step:first-child::before {
  display: none;
}

.step:last-child::after {
  display: none;
}

.step::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 20px solid #ccc;
  right: -20px;
  z-index: -1;
}

ログイン後にコピー

ここでは、絶対配置を使用して各ステップに疑似要素を追加し、テキストが生成されないように「content」属性を「」に設定します。また、「border」プロパティを使用して、長方形の線を作成しました。

最後に、「first-child」と「last-child」の擬似クラスを使用して最初と最後のステップを選択し、その「::before」と「::after」の擬似要素を追加します。ステップナビゲーションの両端に不要な水平線が表示されないようにするためです。

これで、カスタムステップナビゲーションのすべてのスタイルが完成しました。最終結果はブラウザで確認できます。

<html>
  <head>
    <style>
      .step-nav {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .step {
        width: 100px;
        height: 50px;
        background-color: #ccc;
        margin: 0 10px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        border-radius: 5px;
        position: relative;
      }

      .step:nth-child(1) {
        background-color: #007aff;
      }

      .step:hover {
        background-color: #ff4a57;
      }

      .step::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 20px solid #ccc;
        left: -20px;
        z-index: -1;
      }

      .step:first-child::before {
        display: none;
      }

      .step::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #ccc;
        right: -20px;
        z-index: -1;
      }

      .step:last-child::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="step-nav">
      <div class="step">
        <span>步骤1</span>
      </div>
      <div class="step">
        <span>步骤2</span>
      </div>  
      <div class="step">
        <span>步骤3</span>
      </div>
      <div class="step">
        <span>步骤4</span>
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

一般に、ステップナビゲーションは Web デザインにおいて非常に実用的な要素の 1 つであり、特に複数ステップのタスクを完了する場合に、ユーザーの操作を容易にします。 CSS を使用して単純なステップバイステップのナビゲーションを作成するのは比較的簡単で、スタイルの詳細に注意するだけです。

以上がCSS を使用して簡単なステップナビゲーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。