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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

CSS

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

解決済

CSSでアニメーションを作ろうとしたのですが、画像が表示されません。

KawamotoFumiya
KawamotoFumiya

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

CSS

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

2回答

0評価

0クリップ

3閲覧

投稿2019/05/27 00:58

HTMLで雨だれを8個配置し、 cssでランダムっぽく出るようにしてみたのですが、
いざ、ブラウザに入れてみると、雨だれが表示されません。

↑これです
何が足りなかったのでしょうか。

html

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> @import url("Cola.css"); </style> <link href="Cola.css" rel="stylesheet" type="text/css"> </head> <body> <section id="ame"> <div class="ame1"></div> <div class="ame2"></div> <div class="ame3"></div> <div class="ame4"></div> <div class="ame5"></div> <div class="ame6"></div> <div class="ame7"></div> <div class="ame8"></div> </section> </body> </html>

css

@charset "UTF-8"; /* CSS Document */ section.inner div{ opacity: 0; -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-animation-name: Drop; animation-name: Drop; -webkit-animetion-interation-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #ame.inner div{ position: absolute; display: block; width: 10px; height: 15px; background: url(雨.png) no-repeat; } #ame.inner div.ame1, inner div.ame2, inner div.ame3, inner div.ame4, inner div.ame5, inner div.ame6, inner div.ame7, inner div.ame8{ background-size: 5px 6px!important; } .ame1{ left:20px; -webkit-animation-duration:2.5s; animation-duration: 2.5s; } .ame2{ left:40px; -webkit-animation-duration:2.7s; animation-duration: 2.7s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .ame3{ left:60px; -webkit-animation-duration:2.9s; animation-duration: 2.9s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .ame4{ left:80px; -webkit-animation-duration:2.4s; animation-duration: 2.4s; -webkit-animation-delay: 0s; animation-delay: 0s; } .ame5{ left:100px; -webkit-animation-duration:2.4s; animation-duration: 2.4s; -webkit-animation-delay: 1s; animation-delay: 1s; } .ame6{ left:150px; -webkit-animation-duration:2.2s; animation-duration: 2.2s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .ame7{ left:170px; -webkit-animation-duration:2.7s; animation-duration: 2.7s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .ame8{ left:200px; -webkit-animation-duration:3s; animation-duration: 3s; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } @-webkit-keyframes Drop{ 0%{ -webkit-transform:translateY(0px); transform: translateY(0px); opacity: 0; } 50%{ -webkit-transform:translateY(50px); transform: translateY(50px); opacity: 1; } 100%{ -webkit-transform:translateY(100px); transform: translateY(100px); opacity: 0.3; } } @keyframes Drop{ 0%{ -webkit-transform:translateY(0px); transform: translateY(0px); opacity:0; } 50%{ -webkit-transform:translateY(50px); transform: translateY(50px); opacity:1; } 100%{ -webkit-transform:translateY(100px); transform: translateY(100px); opacity:0.3; } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2019/05/27 01:10

今、どういう動作、表示になっているのでしょうか。 ファイル名を半角にしても同じですか?
KawamotoFumiya
KawamotoFumiya

2019/05/27 01:48

Dreamweaberで作って、htmlにstyleシートをつけました。 クロームで開いても真っ白な画面が出て特に何もありません。 ファイル名を変えてみます。
m.ts10806
m.ts10806

2019/05/27 01:55

@importが邪魔してたり? 念のため現在の画面でブラウザ「ソースを表示」でhtml確認しておいてください。あとデベロッパツールのコンソールでエラー確認。
m.ts10806
m.ts10806

2019/05/27 02:02

あと「何も表示されない」だと「表示させてないから何も出ていない」のか「何かしらエラー等あって何も出ていない」のか分かりませんので、 現在のHTMLだけですと文字列も何も画面に出していないのでどちらか分かりにくくなります。 例えばh1タグでタイトルを出しておいたりして問題の切り分けができるようにしておきましょう。(やりたい動作ができたら後で消せば良いです。デバッグのために入れるので)

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

CSS

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