広告ウインドウのような消せるウインドウをページ内に作りたい

Question

前提・実現したいこと

<div>ウインドウエリア</div>

現状上記のようにdivで囲っただけのウインドウがあるのですが、それをバツボタンで消せるウインドウを作りたいと
考えていますが、どのように検索しても参考になるコードが出てこないため、質問させていただきました。

貼り付けた画像のホームページの右下によく広告ウインドウが表示されて、バツを押すと消えますが、
その広告ウインドウのように右上のバツで消せるようなエリアをページ内に表示したいと考えています。

またウインドウを消したら、下にあるエリアが上に上がってくるようにしたいです。

宜しくお願いいたします。

該当のソースコード

Comments

[spookybird]

もう少しご自分で頑張ってみてください。実現したいことと似たようなことができているサイトの構造を真似してみたり、HTML、CSS、JavaScriptの基礎をしっかり勉強すれば容易に実現可能な内容です。自分で勉強もせずにやりたいことだけ人に聞いてやろうとしてもそれは無理な話です。

[m.ts10806]

まずは要件の細分化から。「divで囲っただけのウインドウをバツボタンで消せる仕組み」そのまま探していたら見つかりっこありません。要件を細分化して部品を作ってつなげてください。

Answer 1

そういうレイアウトを実現するのに、どうhtml/cssを組めばいいかをやってみる。
白紙にペンでお絵かきしながらこの枠(div)のクラスは何で、とかメモするといい。
（他に状況の整理ができる方法が身についているならそっちで。）

広告領域を消す方法にアニメーションを使うかどうかも検討する。
バツボタンで広告要素の縦サイズを連続的に少なくしていって
最後にゼロになったらdisplay:noneにすると実現できるかもしれない。
連続して縦サイズを変更するのにjsを駆使するだろうね。
jQuery使うとシンプルに記述できるだろうか。

成功イメージ、ゴールイメージを膨らまして、
それに向かってコーディングして、
それでも壁にぶつかったらそのときに質問を起こせばいいんじゃないかな。