【完全独学Python】TkinterのButton（ボタン）のデザインはこれだけ覚えて！

こんにちは！ゆーや（@yuyamanm118712）です。

こちらのページでは完全独学でWebプログラマとなった私が

デスクトップアプリには必須！！Tkinterでボタンを表示する方法をご紹介します！

ゆーや

Tkinterの基本的な使い方は以下の記事を見てね！

Tkinterで「画面にボタンを表示する」ためにはButton（ボタン）というウィジェット（部品）を使います！

ボタンの外観や表示されるテキストのフォントや色など意外と細かく設定できます！

この記事を通して、Button（ボタン）は使いこなせるようにしておきましょう！

ゆーや

本記事はボタンのデザインなので、
ボタンの機能（クリック、長押し等々）は以下の記事を見てね！

※記事執筆中…近日公開予定

ゆーや

アプリ制作楽しいですよね！

そんなプログラミングに楽しさを覚えたあなた！

ゆーや

勉強し始めて、IT業界に興味があるけど、自信がない。

僕も同じでした。なので、一人でコツコツ、1年間も独学で勉強…
そのあと、一人で転職活動…

心細かったのを覚えています…

ゆーや

しかし、時代は変わり、

プログラミングを学び、転職をサポートしてくれるスクールがあります！

その名も…

【Winスクール】

初心者から経験者まで対応できる300以上の講座ラインナップで、スキルアップを目指す方に最適！プロ講師による丁寧な「個人レッスン」で、あなたに合わせた指導を受けられます。

オンライン or 対面で選べる受講スタイル：あなたのライフスタイルに合わせて柔軟に受講可能！
実践重視のカリキュラム：現場経験豊富な講師陣が指導。学んだスキルをそのまま活かせる即戦力を養成。
年間1500社の企業研修実績で、ビジネスシーンに即した指導内容が魅力！

就職・転職サポートも充実し、受講中はもちろん卒業後も安心。まずは無料体験で、その質の高さを体感してください！

まずは無料体験・説明会に参加を♪【Winスクール】

ゆーや

「完全独学Python」で学習しているあなたなら大丈夫！

僕みたいにリモートワークで自由な生活を手に入れよう！

まずは無料体験・カウンセリングを受けてみよう！

もちろん、Pythonコースもあるよ！

この記事を読むと
Button（ボタン）の基本
1. Button（ボタン）作成までのサンプルコード
Button（ボタン）のオプション
まとめ

この記事を読むと

Tkinterで作成した画面にボタンを表示できる！
Tkinterで表示したボタンのデザインを変えることができる！

Button（ボタン）の基本

Button（ボタン）作成までのサンプルコード

import tkinter as tk

# ボタンを押したらラベルの値を更新する
def change_label():
    label_text.set("ボタン押しました！")

# ウィンドウの作成
root = tk.Tk()
root.title("Button-完全独学Python")
root.geometry("500x300")

# ラベルに表示するテキストの設定
label_text = tk.StringVar()
label_text.set("ボタンを押してください")

# ラベルの作成
label = tk.Label(root, textvariable=label_text)
label.pack()

# ボタンの作成
button = tk.Button(root, text="ボタン", command=change_label)
button.pack()

root.mainloop()

ボタン押下前

ボタン押下後

ゆーや

ボタンが表示されたね！
ボタン押すと、ラベルが変化するようにしてみたので参考にしてみてね！

それでは今日は外観をいじっていこう！

Button（ボタン）のオプション

ゆーや

ボタンのデザインを変更したいときは、

Buttonにオプションを設定するよ！

ボタンのサイズを変更する（width, height）

import tkinter as tk

# ボタンを押したらラベルの値を更新する
def change_label():
    label_text.set("ボタン押しました！")

# ウィンドウの作成
root = tk.Tk()
root.title("Button-完全独学Python")
root.geometry("500x300")

# ラベルに表示するテキストの設定
label_text = tk.StringVar()
label_text.set("ボタンを押してください")

# ラベルの作成
label = tk.Label(root, textvariable=label_text)
label.pack()

# 通常のボタンの作成
button = tk.Button(root, text="ボタン",command=change_label)
button.pack()

