GUI

[Python Tkinter] フレーム(Frame)の使い方

2025-01-18更新日: 2025-01-18

Tkinterのフレーム(Frame)は、ウィジェットをグループ化し、レイアウトを整理するためのコンテナウィジェットです。

フレームは他のウィジェットを配置するための領域を提供し、複数のウィジェットをまとめて管理できます。

Frameはtk.Frame(parent)で作成し、pack()やgrid()などのレイアウトマネージャを使って配置します。

フレーム内にボタンやラベルなどのウィジェットを追加し、複雑なレイアウトを作成する際に便利です。

目次から探す

フレーム(Frame)とは何か
フレームの基本的な作成方法
フレームの配置方法
フレーム内にウィジェットを配置する
フレームのネスト(入れ子)構造
フレームのスタイルとカスタマイズ
応用例：フレームを使ったGUIアプリケーション
まとめ

フレーム(Frame)とは何か

PythonのTkinterライブラリにおけるフレーム(Frame)は、ウィジェットをグループ化し、整理するためのコンテナです。

フレームを使用することで、複雑なGUIアプリケーションを構築する際に、レイアウトを簡単に管理できます。

フレームの役割

グループ化: 複数のウィジェットを一つのフレームにまとめることで、視覚的に整理できます。
レイアウト管理: フレームを使うことで、ウィジェットの配置やサイズを簡単に調整できます。
スタイルの適用: フレームに対してスタイルを設定することで、内部のウィジェットにも影響を与えることができます。

フレームの基本的な使い方

フレームを作成するには、TkinterのFrameクラスを使用します。

以下は基本的なフレームの作成方法です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root, width=300, height=200, bg='lightblue')
frame.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、青い背景のフレームが表示されます。

他のウィジェットとの違い

特徴	フレーム(Frame)	他のウィジェット
目的	ウィジェットのグループ化	特定の機能を持つ
レイアウト管理	他のウィジェットを含む	単独で機能する
スタイル適用	背景色や境界線を設定可能	各ウィジェットごとに設定

フレームを使うメリット

整理整頓: 複数のウィジェットをフレームでまとめることで、視覚的に整理されたインターフェースを作成できます。
再利用性: フレームを使うことで、同じレイアウトを複数の場所で再利用することが容易になります。
柔軟性: フレーム内のウィジェットの配置やサイズを簡単に変更でき、アプリケーションのデザインを柔軟に調整できます。

フレームの基本的な作成方法

フレームを作成する際には、TkinterのFrameクラスを使用します。

ここでは、フレームのインスタンス化、親ウィジェットの指定、オプション設定について詳しく解説します。

Frameクラスのインスタンス化

フレームを作成するには、まずFrameクラスのインスタンスを生成します。

以下のコードは、基本的なフレームのインスタンス化を示しています。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームのインスタンス化
frame = tk.Frame(root)
frame.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、空のフレームがメインウィンドウに表示されます。

フレームの親ウィジェットの指定

フレームを作成する際には、親ウィジェットを指定する必要があります。

親ウィジェットは、フレームがどのウィンドウに属するかを決定します。

通常、親ウィジェットはメインウィンドウ(Tkオブジェクト)です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの親ウィジェットを指定
frame = tk.Frame(root)
frame.pack()
# メインループの開始
root.mainloop()

フレームのオプション設定

フレームにはさまざまなオプションを設定することができます。

以下に、主なオプション設定を紹介します。

背景色の設定

フレームの背景色を設定するには、bgオプションを使用します。

frame = tk.Frame(root, bg='lightblue')
frame.pack()

このコードでは、フレームの背景色を水色に設定しています。

境界線の設定

フレームに境界線を追加するには、bd(border width)オプションを使用します。

また、reliefオプションで境界線のスタイルを指定できます。

frame = tk.Frame(root, bd=2, relief='solid')
frame.pack()

このコードでは、2ピクセルの幅の実線の境界線を持つフレームを作成しています。

サイズの指定

フレームのサイズを指定するには、widthとheightオプションを使用します。

frame = tk.Frame(root, width=300, height=200)
frame.pack()

このコードでは、幅300ピクセル、高さ200ピクセルのフレームを作成しています。

フレームのサイズは、pack()メソッドやgrid()メソッドを使用して配置する際に調整されることがあります。

フレームの配置方法

Tkinterでは、フレームやウィジェットをウィンドウ内に配置するために、主にpack()、grid()、place()の3つのメソッドを使用します。

