【CSS】流れるテキストで新幹線の電光掲示板のようなデザインを実装する

はじめに
- デモ
【実践】流れるテキストを実装する
- 1. HTMLを作成する
- 2. CSSでスタイル適用とアニメーションを設定する
【応用実践】新幹線の電光掲示板風テキストを実装する
- 1.HTMLに要素を追加する
- 2.電光掲示板風CSSを作成する
まとめ

はじめに

今回は、HTMLとCSSアニメーションで流れるテキストの実装方法を紹介します。新着情報などでみかけるデザインの実装方法を手を動かして学んでいきましょう。
応用として新幹線の電光掲示板のデザインも実装します！

デモ

今回実装する流れるテキストのデモです↓<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

新幹線車内の電光掲示板のデザインデモです↓

ソースコードも解説していきますので、ぜひ一緒にやってみましょう！

【実践】流れるテキストを実装する

1. HTMLを作成する

まずは流したい要素をHTMLで作成します。今回は複数の文章を流すことにも対応できるようにリスト形式にしています。

<div class="slide-sample">
    <ul>
    <li>cssで流れるテキストを実装してみよう</li>
    <li class="text-blue">新着情報などを表示しても良いですね</li>
    </ul>    
</div>

2. CSSでスタイル適用とアニメーションを設定する

　.slide-sample {
        margin: 20px auto;
        width: 400px;
        overflow: hidden;
    }

    .slide-sample ul {
        display: inline-block;
        margin: 0;
        padding-left: 100%;
        white-space: nowrap;
        animation: SlideSample 12s linear infinite;
    }

    .slide-sample ul li {
        display: inline;
        margin: 0 80px 0 0;
        color: #333;
        font-size: 32px;
        letter-spacing: .12em;
    }

    .slide-sample ul .text-blue {
        color: #4082e6;
    }

    /* スクロールさせるアニメーション */
    @keyframes SlideSample {
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(-100%)
        }
    }

・親となる要素の”slide-sample”にはoverflow: hidden;を指定してはみ出る部分を非表示にします。
・CSSアニメーションを使い動きの処理を行なっています。0%から100％に向かって処理を行います。
・animationのプロパティにinfiniteを指定し、流れる動きをループで繰り返しています。

ここまでで基本の流れるテキストの実装ができました！

【応用実践】新幹線の電光掲示板風テキストを実装する

基本の流れるテキストを応用して、新幹線の電光掲示板風テキストを実装していきましょう！

1.HTMLに要素を追加する

<div class="box">
<div class="left-box">
<p>指定席<br><span>Reserved</span></p>
</div>
<div class="slide-sample">
    <ul>
    <li>電光掲示板のデザインをCSSで作ってみよう!</li>
    <li>ただいま○○駅を通過しました</li>
    <li>◇新幹線の車内案内のような</li>
    <li>テキストの実装方法を紹介します！</li>
    </ul>    
</div>
</div>

基本の流れるテキストのHTMLに、全体を囲むboxと指定席のleft-boxの要素を追加しました。

2.電光掲示板風CSSを作成する

つづいてCSSを実装していきます。全体を横並びのレイアウトにし、背景色と文字のぼかしなどを設定して電光掲示板風のデザインを作ります。

.slide-sample {
    margin : 20px auto;
    width : 400px;
    overflow : hidden;
    background-color: #38332e; /*掲示板の背景色*/
    border: 3px solid #757575;
}

.slide-sample ul{
    display : inline-block;
    margin: 0;
    padding-left: 100%;
    white-space : nowrap;
    animation : SlideSample 24s linear infinite;
}

.slide-sample ul li{
    display:inline;
    margin: 0 80px 0 0;
    color: #ffffff;
    font-size: 32px;
    letter-spacing: .12em; /*文字の間隔*/
    text-shadow: 0 0 6px; /*文字のぼかし*/
}

@keyframes SlideSample{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}

/* ボックス全体のレイアウト調整 ↓ */
.box{
    display: flex;
    padding: 10px 20px;
    justify-content: start;
    width: 510px;
    background-color: #7a7a7a;
    margin: 0 auto;
}

/* 指定席ボックスのデザイン ↓ */
.left-box{
    margin : 20px auto;
    width : 80px;
    background-color: #38332e;
    border: 3px solid #757575;
}
.left-box p {
    margin: 0 auto;
    color: #30f33d;
    font-size: 20px;
    letter-spacing: .08em;
    text-shadow: 0 0 6px;
    line-height: 0.8;
    padding-top: 10px;
    text-align: center;
}

.left-box p span{
    font-size: 12px;
}

・全体を囲むboxを用意してdisplay: flex;で横並びのレイアウトにします。
・背景色を濃いグレー、文字色を白にして電光掲示板風の配色を作ります。
・text-shadowをつけることで発光しているような文字を表現します。

まとめ

今回はHTMLとCSSアニメーションを使って流れるテキストと電光掲示板を作ってみました。CSSアニメーションを使うとデザインの幅が広がって面白いので、有効に活用していきたいです。
今回実装したような新幹線の電光掲示板など生活の中にあるものを再現してみるのも面白いですね！

電光掲示板デザイン参考：https://pa-tu.work/blog/electric-board