【selectmenu】CSSだけで作るセレクトボックス アイディア帳

:::note warn
この記事は、まだ開発途中のプロパティを紹介しているため、以下のブラウザでのみ正常に作動します。*投稿日：2022/12/24*
・ [ChromeのCanaryバージョン](https://www.google.com/intl/ja/chrome/canary/)
・ [EdgeのCanaryバージョン](https://www.microsoftedgeinsider.com/ja-jp/download/canary)
:::

## はじめに
みなさんは、`<select>` タグを使う時、`<option>` をいい感じのデザインしたいと思ったことはないでしょうか？

多くの方は、妥協して、`<select>` タグを使うか、ライブラリーを使うか、
`<div>`・`<button>`などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？

実は、[Open UI](https://open-ui.org/)から提出された、セレクトボックスのプルダウンをデザインするための草案が、
Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、`<selectmenu>` が公開されました。

https://chromestatus.com/feature/5737365999976448

そのため、この記事では　`<selectmenu>`　を使った具体的なアイディアの紹介と実装を紹介します。

## selectmenuタグとは？
`<selectmenu>` は、デザインのカスタマイズができる `<select>` 要素です。
*※ 2022年現在は、まだ実験的な機能のため、ChromeとEdgeのCanaryバージョンでのみ使うことができます。*

詳しい解説はこちらの記事をごらんください。

https://qiita.com/degudegu2510/items/9754db3f6c60e69fffff

## アイディア帳
### 1. シンプルな使い方
`<selectmenu>`としては一番シンプルで意図的な使い方だと思います。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1f8d7126-8e2e-ad8b-a38e-5fc6d3ec96f0.png)
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwBYEQd" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/VwBYEQd">
  selectmenu - sample1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

　
### 2. 選択肢を横並びにする
都道府県のように選択肢が多かったりして、わかりにくい場合は、選択肢を横並びにして、labelでグループ分けをしてあげると選択肢を探しやすくなります。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6ea6780f-8180-0554-5c3e-b24e793cb0f6.png)
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="vYaEVQv" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/vYaEVQv">
  selectmenu - sample1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 3. 周りに選択肢を配置する
こんな感じなこともできます。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/59247e6b-d62b-0511-3915-91b1c0145b6f.png)
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="QWBwJNG" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/QWBwJNG">
  selectmenu - sample2</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 4. 選択肢に複数の情報を入れる
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/09b5c2b7-d30f-cde7-768c-d2fb5e5fe011.png)

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="abKLpxv" data-editable="true" data-user="jh3y" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/jh3y/pen/abKLpxv">
  PokéSelect with &lt;SelectMenu/&gt; ⚡️</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ
今回は、`<selectmenu>`　を使った具体的なアイディアの紹介と実装方法を紹介しました。

`<selectmenu>` は、まだまだ実験的なものですが、今まではデザインを妥協したり、デザインを当てるためにWAI-ARIAやJavaScriptでごちゃごちゃしたりとしていたことを考えると、早く主要ブラウザで対応していただけると嬉しいです。

`<selectmenu>`　が実装された暁には、selectタグやライブラリーを使っていたところなどは、全部 `<selectmenu>` に置き換えたいですね


---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510