【CSS】会社沿革のタイムラインをシンプルなデザインで作成する

こんにちは、Ryohei（@ityryohei）です！

本記事では最近のコーポレートサイトの沿革や個人の経歴等で使用されているタイムラインをCSSのみで、シンプルなデザインで作成するをご紹介しています。

最近よく見かける縦の線が入った沿革を作りたいだけど、どうやって作ればいいの？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事ではコーポレートサイトの沿革等で使用される下記のようなタイムラインを作成します。

See the Pen CSS Timeline by ryohei (@intotheprogram) on CodePen.

よく見かけるボーダー＋丸記号のシンプルなデザインのものです。いつ頃増え始めたかは覚えていないですが、今では沿革といえばタイムラインで表示だ、というくらい一般的です。

特に最近では上記の内容をアニメーションが表示する沿革が増えてきているような気がします。本記事には含まれないないようですが、Animate.cssの使用例につきましては下記の記事でご紹介していますので、参考にしていただければ幸いです。

タイムラインを作成する

冒頭でご紹介したタイムラインを作成してみます。HTMLのdateには日付を、contentには内容を指定します。スタイルは、SCSSとCSSをご用意していますので、思い思いにカスタマイズしてご利用ください！

HTML

<div class="timeline">
    <ul class="timeline-list">
        <li class="timeline-list-item">
            <div class="date">2015年12月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2016年02月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2016年05月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2018年01月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2019年03月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2020年10月</div>
            <div class="content">......</div>
        </li>
        <li class="timeline-list-item">
            <div class="date">2021年04月</div>
            <div class="content">......</div>
        </li>
    </ul>
</div>

SCSS

.timeline {
    width: 96%;
    max-width: 940px;
    margin: 28px auto;
    border: 1px solid #eeeeee;
    
    &-list {
        padding: 40px 0;
        
        &-item {
            display: flex;
            line-height: 1.5;
            font-size: 16px;
            
            .date {
                width: 20%;
                padding: 0 0 0 20px;
                color: #888888;
                font-weight: bold;
            }
            
            .content {
                position: relative;
                width: 80%;
                padding: 0 20px 60px 30px;
                border-left: 1px solid #aaaaaa;
                
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -10px; //widthの半分の値を指定
                    width: 20px;
                    height: 20px;
                    background-color: #00c2bc;
                    border-radius: 10px;
                }
            }
        }
    }
}

CSS

.timeline {
    width: 96%;
    max-width: 940px;
    margin: 28px auto;
    border: 1px solid #eeeeee;
}

.timeline-list {
    padding: 40px 0;
}

.timeline-list-item {
    display: flex;
    line-height: 1.5;
    font-size: 16px;
}

.timeline-list-item .date {
    width: 20%;
    padding: 0 0 0 20px;
    color: #888888;
    font-weight: bold;
}

.timeline-list-item .content {
    position: relative;
    width: 80%;
    padding: 0 20px 60px 30px;
    border-left: 1px solid #aaaaaa;
}

.timeline-list-item .content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px; //widthの半分の値を指定
    width: 20px;
    height: 20px;
    background-color: #00c2bc;
    border-radius: 10px;
}

以上でシンプルなタイムラインの作成は完了です！

最後に

本記事でご紹介した内容は本当にタイムラインの骨組みでしかなくて、実際にコーポレートサイトの沿革や個人の経歴の紹介ページで使用されているタイムラインは見た目もアニメーションもこだわって作られているものが多いです。本記事の内容を基にカスタマイズしていただいて、オリジナルのタイムラインを作成していただければと思います。

以上、CSSで会社沿革のタイムラインをシンプルなデザインで作成するのご紹介でした！