Bloggerデザイン : 左右交互のタイムライン

1. デザインのタイプ

【垂直タイムライン（バーティカル・タイムライン）】
中央に一本の軸を通し、左右交互にコンテンツを配置するスタイリッシュな履歴表示デザインです。

2011

Neque sunt voluptatibus repellat pariatur ut enim. Eveniet rerum suscipit.

2012

Quo nobis cumque dolor iure voluptatem voluptatem alias soluta.

2013

Rerum sit libero possimus amet excepturi. Exercitationem enim dolores.

2014

Voluptatibus veniam ea reprehenderit atque. Reiciendis non laborum.

2015

Adipisci totam omnis cum et suscipit excepturi et excepturi.

2016

Impedit dolorem commodi explicabo fugit aut alias voluptatem.

2. デザインの特徴

• シンメトリーな配置
  奇数番目と偶数番目のエントリーを左右に振り分けることで、視覚的なリズムを生みます。
• 重要度の強調
  bigクラスを使用することで、特定の年や出来事のドットを大きくし、マイルストーンとして強調可能です。
• レスポンシブ設計
  画面幅が狭いデバイスでは、自動的に1列のレイアウトに切り替わり、視認性を損ないません。

3. 紹介コード

<div class="timeline-container">
  <div class="timeline-entries">
    <!-- 左側に配置されるエントリー -->
    <div class="entry">
      <div class="title">年</div>
      <div class="body"><p>ここにはその年の出来事を記述します。</p></div>
    </div>
    <!-- 右側に配置されるエントリー -->
    <div class="entry">
      <div class="title">年</div>
      <div class="body"><p>左右交互に自動で配置されます。</p></div>
    </div>
    <!-- bigクラスでドットを強調 -->
    <div class="entry">
      <div class="title big">年</div>
      <div class="body"><p>重要な節目の年はbigクラスで見出しを強調できます。</p></div>
    </div>
  </div>
</div>

<style>
.timeline-container {
    background-color: #1D1D1D;
    padding: 40px 0;
    font-family: sans-serif;
    position: relative;
    overflow: hidden;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 4px;
    background-color: #ffffff;
}
.timeline-entries {
    width: 100%;
    max-width: 800px;
    margin: auto;
    position: relative;
}
.timeline-entries .entry {
    width: 50%;
    padding: 10px 40px;
    clear: both;
    box-sizing: border-box;
    position: relative;
}
.timeline-entries .entry:nth-child(odd) { float: left; text-align: right; }
.timeline-entries .entry:nth-child(even) { float: right; text-align: left; }
.timeline-entries .entry .title {
    font-size: 32px;
    color: #ffffff;
    position: relative;
}
.timeline-entries .entry .title::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 4px solid #ffffff;
    background-color: #1D1D1D;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}
.timeline-entries .entry:nth-child(odd) .title::before { right: -47px; }
.timeline-entries .entry:nth-child(even) .title::before { left: -47px; }
.timeline-entries .entry .title.big::before { width: 28px; height: 28px; }
.timeline-entries .entry:nth-child(odd) .title.big::before { right: -54px; }
.timeline-entries .entry:nth-child(even) .title.big::before { left: -54px; }
.timeline-entries .entry .body { color: #aaaaaa; }
</style>