それぞれのメソッドの使い方を詳しく解説します。

pack()メソッドを使った配置

pack()メソッドは、ウィジェットを上下または左右に積み重ねて配置するための簡単な方法です。

pack()の基本的な使い方

以下のコードは、pack()メソッドを使用してフレームを配置する基本的な例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame1 = tk.Frame(root, bg='lightblue')
frame1.pack()  # pack()メソッドで配置
frame2 = tk.Frame(root, bg='lightgreen')
frame2.pack()  # pack()メソッドで配置
# メインループの開始
root.mainloop()

このコードを実行すると、2つのフレームが上下に積み重なって表示されます。

オプションを使った詳細な配置

pack()メソッドには、配置の詳細を制御するためのオプションがあります。

主なオプションは以下の通りです。

オプション名	説明
side	配置する方向(TOP, BOTTOM, LEFT, RIGHT)
fill	ウィジェットのサイズを埋める方法(NONE, X, Y, BOTH)
expand	空きスペースを埋めるかどうか(TrueまたはFalse)

例えば、以下のように使用します。

frame1.pack(side=tk.TOP, fill=tk.X, expand=True)
frame2.pack(side=tk.BOTTOM, fill=tk.Y)

grid()メソッドを使った配置

grid()メソッドは、ウィジェットを行と列のグリッドに配置するための方法です。

より複雑なレイアウトを作成するのに適しています。

grid()の基本的な使い方

以下のコードは、grid()メソッドを使用してフレームを配置する基本的な例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame1 = tk.Frame(root, bg='lightblue')
frame1.grid(row=0, column=0)  # grid()メソッドで配置
frame2 = tk.Frame(root, bg='lightgreen')
frame2.grid(row=1, column=0)  # grid()メソッドで配置
# メインループの開始
root.mainloop()

このコードを実行すると、2つのフレームが縦に並んで表示されます。

行・列の指定とウィジェットの配置

grid()メソッドでは、rowとcolumnオプションを使用して、ウィジェットの配置位置を指定します。

また、stickyオプションを使うことで、ウィジェットの位置を調整できます。

frame1.grid(row=0, column=0, sticky='nsew')  # 上下左右に広がる
frame2.grid(row=1, column=0, sticky='ew')     # 左右に広がる

place()メソッドを使った配置

place()メソッドは、ウィジェットを絶対座標で配置するための方法です。

具体的な位置を指定できるため、自由度が高いですが、レイアウトの調整が難しくなることがあります。

place()の基本的な使い方

以下のコードは、place()メソッドを使用してフレームを配置する基本的な例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame1 = tk.Frame(root, bg='lightblue')
frame1.place(x=50, y=50)  # 絶対座標で配置
frame2 = tk.Frame(root, bg='lightgreen')
frame2.place(x=150, y=150)  # 絶対座標で配置
# メインループの開始
root.mainloop()

このコードを実行すると、指定した座標にフレームが表示されます。

絶対座標での配置

place()メソッドでは、xとyオプションを使用して、ウィジェットの位置を絶対座標で指定します。

また、widthやheightオプションを使ってサイズを指定することもできます。

frame1.place(x=50, y=50, width=200, height=100)  # サイズを指定

このように、place()メソッドを使うことで、ウィジェットを自由に配置することができますが、ウィンドウサイズの変更に対して柔軟性がないため、注意が必要です。

フレーム内にウィジェットを配置する

フレームを使用することで、ウィジェットを整理して配置することができます。

ここでは、ボタン、ラベル、エントリなどのウィジェットをフレーム内に配置する方法を解説します。

ボタン(Button)の配置

ボタンをフレーム内に配置するには、Buttonクラスを使用します。

以下のコードは、フレーム内にボタンを配置する例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root)
frame.pack()
# ボタンの作成と配置
button = tk.Button(frame, text='クリック', command=lambda: print('ボタンがクリックされました'))
button.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、フレーム内に「クリック」ボタンが表示されます。

ラベル(Label)の配置

ラベルをフレーム内に配置するには、Labelクラスを使用します。

以下のコードは、フレーム内にラベルを配置する例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root)
frame.pack()
# ラベルの作成と配置
label = tk.Label(frame, text='これはラベルです')
label.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、フレーム内に「これはラベルです」というテキストが表示されます。

エントリ(Entry)の配置

エントリをフレーム内に配置するには、Entryクラスを使用します。

