【はてなブログ】枠やいろいろなものを点滅させる方法で使った
CSSアニメーション。
これを使って今回は枠の中に文章を流してみたいと思います。
駅の電車案内みたいな電光掲示板をイメージすればわかりやすいかな。
こんな感じに枠の中を文章が右から左に流れていくやつです。
新着情報やお知らせなどに使えそうですね。
上のは駅の電光掲示板風にしてみたけど、もちろんいろいろカスタマイズできますよ。
横に流れるテキストのコード
コードの説明なんていらねぇ！
使えればいいんじゃあ！って人は以下のコードを
そのままコピペすれば大丈夫です。
・CSS
<style> .scroll { margin: auto; width: 100%; border: 5px double #ffffff; color: #ffa500; overflow:hidden; background-color: #000000; } .info { font-size: 14px; display: inline-block; padding-left: 100%; white-space: nowrap; line-height: 3em; animation: denkoukeijiban 18s linear infinite; } .info div {display: inline-block; margin-right: 10px;} @keyframes denkoukeijiban{ 0% {transform: translateX(0)} 100% {transform: translateX(-100%)} } </style>
・html
<div class="scroll"><div class="info"><div class="info1">ここに文章 </div> <div class="info2"><a href="リンクのURL">リンクにする文章</a></div> </div> </div>
リンクにする必要がない場合は
<a href="リンクのURL"></a>の部分を削除してください。
<div class="info1">ここに文章</div>の部分に
全ての文章を入れてもいいですが、
<div class="info2">ここに文章</div>として
細かく分けてやった方が管理しやすいです。
コードの説明
では、自分用にカスタマイズしたい人向けに
コードの説明をしていきます。
CSSの説明
.scroll { margin: auto; width: 100%; border: 5px double #ffffff; color: #ffa500; overflow:hidden; background-color: #000000; }
・margin
枠外の空白の設定です。
特に理由がなければautoで大丈夫です。
・width
枠の大きさの設定です。
ここの範囲でテキストがスクロール表示されます。
100%で画面全域です。
pxでの設定もできますが、人によって画面のサイズは異なるので
%で設定した方がいいです。
・border
枠の種類の設定です。
枠の線の大きさ、種類、色の順に設定していきます。
さらに細かく設定することもできます。
枠の種類については
【はてなブログ】文章を囲ういろいろな枠の作り方を
参考にしてください。
・color
テキストの色の設定です。
www.colordic.org
などで使いたい色を調べて設定しましょう。
・overflow
枠からはみ出たテキストをどう処理するかの設定です。
枠外のテキストは表示したくないのでここはhiddenのままで。
・background-color
枠内の色の設定です。
ここも使いたい色を調べて入力しましょう。
.info { font-size: 14px; display: inline-block; padding-left: 100%; white-space: nowrap; line-height: 3em; animation: denkoukeijiban 18s linear infinite; }
・font-size
テキストの大きさの設定です。
お好みの大きさを設定しましょう。
・display
表示方法の設定です。
ここはinline-blockのままにしましょう。
詳しい説明はここでは省きますが
サルワカくん様の【CSS】displayの使い方を総まとめ！inlineやblockの違いは？で
わかりやすく説明されています。
・padding-left
ここも100%のままで。
左側の余白を100％にすることでテキストの初期値を一番右側に設定しています。
こうすることで右から左にテキストが流れるように表示されるわけですね。
・white-space
文章を自動的に改行するかの設定です。
何も設定しないと下のように画面端で自動で改行されてしまいます。
nowrapとすることで自動で改行されなくなります。
・line-height
line-heightは行間の設定です。
ここで指定した数値からフォントサイズを引いた数値の半分が
上下に余白として挿入されます。
（line-heightの値ーフォントサイズ）÷２＝各上下の余白ですね。
ここでは3emと設定しているので
フォントサイズの1em（1em=基本フォントサイズ。このブログでは16px）を引いた
2emの半分、つまり1em分上下に余白を作るということになります。
ここはお好みに応じて値を変更しましょう。
・animation
ここが一番大事なところです。
アニメーションの設定です。
アニメーションの定義、時間、進行具合、回数と指定していきます。
denkoukeijiban 18s linear infiniteは
18秒かけて一定の速度で無限に繰り返すアニメーションを
denkoukeijibanと言う名で設定と言うことになります。
denkoukeijibanはアニメーションの定義名なので、
次の@keyframesと同じ定義名にすれば好きな定義名にして大丈夫です。
もちろん設定を変えることによっていろいろなアニメーションにすることができます。
CSSアニメーションについては
【はてなブログ】枠やいろいろなものを点滅させる方法を
参考にしてみてください。
.info div {display: inline-block; margin-right: 10px;}
<div class="">～</div>で表示する文章を個別に設定できるようにするコードです。
ここはこのままで。
@keyframes denkoukeijiban{ 0% {transform: translateX(0)} 100% {transform: translateX(-100%)} }
先ほど設定したアニメーションの設定をどのようにアニメーションさせるかの設定です。
0%、100%でアニメーションの始点と終点を設定し、
translateXで横方向にアニメーションさせます。
translateXの後の（）内にアニメーションさせる位置を設定します。
ここでは0の位置から-100%の位置に横移動させるという設定です。
padding-left: 100%;でテキストの初期位置を右端に設定したので
translateX(-100%)で左端までアニメーションさせるってことですね。
htmlの説明
<div class="scroll"><div class="info"><div class="info1">ここに文章 </div> <div class="info2">ここに文章</div> </div> </div>
ここに文章に表示したい文章を入力するだけです。
文章は装飾など、普段の通りに入力できます。
クラス名は上二つはCSSで設定したものと同じものでなければいけませんが、
文章を入力するところのクラス名は何でも大丈夫です。
自分で管理しやすいものにするといいでしょう。
<div class="～">を追加することで文章を増やすことができます。
そのまま文章を増やしても大丈夫ですが、項目ごとに分けた方が管理しやすいです。
テキストリンクにする場合は
<div class="info2">2021/10/xx：<a href="リンクのURL">リンクにする文章</a>リンクにしない文章</div>
のように
<a href="リンクのURL">リンクにする文章</a>
をここに文章のところにa href構文を入力すればできます。
青い部分がテキストリンクです。
同じように
<img src="画像のリンク" alt="代替テキスト">
をここに文章のところに入力することで
画像を表示することもできます。
<div class="info3"><img src="画像のURL" alt="代替テキスト"></div>
こんな感じですね。
サイズを合わせるとよくわからなくなってしまいますけど…
<img src="画像のリンク" alt="代替テキスト">を
<a href="リンクのURL">リンクにする文章</a>
のリンクにする文章の中に入力することで
画像リンクにすることもできます。
<div class="info2"><a href="リンクのURL"><img src="画像のURL" alt="代替テキスト"></a></div>
こんな感じです。
👈画像リンクだよ！まとめ
横に流れるテキスト。
お知らせなど何日分かをまとめて表示すると縦に長くなってしまうのを
小さくまとめられるので便利です。
見た目にもちょっとおっ！っとなりますしね。
今回は駅の電光掲示板を見て思いついたので
駅の電光掲示板っぽく作ってみましたが、
お知らせや新着情報などは下のようにシンプルにした方が見やすくていいですね。
ポイントさえ押さえればカスタマイズも自由にできるので
自分のサイトにあったものにするといい感じになります。
※サウンドオルビス様の
CSSだけで自動横スクロール実装したから、やり方を解説するよ!!を
参考にさせていただきました。