CSS

ポップアップアニメーションをつくろう

キーフレームを使ってポップアップのアニメーションを作っていきます。

  • div要素の配置
  • スタイルの設定

div要素の配置

・今回はちょっとしたポップアップをCSSで作っていきます。

 

・ポップアップとは特定の行動（サイトを開いたり特定のリンクをクリックするなど）をしたときに画面前面に現れるウインドウやメッセージのことです。

・通常はJava Scriptなど他の言語を用いて作ることが多いですが簡単なポップアップならCSSで作れるので今回は簡易的なポップアップの作り方について学んでいきます

・今回はサイトを開いたときに画面の左下に「こんにちは」と表示するようなポップアップを作っていこうと思います。

・HTMLではdiv 要素を配置してあげて、 message クラスを付けてあげます。中のテキストは「こんにちは」としておきましょう。

スタイルの設定

・CSSで幅、パディング、背景色を指定していきます。角を丸めて影もつけてあげます。

・配置を常に画面の右下にしておきたいのでposition: fixed;を指定し右と下に３２ｐｘの位置に固定します。

 

-広告-

 

 






-CSS