以下のコードは、フレーム内にエントリを配置する例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root)
frame.pack()
# エントリの作成と配置
entry = tk.Entry(frame)
entry.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、フレーム内にテキストを入力できるエントリボックスが表示されます。

複数のウィジェットをまとめて配置する方法

複数のウィジェットをフレーム内にまとめて配置する場合、pack()やgrid()メソッドを使って、各ウィジェットを適切に配置します。

以下の例では、ボタン、ラベル、エントリをフレーム内にまとめて配置しています。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root)
frame.pack()
# ラベルの作成と配置
label = tk.Label(frame, text='名前:')
label.pack(side=tk.LEFT)
# エントリの作成と配置
entry = tk.Entry(frame)
entry.pack(side=tk.LEFT)
# ボタンの作成と配置
button = tk.Button(frame, text='送信', command=lambda: print('送信されました'))
button.pack(side=tk.LEFT)
# メインループの開始
root.mainloop()

このコードを実行すると、ラベル、エントリ、ボタンが横に並んで表示されます。

フレーム内のウィジェットのレイアウト調整

フレーム内のウィジェットのレイアウトを調整するには、pack()やgrid()メソッドのオプションを活用します。

以下の例では、grid()メソッドを使用して、ウィジェットの配置を調整しています。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root)
frame.pack()
# ラベルの作成と配置
label1 = tk.Label(frame, text='名前:')
label1.grid(row=0, column=0)
# エントリの作成と配置
entry1 = tk.Entry(frame)
entry1.grid(row=0, column=1)
# ボタンの作成と配置
button1 = tk.Button(frame, text='送信', command=lambda: print('送信されました'))
button1.grid(row=1, column=0, columnspan=2)
# メインループの開始
root.mainloop()

このコードを実行すると、ラベルとエントリが同じ行に並び、ボタンがその下に表示されます。

grid()メソッドを使用することで、行や列を指定してウィジェットを配置できるため、より柔軟なレイアウトが可能です。

フレームのネスト(入れ子)構造

Tkinterでは、フレームをネスト(入れ子)させることで、より複雑なレイアウトを作成することができます。

ここでは、フレームの中にフレームを配置する方法や、ネストされたフレームの管理方法について解説します。

フレームの中にフレームを配置する

フレームの中に別のフレームを配置することで、ウィジェットをさらに整理することができます。

以下のコードは、フレームの中に別のフレームを配置する例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# 外側のフレームの作成
outer_frame = tk.Frame(root, bg='lightgray')
outer_frame.pack(padx=10, pady=10)
# 内側のフレームの作成
inner_frame = tk.Frame(outer_frame, bg='lightblue')
inner_frame.pack(padx=5, pady=5)
# 内側のフレームにラベルを追加
label = tk.Label(inner_frame, text='内側のフレーム')
label.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、外側のフレームの中に内側のフレームが表示され、その中にラベルが配置されます。

ネストされたフレームの管理

ネストされたフレームを管理する際は、各フレームの配置やサイズを適切に設定することが重要です。

以下の例では、外側のフレームにボタンを配置し、内側のフレームにラベルとエントリを配置しています。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# 外側のフレームの作成
outer_frame = tk.Frame(root)
outer_frame.pack(padx=10, pady=10)
# 内側のフレームの作成
inner_frame = tk.Frame(outer_frame)
inner_frame.pack(padx=5, pady=5)
# 外側のフレームにボタンを追加
button = tk.Button(outer_frame, text='外側のボタン', command=lambda: print('外側のボタンがクリックされました'))
button.pack()
# 内側のフレームにラベルとエントリを追加
label = tk.Label(inner_frame, text='名前:')
label.grid(row=0, column=0)
entry = tk.Entry(inner_frame)
entry.grid(row=0, column=1)
# メインループの開始
root.mainloop()

このコードを実行すると、外側のフレームにボタンが表示され、内側のフレームにはラベルとエントリが横に並んで表示されます。

複雑なレイアウトを作成する方法

ネストされたフレームを使用することで、複雑なレイアウトを簡単に作成できます。

