質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5563閲覧

cssで文字を一文字ずつゆっくりと表示させたい

hisui-ferret

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2021/05/14 14:11

編集2021/05/14 16:45

初心者で無知なことが多いですがご容赦ください。

今、架空の観光地サイト制作を試みてます。

トップページに画像を配置することはできました。その画像の上にテキストを表示させたいのですが、
cssのアニメーションで一文字ずつゆっくりと表示させたいのです。

ネットで似たようなコードを見つけましたが、自分で調整できず行き詰まってしまいました。

お力添えいただけたら幸いです。

追記
まだCSS入力に行き詰まっていますのでもう少し進んだら再度更新いたします。その際はご解答いただけたら幸いです。

●HTML <div class="slidebox"> <p class="toptext">文字文字文字</p> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

meg_

2021/05/14 16:18

html, cssが無いので分かりません。途中で良いのでコードを載せてください。
hisui-ferret

2021/05/14 16:42

まだhtmlしか入力できていない状態なのですが、こう言った質問をする際はcssもある程度入力してからのほうがよろしいでしょうか? 情報量が足りず解答していただくのは難しい、ですよね。無知で申し訳ないです。もう少し自力で入力してから再度質問させていただければと思います。
guest

回答1

0

ベストアンサー

例えばこんな感じでしょうか。

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @keyframes fadeIn { 7 to { opacity: 1; } 8 } 9 .c1, .c2, .c3, .c4, .c5, .c6 { 10 opacity: 0; 11 animation: 2.0s linear forwards fadeIn; 12 } 13 .c1 { animation-delay: 0.0s; } 14 .c2 { animation-delay: 0.5s; } 15 .c3 { animation-delay: 1.0s; } 16 .c4 { animation-delay: 1.5s; } 17 .c5 { animation-delay: 2.0s; } 18 .c6 { animation-delay: 2.5s; } 19 </style> 20 </head> 21 <body> 22 <div class="slidebox"> 23 <p class="toptext"> 24 <span class="c1"></span> 25 <span class="c2"></span> 26 <span class="c3"></span> 27 <span class="c4"></span> 28 <span class="c5"></span> 29 <span class="c6"></span> 30 </p> 31 </div> 32 </body> 33</html>

投稿2021/05/14 17:06

hoshi-takanori

総合スコア7893

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hisui-ferret

2021/05/15 02:38

こちらをコピペさせていただき文字だけ変えたところ、思っていた感じのものになりました。 まさかhtmlのみで出来るとは思っていませんでしたので驚いてます。 学ぶことはまだまだ多い......! ご回答いただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問