JS:一定時間で要素を消すtime set out×コメディ
コント：気が利き過ぎる魔法の鏡
鏡よ鏡、世界でいちばん美しいのは誰？
はい！こんにちは！
えっ？！あ、あの、誰？
あーすみません。 魔法の鏡、 仕様が変わってChat式になったんですよ。
えっ？ あ、仕様が、、そ、そうなんですね？
はい。私がご用を賜ります。 えっと、さっきのご質問ですか？
あ、え、ええ。世界でいちばん美しいは誰、って、、、、
えー？聞くのそれでいいんですか？ 鏡に映るの自分しかなくない？一応、鏡なんで
ぇ、あぁ、そうなんだけど。
あーっ確信犯ですねー
あーいや、そういう役割っていうか、、
ルーティンにしてんですね？
あ、はい。
そかそか。ごめんなさい。 じゃ改めて最初からお願いします
(な、なんかフランクだな。ま、まぁいいか ) えっと 鏡よ鏡、世界でいちばん美しいのは誰？
ですね。 うーん難しい質問ですね。
え？
人によって好みも違いますし、多様性の時代でもありますから
は、はあ、 、(え、映してくれないの？
まぁ、同性を好きな人もいますし。 マンガなんかでもBLや百合系は界隈で人気だったりもしますし
え、あぁ、多様性ですか、、 界隈あるんだ、、
ですね～。コンプラ的にも、そうお答えするしかないんですよー。 時代なんで
あぁ時代、、 （ここのは通用しないのね 古いのかな こっちが) でもいわゆる一般的にと言うことで、、
あと一般的に言うと、それ人に聞かなくてもいいんじゃないですか？
え、今までずっと聞いてきたんだけど、、
うーん、ちょっと重症ですねぇ。ひとまず自信持った方がいいと思いますよ
え、ああ、そう？自信、、
身なりもキチンとされてますし、、いい生活してますよね？
まぁ一応王妃ですから、、
なら、そんな自己肯定感低いの、なくないですか？
そうなんだけど、、そう言わないとストーリー進行しないから、、役割で、、
設定ですか。でも、そんな思い込みに囚われていてもしょうがなくないですか？
え、あ、いや、、そうかな
そうやって他人に頼ってる限り、永遠に不安しかなくないですか？
いや、それ言うとお話しが成り立たないから、、白雪姫の、、
あー自分の人生のストーリーは、自分で作んなきゃー
えっ、そうかもね、そうかもだけど、、(ああ、めんどくさくなってきた、でもここで折れたら白雪姫が、、
じゃあ美しくいるために自分で何かやってます？
まぁお化粧は念入りにしてもらってるわ
あ、それ以前に肌のケアは必須でしょ？何やってます？
えっ肌ケア、、ですか、、
そう。こっちの世界では「美白と潤い」基本ですよ
あぁ、そっちでは、、
じゃあ、これあげます！潤美白ローション
えっ、もらえるの？
まぁ一応、魔法の鏡だから
あー、、で、出てくるのね
あと問題はメンタルですね。
メンタル？
心、心の持ちようです。
あ、あぁ、、心、、
こっちの世界では「嫌われる勇気」ってのが常識になっててて
えっ、嫌われる？勇気？
そう。「もし悪口を言われたり嫌われても、それは相手の問題だから、気にする必要はない」って
はぁ、、相手の問題、、嫌われてもいいの？
そう。自分の問題にする必要はない、って事ですね
はぁ (なんか人生哲学、、深っ、、
あと「幸福とは、自分が世の中の為になっているという満足感があればいい」って
えっと、それは「民の為になる事を考えよ」って事かしら？
あなたの立場だとそうなりますね
はぁ。(なんか説得力、、) 見れば素敵なお召し物。あなた、もしや、どちらかの王子ですか？
んーまぁ王子と言えば王子かな。8つね。八王子だし
(ま、マジかぁ。8つの国の王子。そりゃてぇてぇわねぇ
解決しました？
(このままではラチが開かないし、、もういいや) はい。だいたい
じゃあ、請求書、月末に送るんで、お願いしますねー
分かりました。 はぁ、もう白雪姫、、もう消えた
ああ、消えると言えば、、、
えっ！？
ちょっとしたお知らせなど、短時間だけ表示したいもの、ないですか？
えっ？あ、国民へ？
まぁ、そういうの。 要素を一定時間表示した後、削除するスクリプト、紹介しますよ
コード解説：一定時間で要素を消すtime set out
HTML
<body>
<div id=”wrapper”>
<div id=”timeset”>
<div id=”setout”>
価格改定のお知らせ(5/1〜)<br>
材料費、エネルギー価格などの高騰により、勝手ながら全メニュー+550円（税込）とさせて頂きます。<br>
より快適にお過ごしいただる様に努めてまいりますので、よろしくお願いいたします。
</div></div>
<!–/wrapper–></div>
<script src=”js/timeset.js”></script>
</body>
CSS
#setout{ position: fixed;
bottom: 0;
background-color: #efefef;
width: 100%;
height: 130px;
text-align: center;
padding-top:38px;
font-size: 0.95rem;
color:#dc6708;
}
JavaScript
setTimeout(() => {
const parentElement = document.querySelector(‘#timeset’);
const childElement = document.querySelector(‘#setout’);
parentElement.removeChild(childElement);
}, 3000);
3秒後に表示が消えるようにしていますよ。
これは子要素に適用するスクリプトになってるんで、内容がなくても親要素（今回の場合timeset）を書いとくのがポイントですね。
そうね、税の値上げとか、告知しようかしら
あー悪役令嬢、戻ってきた
Share Me !