CSSタイムラインを作成するには、HTMLとCSSのみが必要であり、JavaScriptは必要ありません。 2。時點とコンテンツを含む構(gòu)造化されたHTMLを使用します。 3.擬似要素の前に、::容器に中央の垂直線を描畫します。 4. FlexBoxレイアウトとポジショニングを使用して、左右のコンテンツの配置を制御します。 5.各時點に円形マーキングポイントを追加します。 6.メディアクエリを介してレスポンシブデザインを分析し、左側(cè)のコンテンツを配置し、小さな畫面のタイムライン位置を調(diào)整します。最後に、美しく応答性の高い垂直タイムラインを?qū)g現(xiàn)し、複數(shù)のデバイスで表示されます。

CSSでタイムラインを作成することは、年代順にイベントを視覚的に表示する素晴らしい方法です。 JavaScript（HTMLとCSS）は必要ありません。応答性があり、カスタマイズしやすい、きれいで垂直のタイムラインを構(gòu)築する方法は次のとおりです。

1?；镜膜蔋TML構(gòu)造

コンテナとタイムラインアイテムを使用したシンプルな構(gòu)造から始めます。各アイテムには、日付、タイトル、コンテンツが含まれます。

 <div class = "タイムライン">
  <div class = "timeline-item">
    <div class = "Timeline-date"> 2023 </div>
    <div class = "Timeline-Content">
      <h3>プロジェクトが開始されました</h3>
      <p>最初の主要製品を発売しました。</p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "timeline-date"> 2024 </div>
    <div class = "Timeline-Content">
      <h3>拡張チーム</h3>
      <p>は5人から20人のチームメンバーに成長しました。</p>
    </div>
  </div>

  <div class = "timeline-item">
    <div class = "Timeline-date"> 2025 </div>
    <div class = "Timeline-Content">
      <h3>グローバルリリース</h3>
      <p>世界中のアプリをリリースしました。</p>
    </div>
  </div>
</div>

2。タイムラインラインとレイアウトのコアCSS

容器の上に擬似要素（ ::beforeような）を使用して、中央の線を描きます。その行に対する各アイテムを配置します。

 .timeline {
  位置：相対;
  最大幅：800px;
  マージン：0 Auto;
  パディング：20px 0;
}

/ *垂直線 */
.timeline :: before {
  コンテンツ： '';
  位置：絶対;
  上：0;
  下：0;
  幅：4px;
  背景：＃007bff;
  左：50％;
  変換：translatex（-50％）;
}

.timeline-item {
  位置：相対;
  マージンボトム：30px;
  ディスプレイ：Flex;
  justify-content：space-bethed;
  Align-Items：Center;
}

/ *代替左/右のコンテンツレイアウト */
.timeline-item：nth-child（odd）.timeline-content {
  注文：1;
  マージン右：50px;
  テキストアライグ：右;
}

.timeline-item：nth-child（偶數(shù)）.timeline-content {
  注文：2;
  マージン左：50px;
  テキストアライグ：左;
}

.timeline-date {
  font-weight：bold;
  色：＃333;
  パディング：8px 12px;
  背景：＃007bff;
  色：白;
  ボーダーラジウス：6px;
}

3.タイムラインマーカー（ドット）を追加

::before各.timeline-itemで使用する前に、ラインにラウンドマーカーを作成します。

 .timeline-item :: before {
  コンテンツ： '';
  位置：絶対;
  幅：20px;
  高さ：20px;
  背景：白。
  國境：4pxソリッド＃007bff;
  ボーダーラジウス：50％;
  トップ：50％;
  左：50％;
  変換：翻訳（-50％、-50％）;
  z-index：1;
}

4。レスポンシブデザイン

小さな畫面で、コンテンツを片側(cè)に積み重ね、タイムラインを中央に置きます。

 @media（max-width：768px）{
  .timeline :: before {
    左：30px;
  }

  .timeline-item {
    フレックス方向：列;
    Align-Items：Flex-Start;
  }

  .timeline-item :: before {
    左：30px;
  }

  .timeline-date、
  .timeline-content {
    マージン左：50px;
    テキストアライグ：左;
  }

  .timeline-content {
    マージントップ：10px;
  }
}

重要なヒント

• 使用position: relative .timeline-itemの相対的なもので、マーカードットが正しく配置されます。
• left: 50%を調(diào)整し、 transformアイテムを中心線に合わせます。
• 水平方向のタイムラインの場合、 flex-direction: row使用しますが、垂直はより一般的で、応答性を高めやすくなります。
• 必要に応じて、後でJavaScriptを使用してアニメーション（たとえば、スクロールでフェードイン）を追加できます。

基本的に、ポジショニング、擬似要素、FlexBoxの巧妙な使用です。小さなCSSを使用すると、デバイス全體で機能するプロフェッショナルな外観のタイムラインが得られます。

以上がCSSでタイムラインを作成する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。