以下の例では、複数の内側のフレームを作成し、それぞれに異なるウィジェットを配置しています。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# 外側のフレームの作成
outer_frame = tk.Frame(root)
outer_frame.pack(padx=10, pady=10)
# 内側のフレーム1の作成
inner_frame1 = tk.Frame(outer_frame, bg='lightblue')
inner_frame1.pack(side=tk.LEFT, padx=5, pady=5)
# 内側のフレーム2の作成
inner_frame2 = tk.Frame(outer_frame, bg='lightgreen')
inner_frame2.pack(side=tk.LEFT, padx=5, pady=5)
# 内側のフレーム1にラベルとボタンを追加
label1 = tk.Label(inner_frame1, text='フレーム1')
label1.pack()
button1 = tk.Button(inner_frame1, text='ボタン1', command=lambda: print('ボタン1がクリックされました'))
button1.pack()
# 内側のフレーム2にラベルとエントリを追加
label2 = tk.Label(inner_frame2, text='フレーム2')
label2.pack()
entry2 = tk.Entry(inner_frame2)
entry2.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、外側のフレームの中に2つの内側のフレームが横に並び、それぞれに異なるウィジェットが配置されます。

このように、ネストされたフレームを使用することで、複雑なレイアウトを簡単に実現できます。

フレームのスタイルとカスタマイズ

Tkinterのフレームは、さまざまなスタイルやカスタマイズが可能です。

ここでは、フレームの色やフォントの変更、サイズの変更、境界線やパディングの調整、可視性の制御について解説します。

フレームの色やフォントの変更

フレームの背景色を変更するには、bgオプションを使用します。

また、フレーム内のウィジェットのフォントを変更することもできます。

以下のコードは、フレームの色とフォントを変更する例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root, bg='lightblue')
frame.pack(padx=10, pady=10)
# ラベルの作成とフォントの設定
label = tk.Label(frame, text='カスタマイズされたフレーム', font=('Arial', 14))
label.pack()
# メインループの開始
root.mainloop()

このコードを実行すると、背景色が水色のフレームが表示され、その中にフォントサイズ14のラベルが表示されます。

フレームのサイズ変更とリサイズ

フレームのサイズを変更するには、widthとheightオプションを使用します。

また、pack()メソッドやgrid()メソッドを使用して、リサイズ時の挙動を制御することもできます。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root, width=300, height=200, bg='lightgreen')
frame.pack_propagate(False)  # フレームのサイズを固定
frame.pack(padx=10, pady=10)
# メインループの開始
root.mainloop()

このコードを実行すると、幅300ピクセル、高さ200ピクセルのフレームが表示され、リサイズされません。

フレームの境界線とパディングの調整

フレームの境界線を設定するには、bd(border width)オプションを使用し、境界線のスタイルをreliefオプションで指定します。

また、padxやpadyオプションを使用して、フレーム内のウィジェットのパディングを調整できます。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root, bd=2, relief='solid', bg='lightyellow')
frame.pack(padx=10, pady=10)
# ラベルの作成と配置
label = tk.Label(frame, text='境界線とパディングの調整', bg='lightyellow')
label.pack(padx=20, pady=20)  # ラベルのパディングを設定
# メインループの開始
root.mainloop()

このコードを実行すると、境界線があり、パディングが設定されたフレームが表示されます。

フレームの可視性の制御

フレームの可視性を制御するには、pack_forget()メソッドやgrid_forget()メソッドを使用して、フレームを非表示にすることができます。

また、pack()メソッドやgrid()メソッドを再度呼び出すことで、フレームを再表示することも可能です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
# フレームの作成
frame = tk.Frame(root, bg='lightblue')
frame.pack(padx=10, pady=10)
# フレームを非表示にする関数
def hide_frame():
    frame.pack_forget()
# フレームを再表示する関数
def show_frame():
    frame.pack(padx=10, pady=10)
# ボタンの作成
hide_button = tk.Button(root, text='フレームを隠す', command=hide_frame)
hide_button.pack(pady=5)
show_button = tk.Button(root, text='フレームを表示', command=show_frame)
show_button.pack(pady=5)
# メインループの開始
root.mainloop()

このコードを実行すると、ボタンをクリックすることでフレームを隠したり表示したりすることができます。

これにより、ユーザーインターフェースの動的な制御が可能になります。

応用例：フレームを使ったGUIアプリケーション

フレームを活用することで、さまざまなGUIアプリケーションを構築できます。

ここでは、具体的な応用例として、フォーム入力画面、メニューバーとコンテンツエリアの分割、ダイアログボックス、タブ付きウィンドウ、レスポンシブなレイアウトの作成方法を解説します。

フォーム入力画面の作成

フォーム入力画面は、ユーザーから情報を収集するための基本的なインターフェースです。

