[Python/tkinter] Separatorで仕切り線を表示する方法！

ttkモジュールには、ウィンドウに区切り線を引くことができるttk.Separatorというメソッドがあります！

本記事では、以下の項目を分かりやすくまとめています！

ttk.Separatorの配置方法
使用可能なオプション一覧
区切り線の色を変更する方法

転職のためのスキルアップとして効率的に学びたい
副業としてプログラミングができるようになりたい
独学での勉強に限界を感じている

これらに該当する方はプログラミングスクールがスキルアップの近道です！
是非参考にしてみてください。

未経験でも安心！
学生や30代の方にもおすすめなプログラミングスクールがあります！

人気のプログラミングスクールをチェック！

Separatorを表示してみよう

ttk.Separatorの使い方

ttk.Separatorは、tkinter.ttkモジュールをインポートする必要があります。

import tkinter.ttk as ttk

そしてttk.Separatorを設定する場合には、以下のように記載します。

ttk.Separator ( parent , option )

ここでparentは、親ウィンドウを示しています。

Separatorを表示させてみよう

では実際に、Separatorを表示するプログラムを作成してみましょう！

今回は例として、ウィジェット1（四角形）とウィジェット2（四角形）を上下に配置し、その間に区切り線を引いてみるプログラムを書いてみます！

import tkinter as tk
import tkinter.ttk as ttk

def main():
    #ウィジェット1の配置
    block=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block.pack()
    #Separatorの設置
    border=ttk.Separator(root,orient="horizontal")
    border.pack(fill="both",pady=20)
    #ウィジェット2の配置
    block2=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block2.pack()
    root.mainloop()

if __name__=="__main__":
    root = tk.Tk()
    root.title("Separatorの使い方")
    root.geometry("300x230")
    main()

（実行結果）

ここで、ttk.Separator()の引数であるorientは区切り線を ”Vertical (垂直) ” あるいは ”Horizontal (水平) ” に配置することで区切り線の向きを変更することができます！

ここでボタンの配置方法についてはこちらの記事↓で解説していますので参考にしてみて下さい！

参考：ボタンの配置方法（ pack() , grid() , place() ）

引数：fill

pack()引数で指定したfillは区切り線をウィンドウの端まで伸ばすかどうかを指定しています。場合に応じて下記のどれかを適用してみてください～！

fill="both"　#方向を指定せずウィンドウ端まで引き伸ばす場合
fill=tk.X   #水平方向に引き伸ばしたい場合
fill=tk.Y   #垂直方向に引き伸ばしたい場合

もしもfillを指定しない場合、区切り線はこのように表示されます。

このように、非常に見づらいけれど二つの四角形の間に区切り線が表示されていると思います。

引数：padx , pady

次に padx , pady についてです。これらはウィジェット間に間隔を持たせたい場合に指定するオプションです。開けたい間隔を数値で指定します。

padx：水平方向のウィジェット間の間隔を指定

pady：垂直方向のウィジェット間の間隔を指定

padx と pady を指定しない場合は、下図のようにウィジェット間の間隔が非常に狭くなってしまいます。

垂直方向に区切り線を表示させたい場合

すらいむ管理人

次は、区切り線を垂直に配置したい場合のプログラムを書いてみたいと思いうます！

import tkinter as tk
import tkinter.ttk as ttk

def main():
    #ウィジェット1の配置
    block=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block.pack(side=tk.LEFT)　#左詰めに変更、padxに変更
    #Separatorの設置
    border=ttk.Separator(root,orient="vertical")　#Verticalに変更
    border.pack(side=tk.LEFT,fill="both",padx=20)　#左詰めに変更、padxに変更
    #ウィジェット2の配置
    block2=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block2.pack(side=tk.LEFT)　#左詰めに変更、padxに変更
    root.mainloop()

if __name__=="__main__":
    root = tk.Tk()
    root.title("Separatorの使い方")
    root.geometry("300x230")
    main()

（実行結果）

余談ですが、ボタンの配置方法はこちらの記事で分かりやすく解説しています！

参考：ボタンの配置方法（ pack() , grid() , place() ）

Separatorで使用できるオプション一覧

ttk.Separatorで使用できるオプション一覧は以下のようになっています。

オプション	変更点
orient	“Horizontal“：水平方向 ”Vertical”：垂直方向
cursor	マウスが区切り線をホバーした際の形状を指定
style	外観の変更

styleで区切り線の色を変更

Styleオプションを使用することで区切り線の色を変更することができます。

すらいむ管理人

今回は区切り線の色を「赤」に変更してみたいと思います～！

初めにStyleインスタンスを作成してあげます。

そして作成したインスタンスに対してstyle.configure()で詳細を指定していきます。第一引数は作成したstyleの名前（任意）で、backgroundで色を指定します。

    style = ttk.Style()
    style.configure ( " red.TSeparator " , background = " red " )

では、実際にmain関数を変更してみましょう！

先ほど作成したstyleは、ttk.Separator()内で引数として指定しています。

def main():
    block=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block.pack()

    #Styleの指定
    style=ttk.Style()
    style.configure("red.TSeparator",background="red")
    #styleを引数として指定
    border=ttk.Separator(root,orient="horizontal",style="red.TSeparator")
    border.pack(fill="both",pady=20)
    block2=tk.Label(root,relief="ridge",bg="skyblue",width=10,height=5)
    block2.pack()
    root.mainloop()

（実行結果）