<div class="electric-board"> <div class="seat-info"> <div class="info-container"> <p class="info -ja">指定席</p> <p class="info -en">Reserve</p> </div> </div> <div class="message-container"> <p class="message">新幹線車内メディアの電光文字広告は、64文字のメッセージ、7色から選べる表示色、東京〜新大阪、1ヶ月表示で330万円になります。</p> </div> </div>
body { font-size: 62.5%; box-sizing: border-box; } .electric-board { display: flex; flex-direction: row; align-items: center; padding: 10px; .seat-info { height: 90px; min-width: 80px; } .message-container { height: 90px; margin-left: 10px; flex-grow: 1; } } .electric-board { background-color: #9B9B99; } .seat-info { display: flex; align-items: center; justify-content: center; background-color: #333333; color: #A5F91F; > .info-container { > .info { text-align: center; &.-ja { font-size: 1.3rem; } &.-en { font-size: 0.8rem; } } } } .message-container { display: flex; align-items: center; background-color: #333333; overflow: hidden; width: 100%; > .message { display: inline-block; color: white; font-size: 2rem; white-space:nowrap; padding-left: 100%; animation-name: marquee; animation-timing-function: linear; animation-duration: 15s; animation-iteration-count: infinite; &::after { content: ''; white-space:nowrap; padding-right: 100%; } } } @keyframes marquee { from { transform: translate(0); } to { transform: translate(-100%); } }