[勝手に解答] Q. プルダウンメニューの作り方

Q&Aサイトを見て、さらに自己学習につなげている、ユゲタです。 メジャーな質問サイトは、何でもジャンルの知恵袋系から、プログラミング専門のteratailやstackoverflowなどがメインになっていて、こうしたサイトを見ていると、質問者の文章スキルの良い悪いという判断で、ちゃんとした返答がされるかどうかが決まってきますが、実は、質問ポイントがよく分からずに、返答が0件になって、ネットのゴミとして葬り去られている質問も少なくありません。 個人的に、こうした質問にそのサイトではなく、自分ごととして、ブログで試してガッテンした事を掲載する企画として、「勝手に質問に答えるシリーズ」を立ち上げてみました。

今回の質問

teratailサイトで、2020/08/19に投稿されていて、もはや解答がられないだろう１週間は余裕で過ぎているので、これに対して答えを見つけてみたいと思います。 質問タイトルは「プルダウンメニューの作り方。」 内容は、要約すると、html+cssで作ったプルダウンの装飾が思ったようにいかないとのこと。 書かれていた、投稿者のソースコードは以下の通り。

See the Pen question #1-1 by YugetaKoji (@geta1972) on CodePen.

これを、以下の画像のようにしたいのだそうだ・・・ ¥

この質問の悪かったポイント

どうやら、質問サイトでは、ソースコード（長めの・・・）を貼り付けて、短文で「教えて！」というスタイルは、嫌われる傾向があります。 確かに、回答する人もデバッグさせられているような感じで、気分良く解答できませんからね。 しかも、読めば学習できる良プログラムではなく、完全に不具合であろうプログラムを１行ずつ読み解いていく労力を考えると、なんとも、やるせない感じで時間の無駄という感情が先に走ってしまうからでしょう。 この質問は、手書きで一生懸命解答を得ようとしていますが、画像を見ても、何をどうしたいのかよく分からず、明確に「何をどうしたい」という目的を書けばもう少し手伝ってくれる人もいたのではないでしょうか？

質問のポイントを考える

とりあえず、質問者に直接聞くことができないので、こちらで質問内容を理解してみましたが、 そもそも、selectタグを手書き図のように、独自に装飾をしたいというのが目的で、ポイントは、セレクト要素の右側の三角部分をcssで作り出したいのだと思われます。 あと、そこの背景に色付けして、なんとなく操作できる状態にすると、 このときに、文字バランス、三角図形の表示バランスが、極めて良くないので、これを直して欲しいという風に考えられました。

解決

ズバリ、正解を貼り付けます。

See the Pen question #1-2 by YugetaKoji (@geta1972) on CodePen.

無駄に感じたfocus擬似クラスは、削除しました。 あと、プロパティと値のつなぎのコロンを整えてみました。 内容を解説すると、 selectタグの、padding要素を以下のように変更。 # Bad padding: 0.5em 3em ; # Good padding : 0.5em; padding-right : 3em; Badの書き方は、上下と左右に対して値をセットしているんですが、5emの値が必要なのは、right箇所だけなので、ピンポイント指定に切り替えました。 あとは、select.classicセレクタ内の値をゴニョゴニョいじってみて、三角サイズの変更をして、ポジショニングを整えたら無事に完了です。 ここまでやるぐらいなら、tagを自由に使って装飾をして、pulldown.jsライブラリを使ったほうがいいと思うんだよね。 ゴリゴリにcssを書いている努力は買うけれど、あまり効率がいいとは思わないので、改めて、質問する人は、別の方法はないか？という視点も必要だし、そういう聞き方をするという事も、結果的に自分のスキルアップと、仕事効率アップに繋がることを覚えなければいけませんね。 とりあえずの、人助けコーナーでした。 投稿者の人が、このブログを見てくれることを祈ってます。