ステップチャートCSS

ステップ図 CSS

ステップ図は、一連の簡単なステップ指示を通じてプロセスまたは操作プロセスを説明する一般的なグラフィカル ツールです。ステップ図は通常、操作プロセスを明確に示すために、数字、テキスト、または矢印でマークされた幾何学的図形を使用します。 Web デザインと開発では、ステップ図はチュートリアル、ガイド、製品説明ページなどでよく使用されます。

CSS テクノロジーにより、ステップ図のデザインがよりシンプル、高速、そしてより美しくなりました。いくつかの単純な CSS コードを使用して、明確で美しいステップ図を作成できます。

1. ステップ ダイアグラム フレームの作成

まず、ステップ ダイアグラム フレーム、つまり一連のステップ タイルを含むコンテナを作成する必要があります。このフレームは HTML と CSS を使用して作成できます。

<div class="steps-container">
    <div class="step">
        <span class="step-number">1</span>
        <p class="step-description">步骤1</p>
    </div>
    <div class="step">
        <span class="step-number">2</span>
        <p class="step-description">步骤2</p>
    </div>
    <div class="step">
        <span class="step-number">3</span>
        <p class="step-description">步骤3</p>
    </div>
</div>

上記のコードでは、まずステップ図コンテナ (.steps-container) を作成し、次に 3 つのステップ タイル (.step) をそれに追加します。各ステップ タイルには、ステップ番号 (.step-number) とステップの説明 (.step-description) が含まれます。

2. ステップ ブロックのスタイルをデザインする

次に、各ステップ ブロックにスタイルを追加する必要があります。ここでは、CSS 構文を使用して、境界線、背景、影、丸い角などのスタイルを各ステップ タイルに追加します。

.step {
    border: 2px solid #999;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

コードでは、各ステップ タイルに 2 ピクセル幅の実線の境界線を追加し、border-radius を使用してタイルに 6 ピクセルの丸い角を追加します。背景色は白に設定され、box-shadow プロパティを使用してステップ ブロックにライト グレーの影が追加されました。

ステップ番号とステップ指示をより中央に配置して美しくするために、display や​​ align-item などのプロパティを使用してステップ タイルを中央に配置し、適切な量のスペースとパディングを追加します。

3. ステップ番号にスタイルを追加する

CSS を使用すると、非常に簡単にステップ番号 (.step-number) にスタイルを追加できます。次のコードを使用して、ステップ番号のサイズ、色、フォント スタイルを設定できます:

.step-number {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #999;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}

上記のコードは、円のスタイル (境界線の半径: 50%) をステップ番号 (.step) に追加します。 -number) を指定し、そのサイズ (幅や高さなどの属性)、背景色 (background-color)、テキストの色 (color) を設定します。ステップ番号を中央に配置するには、text-align プロパティと line-height プロパティを使用します。

4. ステップ タイル間に接続を追加する

簡単な CSS コードを使用して、ステップ タイル間に矢印、接続、その他のスタイルの線を作成できます。次のコードは、ステップ ブロックの矢印スタイルを作成します。

.step:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px 0 15px;
    border-color: #999 transparent transparent transparent;
    transform: translateX(-50%);
}

このコード ブロックは、各ステップ ブロック (.step) の前に疑似要素を追加して、ステップ ブロック間の矢印 (:before) を作成します。 Position プロパティを使用して各ステップ タイルの上に矢印を位置合わせし、-transform プロパティと left プロパティを使用して矢印を水平方向の中央に配置します。

上記のコード ブロックのスタイル プロパティを変更すると、ステップ ブロック間に直線、点線、および丸みを帯びたスタイルの接続を作成することもできます。

上記の簡単な CSS テクニックを使用すると、美しく詳細なステップ図効果をすばやく作成でき、チュートリアル、ガイド、製品説明などのページの視覚効果と使いやすさが向上します。

以上がステップチャートCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。