Q&A
シェル なのか css なのか タグは一致させてください
テーマ、知りたいこと
プログラムを完成させたい
みんなに聞きたいこと、知りたいことを簡潔に書いてください。
背景、状況
テーマや知りたいことについて、なぜ聞きたいかの背景やどういった状況かを書いてください。
詳しく記入することで、良い回答が得られやすくなります。
コメントありがとうございます。
見様見真似で作ったものなでシェルなのかCSSなのかは全く存じておらず、調べましたがよく理解できませんでした。
参考サイト等があれば教えていただけますでしょうか？
貴殿の書いたソースの状態だと読みづらいのですが、
エディタからコードとしてのシンタックスハイライトを設定することはできませんでしょうか？
```html
```
で囲うなどして。
また多分ですが、タイトルが「文字をスクロースさせたい」ではなく、「文字をスクロールさせたい」ではないでしょうか？
もしくは「文字を横にアニメーションさせたい」かもしれません。
多分、タグも シェル ではなく、 CSS ではないでしょうか？
https://teratail.com/help/question-tips#questionTips11
https://teratail.com/help/question-tips
https://gakusei-bunka.org/
は読みましたか？
読んだ結果を本文に反映ください。解決のヒントを探れるかもしれません。
コメントありがとうございます。感謝です！
文章をスクロールさせる。ですね、間違えました。
Visual Stadio Code に書き込みました
<!DOCTYPE html>
<html>
<head><body>
<meta charset="utf-8">
<title>16-1</title>
<style type = "text/css">
.wakate-banner {
width: 100%;
height: 0px;
line-height:100px;
overflow: hidden;
background:white;
}
.wakate-banner span{
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation: wkate 3s linear 0s 2 normal;
}
@keyframes wakate {
0% { transform: translateX(100%);
}
to { transform: translateX(0%);
}
}
</style>
div class="wakate-banner">
<td class="base"><span> 24/05/08 「若手職員研修会」の受付を開始しました</span>
</div>
</body> </head>
</html></html>
上記のように修正しましたがまだ解決できていません。
いや、そのコードをここのコメント欄に書くのではなくて、質問文に書いてください。質問文ならシンタックスハイライト利きますし、わざわざコメント欄を探さなくていいので。
その内容からコピーして wakate-banner の div のタグ始まりがおかしかったのを修正したものがこれになります。（内容はあっていますか？
https://livecodes.io/?x=id/xn4nzdanxyu
ありがとうございます。感謝です！
内容はあっております
が、やはり動きませんでした
回答2件
0
typoなど基本的なものを見直してください
とりあえず提示されたソースのいらない部分をけずったところここまできました
html
1<style> 2.wakate-banner span{ 3display : inline-block; 4animation: wakate 3s linear 0s 2 normal; 5} 6@keyframes wakate { 7 0% { transform: translateX(100%);} 8 to { transform: translateX(0%);} 9} 10</style> 11<div class="wakate-banner"> 12<span> 24/05/08 「若手職員研修会」の受付を開始しました</span> 13</div>
これをベースに想定する動作と違うようであればごしてください
投稿2024/05/22 06:56
総合スコア115870
0
ソース見た感じ
animationに渡しているのがwkateだが、@keyframeのはwakate.wakate-bannerの 高さは 0 なので表示される筈も無いのでこの場合は height を指定しない方がいいのでは？@keyframesの アニメーションにて、translateX()がうまく聞いていないのでそのままpadding-leftの長さを変更した方がいいのでは？
ということを踏まえると次の様になります。
※ body 配下のみのソース
html
1<style type="text/css"> 2 .wakate-banner { 3 width: 100%; 4 line-height: 100px; 5 overflow: hidden; 6 background: white; 7 } 8 .wakate-banner span { 9 display: inline-block; 10 padding-left: 100%; 11 white-space: nowrap; 12 line-height: 1em; 13 animation: wakate 3s linear 0s 2 normal; 14 } 15 16 @keyframes wakate { 17 0% { 18 paddnig-left: 100%; 19 } 20 to { 21 padding-left: 0; 22 } 23 } 24</style> 25 26<div class="wakate-banner"> 27 <td class="base"> 28 <span> 24/05/08 「若手職員研修会」の受付を開始しました</span> 29 </td> 30</div>
以上。
投稿2024/05/22 06:54
総合スコア225
あなたの回答
tips
プレビュー
