こんにちは！ゆーや（@yuyamanm118712）です。
こちらのページでは完全独学でWebプログラマとなった私が
デスクトップアプリには必須！！Tkinterで境界線（Separator）を表示する方法をご紹介します！
境界線は、ウィジェットの整理やアプリの使いやすさの向上に役に立ちます！
最後までじっくりと読んで、一緒に学習にしていきましょう。
なお、ご指摘・ご質問はTwitter（@yuyamanm118712）のDMまでよろしくお願いします。
この記事を読むと
- Tkinterで境界線が作成できる！
- TkinterでSeparatorの基本的な使い方について理解できる！
- TkinterでSeparatorのオプションについて理解できる！
Separatorとは
Separatorウィジェットは、GUIアプリケーション内で他のウィジェットを視覚的に区切るための水平または垂直の線を提供します！
これは特に複数のセクションに分かれたアプリケーションで役立ちます！
例えば、設定画面やフォームなどで、異なる設定項目や入力フィールドを明確に区分けするために使用されます！
Separatorの基本
Separaotrウィジェットの作成とサンプルコード
import tkinter as tk
from tkinter import ttk
# メインウィンドウを作成
root = tk.Tk()
root.title("Separator-完全独学Python")
root.geometry("300x200")
# 水平Separatorを作成
separator_horizontal = ttk.Separator(root, orient='horizontal')
separator_horizontal.pack(fill='x', padx=10, pady=20)
# ラベルを作成
label1 = tk.Label(root, text="Section 1")
label1.pack()
# 水平Separatorを作成
separator_horizontal = ttk.Separator(root, orient='horizontal')
separator_horizontal.pack(fill='x', padx=10, pady=20)
# ラベルを作成
label2 = tk.Label(root, text="Section 2")
label2.pack()
# メインループ開始
root.mainloop()
ゆーや
水平方向の境界線が表示出来たね！
ここからSeparatorを詳しく見ていくよ！
Separatorのオプション
境界線の方向（orient）
import tkinter as tk
from tkinter import ttk
# メインウィンドウを作成
root = tk.Tk()
root.title("Separator-完全独学Python")
root.geometry("300x200")
# 水平Separatorを作成
separator_horizontal = ttk.Separator(root, orient='horizontal')
separator_horizontal.pack(fill='x', padx=10, pady=20)
# ラベルを作成
label1 = tk.Label(root, text="Above Horizontal Separator")
label1.pack()
# 垂直Separatorを作成
separator_vertical = ttk.Separator(root, orient='vertical')
separator_vertical.pack(fill='y', side='left', padx=10, pady=20)
# ラベルを作成
label2 = tk.Label(root, text="Right of Vertical Separator")
label2.pack(side='left')
# メインループ開始
root.mainloop()
ゆーや
orientオプションの設定を変えることで境界線の向きを変更できる！
理想のUIに向けて設定しよう！
カーソルの種類を指定（cursor）
import tkinter as tk
from tkinter import ttk
# メインウィンドウを作成
root = tk.Tk()
root.title("Tkinter Separator Cursor Example")
root.geometry("300x200")
# カーソルを指定した水平Separatorを作成
separator_with_cursor = ttk.Separator(root, orient='horizontal', cursor='hand2')
separator_with_cursor.pack(fill='x', padx=10, pady=20)
# ラベルを作成
label1 = tk.Label(root, text="Hover over the Separator")
label1.pack()
# メインループ開始
root.mainloop()
ゆーや
画像上なんの変化もないけど、境界線にカーソルを合わせると
カーソルの形が変化（指）になる！
このカーソルにはかなりいろいろな種類があるので試してみよう！
spiderって入れると…
Separatorのスタイルを指定（style）
import tkinter as tk
from tkinter import ttk
# メインウィンドウを作成
root = tk.Tk()
root.title("Tkinter Separator Style Example")
root.geometry("300x200")
# スタイルを設定
style = ttk.Style()
# 背景色を赤に設定
style.configure('Red.TSeparator', background='red')
# 前景色を青に設定（前景色は主にテキストに影響するため、Separatorでは見えないけど。。。）
style.configure('BlueForeground.TSeparator', foreground='blue')
# 境界線の色と幅を設定
style.configure('Bordered.TSeparator', background='green', bordercolor='black', borderwidth=2)
# reliefを設定
style.configure('Raised.TSeparator', background='yellow', relief='raised')
# スタイルを適用したSeparatorを作成
separator_red = ttk.Separator(root, orient='horizontal', style='Red.TSeparator')
separator_red.pack(fill='x', padx=10, pady=5)
separator_blue_fg = ttk.Separator(root, orient='horizontal', style='BlueForeground.TSeparator')
separator_blue_fg.pack(fill='x', padx=10, pady=5)
separator_bordered = ttk.Separator(root, orient='horizontal', style='Bordered.TSeparator')
separator_bordered.pack(fill='x', padx=10, pady=5)
separator_raised = ttk.Separator(root, orient='horizontal', style='Raised.TSeparator')
separator_raised.pack(fill='x', padx=10, pady=5)
# ラベルを作成
label1 = tk.Label(root, text="Red Separator")
label1.pack()
label2 = tk.Label(root, text="Blue Foreground Separator")
label2.pack()
label3 = tk.Label(root, text="Bordered Separator")
label3.pack()
label4 = tk.Label(root, text="Raised Separator")
label4.pack()
# メインループ開始
root.mainloop()
ゆーや
いろいろStyleをいじったものを用意してみました！
用途に合わせて使ってみてね！
まとめ
本記事では、Separatorを使って、Tkinterで画面に境界線を表示する方法を紹介しました！
ポイントは以下の４つです！
① Tkinterで画面に境界線を表示するには「Separator」を使う
② 「orient」メソッドは、境界線の向きを指定！
③ 「cursor」メソッドは、カーソルの種類を指定！
④ 「style」メソッドは、Separatorのスタイルを指定！
ゆーや
まとめの内容を見て、もう頭に浮かべば完璧！
今日もお疲れ様です！
コメント