【完全独学Python】Tkinterでタブ（Notebook）を作る！

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

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

デスクトップアプリには必須！！Tkinterでプルダウン（ttk.Notebook）を表示する方法をご紹介します！

タブはGUIの整理にとても便利です！

最後までじっくりと読んで、一緒に学習にしていきましょう。

なお、ご指摘・ご質問はTwitter（@yuyamanm118712）のDMまでよろしくお願いします。

この記事を読むと
ttk.Notebookとは
ttk.Notebookの基本
1. ttk.Notebook作成までのサンプルコード
ttk.Notebookのメソッド
応用
1. タブの追加とタブの削除のサンプルコード
まとめ

この記事を読むと

Tkinterでタブが作成できる！
TkinterでNotebookの基本的な使い方について理解できる！
TkinterでNotebookのオプションについて理解できる！

ttk.Notebookとは

ttkモジュールのNotebookウィジェットは、タブ付きのインターフェースを提供し、

ユーザーが複数のページを切り替えることができます！

この記事では、Notebookの基本的な使い方やオプションをサンプルコードとともに詳しく解説します！

ゆーや

tkinterの中でもttkモジュールを使うよ！
ttkモジュールについては以下の記事を見てね！

ttk.Notebookの基本

ttk.Notebook作成までのサンプルコード

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x300")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')

# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')

# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

root.mainloop()

Tab1押下時

Tab2押下時

ゆーや

このようなタブはよく使うよね！

これらのつくり方を詳しく説明していくよ！

ttk.Notebookのメソッド

新しいタブを追加（add）

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x300")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')

# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)
tab3 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')
notebook.add(tab3, text='Tab 3')

# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

label3 = ttk.Label(tab3, text='This is Tab 3')
label3.pack(padx=10, pady=10)

root.mainloop()

指定したタブを選択（select）

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x300")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')


# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')

# タブを選択
notebook.select(tab2)

# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

root.mainloop()

ゆーや

selectでタブを選択しておいたおかげで、

初期表示時「Tab2」を選択した状態になっているね！

指定したタブのインデックスを取得（index）

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x300")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')


# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')

# タブを選択
notebook.select(tab2)
index = notebook.index(tab1)
print(f'Tab 1 is at index {index}')


# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

root.mainloop()

ゆーや

このサンプルコードを動かすと、コンソールに選択したタブの番号が出る！
タブ1だけど最初の番号は「0」なので注意！

タブのプロパティを取得または設定（tab）

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x300")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')


# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')

# タブの情報を変更
notebook.tab(tab1, text='First Tab')

# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

root.mainloop()

ゆーや

tab()を使うと途中でタブの情報を変更できる！
例ではtab1のtextをFirst Tabに変更してみたよ！

いろいろ試してみよう！

応用

タブの追加とタブの削除のサンプルコード

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Notebook-完全独学Python")
root.geometry("400x500")

# Notebookウィジェットの作成
notebook = ttk.Notebook(root)
notebook.pack(expand=True, fill='both')

# 各タブのフレームを作成
tab1 = ttk.Frame(notebook)
tab2 = ttk.Frame(notebook)
tab3 = ttk.Frame(notebook)

# タブにフレームを追加
notebook.add(tab1, text='Tab 1')
notebook.add(tab2, text='Tab 2')
notebook.add(tab3, text='Tab 3')

# 各タブにウィジェットを追加
label1 = ttk.Label(tab1, text='This is Tab 1')
label1.pack(padx=10, pady=10)

entry1 = ttk.Entry(tab1)
entry1.pack(padx=10, pady=10)

button1 = ttk.Button(tab1, text='Submit')
button1.pack(padx=10, pady=10)

label2 = ttk.Label(tab2, text='This is Tab 2')
label2.pack(padx=10, pady=10)

text2 = tk.Text(tab2)
text2.pack(padx=10, pady=10)

label3 = ttk.Label(tab3, text='This is Tab 3')
label3.pack(padx=10, pady=10)

# タブの追加と削除
def add_tab():
    new_tab = ttk.Frame(notebook)
    notebook.add(new_tab, text=f'Tab {notebook.index("end") + 1}')
    label = ttk.Label(new_tab, text=f'This is Tab {notebook.index("end")}')
    label.pack(padx=10, pady=10)

def remove_tab():
    if notebook.index("end") > 0:
        notebook.forget(notebook.index("end") - 1)

button_frame = ttk.Frame(root)
button_frame.pack(fill='x', pady=5)

add_button = ttk.Button(button_frame, text='Add Tab', command=add_tab)
add_button.pack(side='left', padx=5)

remove_button = ttk.Button(button_frame, text='Remove Tab', command=remove_tab)
remove_button.pack(side='left', padx=5)

root.mainloop()

ゆーや

「Add Tab」でタブの追加、「Remove Tab」でタブの削除が可能だよ！
ちなみに「forgot」で削除できる！

それぞれのタブにウィジェットも載せているので、このソースをいじって

Notebookに慣れよう！

まとめ

本記事では、Notebookを使って、Tkinterで画面にタブを表示する方法を紹介しました！

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

① Tkinterで画面にタブを表示するには「Notebook」を使う
② 「add」メソッドは、新しいタブを追加！
③ 「select」メソッドは、指定したタブを選択！
④ 「index」メソッドは、指定したタブのインデックスを取得！
⑤ 「tab」メソッドは、タブのプロパティを取得または設定！
⑥ 「forgot」メソッドは、タブの削除！

ゆーや

まとめの内容を見て、もう頭に浮かべば完璧！
今日もお疲れ様です！