ボタン_(GUI)
[Wikipedia|▼Menu]
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この記事は検証可能参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。(このテンプレートの使い方
出典検索?: "ボタン" GUI ? ニュース ・ 書籍 ・ スカラー ・ CiNii ・ J-STAGE ・ NDL ・ dlib.jp ・ ジャパンサーチ ・ TWL(2016年1月)
ボタンラジオボタン

グラフィカルユーザーインターフェイス (GUI) におけるボタンは、現実世界における押しボタンと同様に、ユーザーが「押す」ことで何らかの操作を行なうためのコンピュータ画面上の表現である。GUIにおける基本的な部品(ウィジェット)のひとつとして、ウィジェット・ツールキットには標準的に用意されている。一般には現実世界の物理的なボタンを模した立体感のある形状(スキューモーフィックデザイン)であったり、矩形や角丸矩形の境界線(ボーダー)を持っていたりすることが多いが、中には単なるアイコン表現がボタンの役割を果たす場合もあり、このようなものも機能分類に従い通常はボタンと呼称する。「コマンドボタン」と呼ばれることもある[1]
概要

ボタンはアイコンと同様の、機能のグラフィカルな表現である。かなりのバリエーションがあり、全てに共通する特徴を挙げるのは難しいが、アイコンとの主な違いは

OSごと、スキンごとに調和のとれたデザインを持つ

固定配置であり、ドラッグ操作で移動できない

単一クリックあるいはタップで動作する

などを基本とする。

物理的スイッチと異なり、GUIボタンの動作はその上でマウスボタンを押した時ではなく、離した時に判定される。これは誤ってクリックしたボタンを動作させないようマウスカーソルを判定範囲から外してからリリースできるようにするための処置である。ボタンにキーボードフォーカスが設定されている場合はキーボードリターンキーエンターキー)やスペースキーなどでクリック動作を代替できる。ボタンにフォーカスが設定されていない場合でもエンターキーによって押下されるボタンは「デフォルトボタン」(既定のボタン)と呼ばれる[2][3]
ボタンの種類

ボタンには機能に応じて次のような種類がある。
プッシュボタン
最も一般的なボタンであり、一回のクリックごとに定められた何らかのアクションを起動する。
ラジオボタン
複数の選択肢の中で択一を行なうものを
ラジオボタンと呼ぶ。語源は古いラジオの局番選択と動作が似ているためである。
トグルボタン
押すたびに状態が遷移するボタン。

このほか、複数のボタンからなるコントロール(スピンボタン)や、長く押し続けるとメニューを表示するボタンなどがある。

なお、ラジオボタンと類似するチェックボックスや、ウインドウのメニューは通常ボタンとは呼ばれない。ただし、チェックボックスとラジオボタンとトグルボタンはいずれもクリックあるいはタップすると状態が変わるなど、動作的な共通点が多く、実装上はあまり違いがないことも多い。

Microsoft WindowsのWin32コモンコントロールでは、スタイル属性にBS_PUSHLIKEフラグを設定することで、ラジオボタンやチェックボックスの外観をプッシュボタンのようにすることもできる[4][5]Windows Presentation Foundation (WPF) やWindows UI Library (WinUI) では、CheckBoxやRadioButtonの基底クラスとして、ToggleButtonが用意されている[6][7]Visual Basic for Applications (VBA) のユーザーフォームにはToggleButtonコントロールがある[8]。通常のプッシュボタンは、押している間のみ外観が変化し、離すと元の状態に戻るが、トグルボタンは押し込まれたままになる。

Androidの標準ウィジェットでは、CheckBox, RadioButton, Switch, ToggleButtonのスーパークラスとしてCompoundButtonが用意されている[9]

ボタン上に、押下によって動的に変化するラベル(キャプション)やアイコンを配置して何らかの状態を表示することもできる。例えばメディアプレーヤー系のアプリケーションで、再生/一時停止ボタンの切り替えによく使われている[10]。しかしこの場合、ボタンのラベルやアイコンが現在の状態を表しているのか、それとも逆にボタンを押すことによってその状態になることを示しているのかは明確な取り決めが存在せず、どちらの意味であるかは個別のアプリケーションソフトウェアまたはOSなどによって異なる可能性があり、非常に紛らわしい[11][12]マイクロソフト社はWindowsユーザーエクスペリエンスガイドラインにて、コマンドボタンは状態の設定に使うのではなく、操作の開始のみに使うことを推奨している[13]。状態ごとにトグルボタンを個別に用意して並べるケースであっても、カラースキームを反転するだけではどちらがアクティブ状態であるかが分からないので、文字の太さや彩度・明度を変えるなどの配慮が必要となる[14]

BluetoothWi-Fi機内モードなどの有効/無効 (ON/OFF) を変更するUIの場合、無効 (OFF) の場合はグレー、有効 (ON) の場合は色付きで表示することで、ON/OFFを表現するトグルボタンを設けるケースもある[15][16][17]。ただし、色で状態を表す場合はユーザーの色覚多様性に配慮して、彩度や色相だけではなく明度も併せて変更するなどの配慮が必要となる。ON/OFF設定のUIでは、チェックボックスやトグルボタンの代わりに、状態を表す円形や矩形が左右に移動するトグルスイッチが利用されるケースもある[18]。なお、トグルスイッチはあくまでON/OFFの設定に使うべきであり、それ以外の二者択一の設定に使うべきではない[19]。トグルスイッチも適切にデザインしないと、トグルボタン同様に混乱を招いてユーザビリティを損なってしまう[20]
脚注[脚注の使い方]^ Command Buttons in Windows 7 - Win32 apps 。Microsoft Docs
^ “デフォルトボタンの設定 - ボタンの作成(JButtonクラス) - Swing”. www.javadrive.jp. 2016年1月16日閲覧。
^ “Button.IsDefault Property (System.Windows.Controls)” (英語). docs.microsoft.com. Microsoft Docs. マイクロソフト. 2022年2月6日閲覧。
^ Button Styles (Winuser.h) - Win32 apps 。Microsoft Docs
^ Styles Used by MFC 。Microsoft Docs
^ ToggleButton Class (System.Windows.Controls.Primitives) 。Microsoft Docs
^ ToggleButton Class (Windows.UI.Xaml.Controls.Primitives) - Windows UWP applications 。Microsoft Docs
^ トグルボタンのプロパティ - Excel VBA
^ CompoundButton 。


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:29 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef