← 一覧へ

やってみよう「日・週・月」を切り替えてみてください

ボタン・操作部品マイナー（知る人ぞ知る）

セグメントコントロール

Segmented Control

「日・週・月」のように横一列につながった切り替えボタン。押したところが白く浮き上がり、表示が切り替わる。

別名セグメンテッドコントロールセグメントボタンSegmented Button切り替えボタン

どこで使われている？

よく見かける場所
iPhoneの標準アプリ（カレンダーの日・週・月）、ヘルスケア、地図の表示切り替え
使うとよい場面
同じ内容の見せ方を2〜4通りで切り替えるとき
避けたい場面
選択肢が5つ以上あるとき（ドロップダウンにする）、別の画面へ移るとき（タブにする）

補足画面全体を切り替えるなら「タブ」、同じ画面の表示方法を切り替えるなら「セグメントコントロール」です。

似ているものとの違い

選んでもらう部品の違い（チェックボックス・ラジオボタン・トグルスイッチ・セグメントコントロール）画面の切り替え方の違い（タブバー・タブ（上部タブ）・セグメントコントロール）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「セグメントコントロール（Segmented Control）」を実装してください。

動き：2〜5個の選択肢を1本の横長の枠に並べ、選ばれている選択肢の背景だけを白く浮かせる。別の選択肢を押すと背景がスライドして移動し、下の内容が切り替わる。

使う部品：Segmented Control（ラジオボタンを並べて自作）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならSegmented Control（ラジオボタンを並べて自作）
iPhoneアプリならPicker + .pickerStyle(.segmented)
AndroidアプリならSingleChoiceSegmentedButtonRow（Material 3 の Segmented Button）
FlutterならSegmentedButton（iOS風なら CupertinoSlidingSegmentedControl）
React Nativeなら@react-native-segmented-control/segmented-control

似ているもの・一緒に使うもの