サイト上で右から左に文字が流れるように設定するお話

IE全盛期にはHTMLタグだけで文字が流れるようにすることができました。

今はもう廃止になったようなのでjavascriptやcssで設定する必要があります。

ググってるとcssのほうが簡単そうだったのでcssでトライしてみました。

css設定

参考サイト（生成ツール）

https://webparts.cman.jp/string/scroll/

テスト表示

もじがながれるてすとです

HTML

<div class="div_marquee">
    <span>もじがながれるてすとです</span>
</div>

CSS

.div_marquee {
    margin : 0 auto 10px;
    width : 100%;
    text-align : center;
    overflow : hidden;
    color : #fff;
    background : #000;
}
.div_marquee span {
    margin:0;
    display : inline-block;
    padding-left: 100%;
    white-space : nowrap;
    line-height : 1em;
    animation : scroll_marquee 20s linear infinite;
}
@keyframes scroll_marquee {
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}

ちょろいぜ！と思いましたがここからが大変でした。

位置を調整して画像の上に表示とかしたあとPCでは問題ないのですが、スマホで見るとはみ出て横にスクロールできてしまうという。

px指定の部分を修正したり試行錯誤したけど改善できず。

たどり着いた答えが下記サイト。

スマホサイトでtableの横幅をはみ出さない方法 | ネットインパクト

今年もニコニコ超会議に行って来たjyunzyです。相変わらず人が多い！（今年の来場者数は15万人だったそうです。去年より3万人多い！）生で有野課長を見れたし、色んなコスプレイヤーさんも見れたし、自衛隊ブースでの記念撮影も楽しめました。

スマホサイトでtableの横幅をはみ出さない方法

これがドンピシャでした。

位置調整している際にtable内に記述してました。

table {
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}

上記のcssを追記したところスマホでも正常に表示することができました。

【CSS】文字が流れるように設定する

サイト上で右から左に文字が流れるように設定するお話

css設定

コメント