ホームページ > 記事 > ウェブフロントエンド > CSS を使用して簡単なステップ ナビゲーションを作成する方法
CSS を使用して簡単なステップ ナビゲーションを作成する方法
- PHPzオリジナル
- 2023-04-25 10:47:17624ブラウズ
ステップ ナビゲーションは、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 サイトの他の関連記事を参照してください。