以下のコードは、名前とメールアドレスを入力するフォームの例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
root.title("フォーム入力画面")
# フレームの作成
frame = tk.Frame(root)
frame.pack(padx=10, pady=10)
# ラベルとエントリの作成
tk.Label(frame, text='名前:').grid(row=0, column=0)
name_entry = tk.Entry(frame)
name_entry.grid(row=0, column=1)
tk.Label(frame, text='メールアドレス:').grid(row=1, column=0)
email_entry = tk.Entry(frame)
email_entry.grid(row=1, column=1)
# 送信ボタンの作成
submit_button = tk.Button(frame, text='送信', command=lambda: print(f'名前: {name_entry.get()}, メール: {email_entry.get()}'))
submit_button.grid(row=2, columnspan=2)
# メインループの開始
root.mainloop()

このコードを実行すると、名前とメールアドレスを入力するためのフォームが表示されます。

メニューバーとコンテンツエリアの分割

メニューバーを作成し、コンテンツエリアを分割することで、より複雑なアプリケーションを構築できます。

以下のコードは、メニューバーとコンテンツエリアを持つアプリケーションの例です。

import tkinter as tk
from tkinter import Menu
# メインウィンドウの作成
root = tk.Tk()
root.title("メニューバーとコンテンツエリア")
# メニューバーの作成
menu_bar = Menu(root)
root.config(menu=menu_bar)
# メニューの追加
file_menu = Menu(menu_bar, tearoff=0)
file_menu.add_command(label='新規作成')
file_menu.add_command(label='終了', command=root.quit)
menu_bar.add_cascade(label='ファイル', menu=file_menu)
# コンテンツエリアの作成
content_frame = tk.Frame(root, bg='lightgray')
content_frame.pack(fill=tk.BOTH, expand=True)
# メインループの開始
root.mainloop()

このコードを実行すると、メニューバーとコンテンツエリアが表示されるウィンドウが作成されます。

ダイアログボックスの作成

ダイアログボックスは、ユーザーに情報を提供したり、確認を求めたりするために使用されます。

以下のコードは、メッセージボックスを表示する例です。

import tkinter as tk
from tkinter import messagebox
# メインウィンドウの作成
root = tk.Tk()
root.title("ダイアログボックスの作成")
# メッセージボックスを表示する関数
def show_message():
    messagebox.showinfo("情報", "これはダイアログボックスです")
# ボタンの作成
button = tk.Button(root, text='メッセージを表示', command=show_message)
button.pack(pady=20)
# メインループの開始
root.mainloop()

このコードを実行すると、ボタンをクリックすることでメッセージボックスが表示されます。

タブ付きウィンドウの作成

タブ付きウィンドウを作成することで、複数のコンテンツを整理して表示できます。

以下のコードは、タブ付きウィンドウの例です。

import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("タブ付きウィンドウ")
# タブコントロールの作成
tab_control = ttk.Notebook(root)
# タブの作成
tab1 = ttk.Frame(tab_control)
tab_control.add(tab1, text='タブ1')
tab2 = ttk.Frame(tab_control)
tab_control.add(tab2, text='タブ2')
tab_control.pack(expand=1, fill='both')
# タブ1にラベルを追加
label1 = tk.Label(tab1, text='これはタブ1です')
label1.pack(pady=20)
# タブ2にラベルを追加
label2 = tk.Label(tab2, text='これはタブ2です')
label2.pack(pady=20)
# メインループの開始
root.mainloop()

このコードを実行すると、2つのタブを持つウィンドウが表示され、それぞれのタブに異なるコンテンツが表示されます。

レスポンシブなレイアウトの実現

レスポンシブなレイアウトを実現するためには、ウィジェットの配置方法を工夫する必要があります。

以下のコードは、ウィンドウサイズに応じてウィジェットが自動的に調整される例です。

import tkinter as tk
# メインウィンドウの作成
root = tk.Tk()
root.title("レスポンシブなレイアウト")
# フレームの作成
frame = tk.Frame(root)
frame.pack(fill=tk.BOTH, expand=True)
# ラベルの作成
label = tk.Label(frame, text='ウィンドウサイズに応じて調整されます', bg='lightblue')
label.pack(fill=tk.BOTH, expand=True)
# ボタンの作成
button = tk.Button(frame, text='クリック', command=lambda: print('ボタンがクリックされました'))
button.pack(pady=10)
# メインループの開始
root.mainloop()

このコードを実行すると、ウィンドウのサイズを変更することで、ラベルとボタンが自動的に調整されるレスポンシブなレイアウトが実現されます。

フレームやウィジェットのfillやexpandオプションを適切に設定することで、柔軟なレイアウトを作成できます。