文系のIT勉強メモ

勉強中のメモと、インフラの覚書き

JS使わずプルダウンしたい

2年もWeb制作をしていたのに、JSを使いこなせてない。

だから、プルダウンメニューはhtml/cssの機能で動作させて、見た目をCSSで整える感じでいきたい。

と思うときに、プルダウンになるのっていくつかある。

<select><option>aaa</option><option>bbb</option></select>

見た目はこれがいちばんいい!でもフォームの部品だから、リンクメニューとして使うのは意味的にもおかしいし、リンクつけてもつかなかった。中に無理くり<h1>入れてもおかしくならないの助かるけどねえ。

<details><summary>めにゅう</summary><ul><li>aaa</li><li>bbb</li></ul></details>

めにゅう

中身に<h1>入れるとおかしくなっちゃう。プルダウンていうか開閉メニューっていう感じかな。ちゃんとリンクもつくし、見た目だけの問題ならCSSでなんとかなる。

datalistはさすがにフォームでしかないかなって感じ

<input type="text" list="menu">
<datalist id="menu">
<option value="">aaa</option>
<option value="">bbb</option>
</datalist>

aaa

入力できちゃうっていうのが、メニューとして使うにはおかしいよね。

対応ブラウザがなく、非推奨のもの(menu)

<menu><menuitem label="aaa"><menuitem label="bbb"></menu>と書くのであるが、この下に書きますが、、、

どうだ動かないであらう。むしろ表示すらされないであらう。

bootstrap

bootstrapはプルダウン的なのいろいろあるけど結局JSのライブラリ読み込まないといけないのよね。できたらHTML/CSSだけで解決したい。プログラムが複雑になっちゃうのに、見た目をプルダウンにするだけのためにさらに複雑にしたくないから。

ちょうどいいのがないのならもう、<h1>とか<ul><li>とかで意味に合わせてコーディングして、CSSだけ頑張るとか。。

なんか、考えてたら、やっぱパンくず合ったほうがよくない?って気になってきた。小さな字で細くパンくず入れるなら場所はとらんよね。全部にコーディングするの大変だから、プログラムで取得する方法があればいいんだけど。。