見出し画像

(HTML、CSS)なぜか表示されているゴミみたいなやつ

お問い合わせフォームを作成中

右下になんか表示されとる・・・ゴミ?


作成したお問い合わせフォーム

テキストエリアにborder-radiusを指定していたので、そこが関係しているのかと思ったが違うらしい。
textareaタグを消すとこのゴミも消えることしかわからず彷徨う。
関連するクラスのスタイルをいじってみるも変わらない。

UI Bulid Assistantというプラグインや、以下のコードで要素として存在していないことを確認。

* {
  border: 1px solid red;
}


なぜ存在しているのかがわからず、無心でこのゴミを検証画面でクリックしていると、なぜかheightが変化していた。
・・・?
そういえばテキストエリアの右下に、エリアの高さを変える2本線あったけどもしかしてそれ?

そう思って「テキストエリア 右下」と入れると予測変換で「テキスト エリア 右下 消す」と出てきた。ゴミだと思っていたのは伸縮ボタンだったようで、以下のコードを試すと無事消せた。

textarea {
  resize: none;
}


固定概念は捨てよう

・表示されてはいけないものだと思い込んでいた
・ググり方が下手くそだった
と実感した日でした。
(「HTML CSS ゴミ」とかで検索していたがそもそもゴミではないし表示されているのがデフォルトなんだから)

思いこみやめようっていうのは日常でも言えることですね。
黒っぽい小さいものを見て虫だと思ったら実はただのほこりとか。(オドオドして損した)
洗濯物にゴミがついていると思って触ったら虫だったとか。(なんて日だ)


この記事が気に入ったらサポートをしてみませんか?