# ボタンのサイズを変更
big_button = tk.Button(root, text="ボタン", width=10, height=10)
big_button.pack()

root.mainloop()

ゆーや

ボタンのサイズが変わったね！

ただし、widthもheightも10なのに正方形にならない！
ピクセルで指定しているわけではないので注意！

ボタンの色（bg）、押下中のボタンの色（activebackground）

import tkinter as tk

# ボタンを押したらラベルの値を更新する
def change_label():
    label_text.set("ボタン押しました！")

# ウィンドウの作成
root = tk.Tk()
root.title("Button-完全独学Python")
root.geometry("500x300")

# ラベルに表示するテキストの設定
label_text = tk.StringVar()
label_text.set("ボタンを押してください")

# ラベルの作成
label = tk.Label(root, textvariable=label_text)
label.pack()

# ボタンの作成
button = tk.Button(root, text="ボタン", bg="red", activebackground="#3632a8",command=change_label)
button.pack()

root.mainloop()

ボタン押下前

ボタン押下中

ゆーや

ボタンの色は「bg」オプション、

押下時の色は「activebackground」オプションで決めるよ！

ボタンの余白（padx, pady）

import tkinter as tk

# ボタンを押したらラベルの値を更新する
def change_label():
    label_text.set("ボタン押しました！")

# ウィンドウの作成
root = tk.Tk()
root.title("Button-完全独学Python")
root.geometry("500x300")

# ラベルに表示するテキストの設定
label_text = tk.StringVar()
label_text.set("ボタンを押してください")

# ラベルの作成
label = tk.Label(root, textvariable=label_text)
label.pack()

# ボタンの作成
button = tk.Button(root, text="ボタン", command=change_label)
button.pack()

# ボタンの作成
button_pad = tk.Button(root, text="ボタン", padx=10, pady=10, command=change_label)
button_pad.pack()

root.mainloop()

ゆーや

ボタンに余白を持たせることができました！

padxが横方向、padyが縦方向の余白だよ！

ボタンの枠線のスタイル（relief）

import tkinter as tk

# ウィンドウの作成
root = tk.Tk()
root.title("Button-完全独学Python")
root.geometry("500x300")

# FLATボタンの作成
button_flat = tk.Button(root, text="FLAT", relief=tk.FLAT)
button_flat.pack(pady=5)

# RAISEDボタンの作成
button_raised = tk.Button(root, text="RAISED", relief=tk.RAISED)
button_raised.pack(pady=5)

# SUNKENボタンの作成
button_sunken = tk.Button(root, text="SUNKEN", relief=tk.SUNKEN)
button_sunken.pack(pady=5)

# GROOVEボタンの作成
button_groove = tk.Button(root, text="GROOVE", relief=tk.GROOVE)
button_groove.pack(pady=5)

# RIDGEボタンの作成
button_ridge = tk.Button(root, text="RIDGE", relief=tk.RIDGE)
button_ridge.pack(pady=5)

# SOLIDボタンの作成
button_solid = tk.Button(root, text="SOLID", relief=tk.SOLID)
button_solid.pack(pady=5)

root.mainloop()

ゆーや

枠線で結構雰囲気が変わるね！

自分の作りたいものに合わせて変えよう！

ボタンのテキストのフォントなど

ゆーや

こちらはLabel（ラベル）の時と同じでfont属性にタプルを持たせてあげればOK！

詳しくは下記の記事を見てね！

まとめ

本記事では、Button（ボタン）を使って、Tkinterで画面にボタンを表示する方法を紹介しました！

ポイントは以下の７つです！

① Tkinterで画面にボタンを表示するには「Button（ボタン）」を使う
② ボタンのサイズを変えるには「width（横）」「height（縦）」を使う
③ ボタンの色を変えるには「bg」オプションを使う
④ 押下中のボタンの色を変えるには「activebackground」オプションを使う
⑤ ボタンの余白のサイズを変えるには「padx（横）」「pady（縦）」を使う
⑥ ボタンの枠線のデザインを変えるには「relief」を使う
⑦ ボタンのテキストのデザインを変えるには「font」を使う

ゆーや

まとめの内容を見て、もう頭に浮かべば完璧！