<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tkinter｜すらぷろ</title>
	<atom:link href="https://tomtom-stock.com/category/python-tkinter/feed/" rel="self" type="application/rss+xml" />
	<link>https://tomtom-stock.com</link>
	<description>完全初心者からはじめるPython入門</description>
	<lastBuildDate>Tue, 10 Sep 2024 16:00:06 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://tomtom-stock.com/wp-content/uploads/2022/03/cropped-スクリーンショット-99-32x32.jpg</url>
	<title>Tkinter｜すらぷろ</title>
	<link>https://tomtom-stock.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Python/Tkinter】tk.Scaleの使い方/スケールを表示させる方法</title>
		<link>https://tomtom-stock.com/2023/03/14/python-tkinter-scale/</link>
					<comments>https://tomtom-stock.com/2023/03/14/python-tkinter-scale/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Mon, 13 Mar 2023 23:29:04 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1917</guid>

					<description><![CDATA[本記事では、PythonのGUIアプリケーションの一つであるtkinterでGUIを作成する際のスケールウィジェットの使い方について詳しく解説していきます！ スケールウィジェットは、下図のようにスライドバーを操作すること]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-media-text alignwide" style="grid-template-columns:26% auto"><figure class="wp-block-media-text__media"><img fetchpriority="high" decoding="async" width="344" height="400" src="https://tomtom-stock.com/wp-content/uploads/2023/02/kouyou_cat-1.png" alt="" class="wp-image-1709 size-full"/></figure><div class="wp-block-media-text__content">
<p>本記事では、PythonのGUIアプリケーションの一つであるtkinterでGUIを作成する際の<span class="marker"><strong>スケールウィジェットの使い方</strong></span>について詳しく解説していきます！</p>
</div></div>



<p></p>



<p>スケールウィジェットは、下図のようにスライドバーを操作することで任意の値を指定することができるウィジェットです。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>
</div>



<p></p>



<p>特に本記事では以下のことを紹介しています。</p>



<div class="wp-block-jin-gb-block-box simple-box6">
<ul class="wp-block-list">
<li><a href="#Scale">tk.Scale()の使い方</a></li>



<li><a href="#changecolor">スケールウィジェットの色を変更する方法</a></li>



<li><a href="#changelayout">スケールウィジェットの外観を変更する方法</a></li>



<li><a href="#changefunction">スケールウィジェットのその他のオプション機能</a></li>
</ul>
</div>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li><span class="marker"><strong>転職のためのスキルアップ</strong></span>として効率的に学びたい</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>副業</strong></mark>としてプログラミングができるようになりたい</li>



<li><span class="marker"><strong>独学での勉強に</strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>限界</strong></mark><strong>を感じている</strong></span></li>
</ul>
</div>



<p>これらに該当する方は<span class="marker"><strong>プログラミングスクール</strong></span>がスキルアップの近道です。</p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>
</div>



<p></p>



<p></p>



<h2 class="wp-block-heading" id="Scale">tk.Scaleメソッド</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="334" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png" alt="" class="wp-image-1170" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-300x98.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-768x250.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2.png 1205w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Tkinterで下記のようなスケールウィジェットを配置する場合には、<span class="marker"><strong>tk.Scale()メソッド</strong></span>を使用します。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="381" height="208" src="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.png" alt="scale1" class="wp-image-1915"/></figure></div>


<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>scale = tk.Scale(root, options...)</code></pre></div>



<p></p>



<h2 class="wp-block-heading">tk.Scaleで値を取得する方法</h2>



<p>スケールウィジェットは、スライドバーを操作することによって任意の値を指定することができます。</p>



<p>このとき指定した値を取得する場合には、<span class="marker">.get()メソッド</span>を指定する必要があります。</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>では実際に、サンプルコードを交えながらtk.Scale()メソッド及び.get()メソッドの使い方を説明していきます！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading">サンプルコード</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="337" src="https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat-1024x337.png" alt="" class="wp-image-1168" srcset="https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat-1024x337.png 1024w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat-300x99.png 300w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat-768x253.png 768w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat.png 1200w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat-1024x337.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p><span class="marker"><strong>tk.Scale()メソッド</strong></span>を使用してスケールウィジェットを作成するサンプルコードを紹介します。今回は<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>0～255</strong></mark>の値を選択可能なスケールウィジェットを作成します。</p>



<p>なお今回示すサンプルコードは、スライドバーを動かすと<span class="marker"><strong>&#8220;now_value&#8221;関数</strong></span>（自作した関数）が実行されてコンソール上にスケールウィジェットの現在値を表示させるようになっています。</p>



<p>now_value関数では、<span class="marker"><strong>.get()メソッド</strong></span>を用いてスケールの現在値を取得しています。</p>



<p>スケールウィジェットで選択できる値の型によってサンプルコードを使い分けられるようにしています！</p>



<div class="wp-block-jin-gb-block-box simple-box2">
<ul class="wp-block-list">
<li><a href="#intvar">整数型で値を取得したい場合のサンプルコード</a></li>



<li><a href="#doublevar">浮動小数点型で値を取得したい場合のサンプルコード</a></li>
</ul>
</div>



<h3 class="wp-block-heading" id="intvar">整数型（Int）で値を取得したい場合</h3>



<p>整数型で値を取得したい場合のサンプルコードは下記のようになります。</p>



<p>スケール値の変数を<span class="marker"><strong>&#8220;tk.IntVar()&#8221;</strong></span>で指定しています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def now_value(val):
    print(val.get())

root = tk.Tk()
root.title(&#39;Scale&#39;)
root.geometry(&quot;250x100&quot;)

#スケール値の型を指定
val = tk.IntVar()

# スケールの作成
scale = tk.Scale(
    root,
    orient=tk.HORIZONTAL,
    variable=val,
    from_=0,
    to=255,
    length=150,
    command=lambda e: now_value(val)
)
scale.pack()

root.mainloop()</code></pre></div>



<p>(実行結果)</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>
</div>



<p></p>



<h3 class="wp-block-heading" id="doublevar">浮動小数点型(Double)で値を取得したい場合</h3>



<p>浮動小数点型で値を取得したい場合のサンプルコードは下記のようになります。</p>



<p>スケール値の変数を<span class="marker"><strong>&#8220;tk.DoubleVar()&#8221;</strong></span>とし、resolutionオプションでスケールウィジェット上に表示させる値の桁数も指定しています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def now_value(val):
    print(val.get())

root = tk.Tk()
root.title(&#39;Scale&#39;)
root.geometry(&quot;250x100&quot;)

#スケール値の型を指定
val = tk.DoubleVar()

# スケールの作成
scale = tk.Scale(
    root,
    orient=tk.HORIZONTAL,
    variable=val,
    from_=0,
    to=255,
    length=150,
    resolution=0.1,
    command=lambda e: now_value(val)
)
scale.pack()

root.mainloop()</code></pre></div>



<p>（実行結果）</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale_double_new.png" src="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale_double_new.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>
</div>



<p></p>



<p>このように小数で表示させることができました。</p>



<p>ここでresolutionの値を<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>0.01</strong></mark>と変更すると、スケールウィジェット上に表示される数値は下記のように表示されます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="342" height="192" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-8.png" alt="scale2" class="wp-image-1920"/></figure></div>


<p>resolutionを<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>0.001</strong></mark>として桁数を増やしてみると、スケールウィジェット上に表示される数値は下記のように表示されます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="356" height="195" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-9.png" alt="scale3" class="wp-image-1921"/></figure></div>


<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>resolutionを始めとしてスケールウィジェットで使用できる様々なオプションも続いて紹介していきます！</p>
</div></div></div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>



<p></p>



<h2 class="wp-block-heading">使用可能なオプション</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="311" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png" alt="" class="wp-image-1112" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-300x91.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-768x233.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2.png 1080w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>tk.Scale()メソッドで使用できる様々なオプションを下記項目に分けて紹介していきます！</p>



<div class="wp-block-jin-gb-block-box simple-box4">
<ul class="wp-block-list">
<li><a href="#changecolor">色を変更するオプション一覧</a></li>



<li><a href="#changelayout">外観を変更できるオプション一覧</a></li>



<li><a href="#changefunction">その他機能に関するオプション一覧</a></li>
</ul>
</div>



<h3 class="wp-block-heading" id="changecolor">色を変更するオプション一覧</h3>



<p>スケールウィジェットの外観の色を変更するオプションはこのようになっています。</p>



<figure class="wp-block-table"><table><tbody><tr><td><a href="#background">background</a></td><td>背景色の指定</td></tr><tr><td><a href="#foreground">foreground</a></td><td>文字色の指定</td></tr><tr><td><a href="#activebackground">activebackground</a></td><td>スライドバーがアクティブになった際の色を指定</td></tr><tr><td><a href="#troughcolor">troughcolor</a></td><td>スケールバーの背景を指定</td></tr><tr><td><a href="#highlightcolor">highlightcolor</a></td><td>フォーカスされた際の囲い線を指定</td></tr><tr><td><a href="http://highlightcolor">highlightbackground</a></td><td>フォーカスが外れた際の囲い線を指定</td></tr><tr><td><a href="#highlightthickness">highlightthickness</a></td><td>フォーカスされた際の囲い線の太さを指定</td></tr></tbody></table></figure>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>今回は、ウィジェットの色をそれぞれ&#8221;orange&#8221;に変更してみます！</p>
</div></div></div>



<h4 class="wp-block-heading" id="background">■backgroundオプション</h4>



<p><strong>backgroundオプション</strong>を指定すると、ウィジェット全体（フォントが表示される部分も含む）の<span class="marker">背景色</span>を変更させることができます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="363" height="189" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-10.png" alt="scale4" class="wp-image-1923"/></figure></div>


<h4 class="wp-block-heading" id="foreground">■foregroundオプション</h4>



<p><strong>foregroundオプション</strong>を指定すると<span class="marker">スケールバーのフォントの色</span>を変更させることができます。foregroundオプションで色を指定した場合は、<a href="#tickinterval">tickintervalオプション</a>などでフォントを追加した場合のフォントにも適用されるようです。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="366" height="197" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-11.png" alt="scale5" class="wp-image-1924"/></figure></div>


<h4 class="wp-block-heading" id="activebackground">■activebackgroundオプション</h4>



<p><strong>activebackgroundオプション</strong>を指定すると、スライドバーが<span class="marker">マウスONになった際の色</span>を任意に変更させることができます。</p>



<p>マウスON時に色が変わるとスライドバーがアクティブ状態であることが分かりやすいですね！</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/03/activebackground.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"></div>
</div>



<p></p>



<h4 class="wp-block-heading" id="troughcolor">■troughcolorオプション</h4>



<p><strong>troughcolorオプション</strong>を指定すると、スケールウィジェットのバーの<span class="marker">背景色</span>を変更することができます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="359" height="196" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-12.png" alt="scale6" class="wp-image-1926"/></figure></div>


<h4 class="wp-block-heading" id="highlightcolor">■highlightcolor / highlightbackgroundオプション</h4>



<p><strong>highlightcolorオプション</strong>を指定すると、スケールウィジェットにフォーカスが当てられた際の<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>外枠の色</strong></mark>を変更することができます。</p>



<p>また、スケールウィジェットからフォーカスが外れた際に外枠の色を指定したい場合にはhighlightbackgroundオプションを指定することで変更できます。</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="365" height="190" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-13.png" alt="scale7" class="wp-image-1927"/></figure></div>


<h4 class="wp-block-heading" id="highlightthickness">■highlightthichnessオプション</h4>



<p><strong>highlightthicknessオプション</strong>を指定すると、<br><a href="#highlightcolor">highlightcolor/highlightbackgroundオプション</a>で指定した<span class="marker">外枠の太さ</span>を指定することができます。</p>



<p></p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<h3 class="wp-block-heading" id="changelayout">外観に関するオプション一覧</h3>



<p>スケールウィジェットの外観に関するオプション一覧は以下のようになっています！</p>



<figure class="wp-block-table"><table><tbody><tr><td><a href="#label">label</a></td><td>ラベルを付与</td></tr><tr><td><a href="#font">font</a></td><td>文字のフォント(太さ, サイズなど)を変更</td></tr><tr><td><a href="#length">length</a></td><td>ウィジェットの横幅を変更</td></tr><tr><td><a href="#width">width</a></td><td>ウィジェットの縦幅を変更</td></tr><tr><td><a href="#borderwidth">borderwidth</a></td><td>境界線の太さを変更</td></tr><tr><td><a href="#relief">relief</a></td><td>ウィジェットの外観を変更</td></tr><tr><td><a href="http://sliderrelief">sliderrelief</a></td><td>スライドバーの外観を変更</td></tr><tr><td><a href="#orient">orient</a></td><td>ウィジェットの向きを変更</td></tr><tr><td><a href="#showvalue">showvalue</a></td><td>ウィジェットに目盛りを追加</td></tr><tr><td><a href="#sliderlength">sliderlength</a></td><td>スライドバーの長さを変更</td></tr></tbody></table></figure>



<h4 class="wp-block-heading" id="label">■labelオプション</h4>



<p><strong>labelオプション</strong>を指定すると、下図のようにスケールウィジェット上部に<span class="marker">ラベルを付与</span>することができます。</p>



<p>ここで付け加えたラベルの色を変更したい場合には、<a href="#foreground">foregroundオプション</a>を使用することで変更可能です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>label=&quot;（自由テキスト）&quot;</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="375" height="210" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-14.png" alt="scale8" class="wp-image-1928"/></figure></div>


<h4 class="wp-block-heading" id="font">■fontオプション</h4>



<p><strong>fontオプション</strong>を指定すると、スケールウィジェット上に作成された<span class="marker">文字のフォントを変更</span>することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>font=(&quot;&quot;, 20)</code></pre></div>



<p></p>



<p>fontオプションの第一引数には、変更したい字体を指定します。たとえば、&#8221;MS Gothic&#8221;などです。また、第二引数には文字のサイズを指定します。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="375" height="211" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-15.png" alt="scale9" class="wp-image-1929"/></figure></div>


<p>実際にフォントを変更してみます。筆者の好きな&#8221;Ink free&#8221;というフォントに変更してみると下記のように変更できました！</p>



<p>font一覧を詳しく見たい場合には、<a href="https://tomtom-stock.com/2022/03/03/tkinter-font/">font一覧の記事</a>を参考にしてみてください。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>font=(&quot;Ink free&quot;, 20)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="351" height="263" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-16.png" alt="scale10" class="wp-image-1930"/></figure></div>


<h4 class="wp-block-heading" id="length">■lengthオプション</h4>



<p><strong>lengthオプション</strong>を指定すると、スケールウィジェットの<span class="marker">長手方向の長さを変更</span>することができます。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="359" height="197" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-17.png" alt="scale11" class="wp-image-1931"/></figure>



<p class="has-text-align-center"><strong>length=100</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="372" height="195" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-18.png" alt="scale12" class="wp-image-1932"/></figure>



<p class="has-text-align-center"><strong>length=200</strong></p>
</div>
</div>



<p></p>



<h4 class="wp-block-heading" id="width">■widthオプション</h4>



<p><strong>widthオプション</strong>を指定すると、スケールウィジェットの<span class="marker">短手方向の長さを変更</span>することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>width=50</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="373" height="201" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-19.png" alt="scale13" class="wp-image-1933"/></figure></div>


<p></p>



<h4 class="wp-block-heading" id="borderwidth">■borderwidthオプション</h4>



<p><strong>borderwidthオプション</strong>を指定するとスケールウィジェットの<span class="marker">境界線の太さを変更</span>することができます。太くするとウィジェットは協調されたように見えます。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="353" height="195" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-20.png" alt="scale14" class="wp-image-1934"/></figure>



<p class="has-text-align-center"><strong>boederwidth=10</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="360" height="230" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-21.png" alt="scale15" class="wp-image-1935"/></figure>



<p class="has-text-align-center"><strong>borderwidth=50</strong></p>
</div>
</div>



<p></p>



<h4 class="wp-block-heading" id="relief">■reliefオプション</h4>



<p><strong>reliefオプション</strong>を指定すると、ウィジェットを<span class="marker">配置した際の見た目</span>を変更することができます。指定できる見た目は下記の6パターンになります！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>relief=&quot;flat&quot;
relief=&quot;groove&quot;
relief=&quot;raised&quot;
relief=&quot;ridge&quot;
relief=&quot;solid&quot;
relief=&quot;sunken&quot;</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="354" height="571" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-22.png" alt="scale16" class="wp-image-1936"/></figure></div>


<p></p>



<h4 class="wp-block-heading" id="sliderrelief">■sliderreliefオプション</h4>



<p><strong>sliderreliefオプション</strong>を指定すると、<span class="marker">スライドバーの見た目を変更</span>することができます。変更できる見た目は、reliefオプションと同様に下記の6パターンになります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>sliderrelief=&quot;flat&quot;
sliderrelief=&quot;groove&quot;
sliderrelief=&quot;raised&quot;
sliderrelief=&quot;ridge&quot;
sliderrelief=&quot;solid&quot;
sliderrelief=&quot;sunken&quot;</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="353" height="577" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-23.png" alt="scale17" class="wp-image-1937"/></figure></div>


<p></p>



<h4 class="wp-block-heading" id="orient">■orientオプション</h4>



<p><strong>orientオプション</strong>を指定すると、<span class="marker">スケールウィジェットの向きを変更</span>することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>orient=tk.HORIZONTAL #水平
orient=tk.VERTICAL #垂直</code></pre></div>



<p></p>



<p>スケールウィジェットの方向を縦にした場合、ラベルは左側に表示されるようです。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="347" height="191" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-24.png" alt="scale18" class="wp-image-1938"/></figure>



<p class="has-text-align-center"><strong>orient=tk.HORIZONTAL</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="353" height="327" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-25.png" alt="scale19" class="wp-image-1939"/></figure>



<p class="has-text-align-center"><strong>orient=tk.VERTICAL</strong></p>
</div>
</div>



<p></p>



<p></p>



<h4 class="wp-block-heading" id="showvalue">■showvalueオプション</h4>



<p><strong>showvalueオプション</strong>を指定すると、<span class="marker">スライドバーの現在値の表示/非表示を指定</span>することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>showvalue=True #値を表示（デフォルト）
showvalue=False #値を非表示</code></pre></div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="357" height="200" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-28.png" alt="scale20" class="wp-image-1947"/></figure>



<p class="has-text-align-center"><strong>showvalue=True</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="354" height="193" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-27.png" alt="scale21" class="wp-image-1946"/></figure>



<p class="has-text-align-center"><strong>showvalue=False</strong></p>
</div>
</div>



<p></p>



<p></p>



<h4 class="wp-block-heading" id="sliderlength">■sliderlengthオプション</h4>



<p><strong>sliderlengthオプション</strong>を指定すると、<span class="marker">スライドバーの横幅を変更</span>することができます。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="350" height="193" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-30.png" alt="scale22" class="wp-image-1949"/></figure>



<p class="has-text-align-center"><strong>sliderlength=20</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="361" height="197" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-31.png" alt="scale23" class="wp-image-1950"/></figure>



<p class="has-text-align-center"><strong>sliderlength=50</strong></p>
</div>
</div>



<p></p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p class="has-text-align-center has-small-font-size">スポンサーリンク</p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ　レスポンシブ -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4709394586832392" data-ad-slot="5973725251" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h3 class="wp-block-heading" id="changefunction">機能に関するオプション</h3>



<p><a href="#changecolor">色に関するオプション</a>と<a href="#changelayout">外観に関するオプション</a>以外の<span class="marker"><strong>機能的なオプション一覧</strong></span>は下記のようになっています。</p>



<figure class="wp-block-table"><table><tbody><tr><td><a href="#state">state</a></td><td>操作可否を指定</td></tr><tr><td><a href="#set">set</a></td><td>スライドバーの値を指定</td></tr><tr><td><a href="#cursor">cursor</a></td><td>マウスON時のカーソルを指定</td></tr><tr><td><a href="#takefocus">takefocus</a></td><td>フォーカスの有効/無効を指定</td></tr><tr><td><a href="#from">from_</a></td><td>スケールの最小値を指定<sup>※</sup></td></tr><tr><td><a href="#from">to</a></td><td>スケールの最大値を指定<sup>※</sup></td></tr><tr><td><a href="#resolution">resolution</a></td><td>表示される桁数を指定</td></tr><tr><td><a href="#variable">variable</a></td><td>変数の型を指定</td></tr><tr><td><a href="#command">command</a></td><td>クリック時に実行される関数を指定</td></tr><tr><td><a href="#tickinterval">tickinterval</a></td><td>目盛りの追加</td></tr><tr><td><a href="#digits">digits</a></td><td>有効桁数を指定</td></tr></tbody></table></figure>



<p>※&#8221;from_&#8221;&gt;&#8221;to&#8221;で値を指定するとスライドバーを右から左に動かすウィジェットになります。（通常は左から右）</p>



<h4 class="wp-block-heading" id="state">■stateオプション</h4>



<p><strong>stateオプション</strong>は、<span class="marker">ウィジェットの状態を指定</span>できます。</p>



<p>アクティブ状態および通常状態ではスライドバーの操作が可能ですが、無効状態にした場合にはスライドバーを操作することができなくなります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>state=&quot;active&quot; #アクティブ状態
state=&quot;normal&quot; #通常状態（デフォルト）
state=&quot;disabled&quot; #無効状態</code></pre></div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="365" height="194" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-32.png" alt="scale24" class="wp-image-1951"/></figure>



<p class="has-text-align-center"><strong>state=&#8221;active&#8221;</strong></p>



<figure class="wp-block-image size-full"><img decoding="async" width="346" height="187" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-34.png" alt="scale26" class="wp-image-1953"/></figure>



<p class="has-text-align-center"><strong>state=&#8221;disabled&#8221;</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="363" height="193" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-33.png" alt="scale25" class="wp-image-1952"/></figure>



<p class="has-text-align-center"><strong>state=&#8221;normal&#8221;</strong></p>
</div>
</div>



<p>外観にあまり変化はないみたいです。</p>



<p></p>



<h4 class="wp-block-heading" id="set">■setオプション</h4>



<p><strong>setオプション</strong>を使用すると、<span class="marker">スライドバーの位置を指定</span>した位置に変更できます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#スケール値を50に指定する場合のサンプルコード
scale=tk.Scale(root, options...)
scale.set(50)</code></pre></div>



<p></p>



<h4 class="wp-block-heading" id="cursor">■cursorオプション</h4>



<p><strong>cursorオプション</strong>を指定するとマウスON時の<span class="marker"><strong>カーソルのアイコンを変更</strong></span><strong>できます</strong>。</p>



<p>代表的なアイコンをいくつか紹介していきます！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#代表的なものをいくつか紹介
cursor = &quot;arrow&quot;  #通常
cursor = &quot;dot&quot;      #点
cursor = &quot;target&quot;  #目のアイコン
cursor = &quot;star&quot;     #☆のアイコン
cursor = &quot;hand1&quot;  #手のアイコン
cursor = &quot;hand2&quot;  #手のアイコン</code></pre></div>



<p></p>



<h4 class="wp-block-heading" id="takefocus">■takefocusオプション</h4>



<p><strong>takefocusオプション</strong>は、ウィジェットにフォーカスが当てられるようにしたりフォーカスが当てられないようにしたりできます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>takefocus=True #フォーカスを当てられるようにする
takefocus=False #フォーカスが当てられないようにする（デフォルト）</code></pre></div>



<p></p>



<h4 class="wp-block-heading" id="from">■from_ , toオプション</h4>



<p>「from_」でスクロールバーの最小値（<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>x<sub>1</sub></strong></mark>）を指定し、「to」でスクロールバーの最大値（<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>x<sub>2</sub></strong></mark>）を指定します。指定の仕方によってスケールバーの初期配置の位置が変わります。</p>



<p>・<span class="marker"><strong>ｘ<sub>1</sub>＜ｘ<sub>2</sub>と指定した場合</strong></span></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="364" height="196" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-35.png" alt="scale27" class="wp-image-1954"/></figure></div>


<p>・<span class="marker"><strong>ｘ<sub>1</sub>＞ｘ<sub>2</sub>と指定した場合</strong></span></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="364" height="196" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-36.png" alt="scale28" class="wp-image-1955"/></figure></div>


<p></p>



<h4 class="wp-block-heading" id="resolution">■resolutionオプション</h4>



<p><strong>resolutionオプション</strong>は、スケールバー上に表示される値をどのように表示させるかを指定することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>resolution=1
resolution=0.1
resolution=0.01</code></pre></div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="359" height="192" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-37.png" alt="scale29" class="wp-image-1956"/></figure>



<p class="has-text-align-center"><strong>resolution=1</strong></p>



<figure class="wp-block-image size-full"><img decoding="async" width="353" height="190" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-39.png" alt="scale31" class="wp-image-1958"/></figure>



<p class="has-text-align-center"><strong>resolution=0.01</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="362" height="198" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-38.png" alt="scale30" class="wp-image-1957"/></figure>



<p class="has-text-align-center"><strong>resolution=0.1</strong></p>
</div>
</div>



<p></p>



<p></p>



<h4 class="wp-block-heading" id="variable">■variableオプション</h4>



<p><strong>variableオプション</strong>で、スケールウィジェットから<span class="marker">取得できる値の型を指定</span>します。取得できる値の型は下記のようなものが挙げられます。</p>



<p>実際の使い方は<a href="#intvar">サンプルコード</a>を参考にしてみてください。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>val = tk.DoubleVar() #浮動小数点型を指定
val = tk.IntVar() #整数型を指定
val = tk.StringVar() #文字型を指定</code></pre></div>



<p></p>



<h4 class="wp-block-heading" id="command">■commandオプション</h4>



<p><strong>commandオプション</strong>は、ウィジェットがクリックされた際に、何か処理を追加したい場合に使用します。</p>



<p>実際の使い方は<a href="#intvar">サンプルコード</a>を参考にしてみてください。</p>



<p></p>



<h4 class="wp-block-heading" id="tickinterval">■tickintervalオプション</h4>



<p><strong>tickintervalオプション</strong>を指定すると下記のように、<span class="marker">スケール上に目盛りを追加</span>することができます。目盛りの幅も任意に変更することができます。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="364" height="196" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-40.png" alt="scale32" class="wp-image-1959"/></figure>



<p class="has-text-align-center"><strong>tickinterval=50</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="357" height="190" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-41.png" alt="scale33" class="wp-image-1960"/></figure>



<p class="has-text-align-center"><strong>tickinterval=100</strong></p>
</div>
</div>



<p></p>



<h4 class="wp-block-heading" id="digits">■digitsオプション</h4>



<p><strong>digitsオプション</strong>は、<span class="marker">表示させる桁数を指定</span>することができるオプションです。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="354" height="192" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-42.png" alt="scale34" class="wp-image-1961"/></figure>



<p class="has-text-align-center"><strong>digits=5</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="362" height="197" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-43.png" alt="scale35" class="wp-image-1962"/></figure>



<p class="has-text-align-center"><strong>digits=8</strong></p>
</div>
</div>



<p></p>



<p>以上となります。<br>最後まで見ていただきありがとうございました！</p>



<p><a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/">Python学習に役立つ書籍</a>や<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" data-type="post" data-id="1411">プログラミングスクール</a>をランキング形式で分かりやすく紹介しています。</p>



<p></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/03/14/python-tkinter-scale/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.mp4" length="398271" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/03/activebackground.mp4" length="377547" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale_double_new.mp4" length="560214" type="video/mp4" />

			</item>
		<item>
		<title>【Python/GUI】簡単にGUIを作成できるTkinterとは？使用できるメソッド一覧も紹介！</title>
		<link>https://tomtom-stock.com/2023/03/06/python_tkinter-methods/</link>
					<comments>https://tomtom-stock.com/2023/03/06/python_tkinter-methods/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Mon, 06 Mar 2023 07:35:43 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1864</guid>

					<description><![CDATA[本記事では、Pythonで簡単にGUIアプリケーションが作成できるTkinterというライブラリを初心者にも分かりやすく紹介していきます！ Tkinterとは Tkinter（ティーキンター）は、Pythonに標準で付属]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-media-text alignwide" style="grid-template-columns:26% auto"><figure class="wp-block-media-text__media"><img decoding="async" width="344" height="275" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-8.png" alt="" class="wp-image-1415 size-full"/></figure><div class="wp-block-media-text__content">
<p>本記事では、Pythonで簡単にGUIアプリケーションが作成できるTkinterというライブラリを初心者にも分かりやすく紹介していきます！</p>
</div></div>



<p></p>



<h2 class="wp-block-heading">Tkinterとは</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="325" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png" alt="" class="wp-image-1132" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-300x95.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-768x244.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4.png 1222w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p><span class="marker"><strong>Tkinter（ティーキンター）</strong></span>は、Pythonに標準で付属しているGUIライブラリです。</p>



<p>GUIの作成に必要な基本的な機能は使用することができるため、幅広い分野で用いられています。</p>



<p></p>



<h2 class="wp-block-heading">Tkinterのメリット・デメリット</h2>



<p>Tkinterは大きく下記のようなことが<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">メリット</mark>として挙げられます。</p>



<div class="wp-block-jin-gb-block-box simple-box2">
<ul class="wp-block-list">
<li>標準ライブラリとして付属しているためインストール不要</li>



<li>使用している人が多いためネットに情報が多い</li>



<li>シンプルな記述でGUIを作成できる</li>
</ul>
</div>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>使用している人が少ないライブラリは、細かな機能の実装やエラーの対処法が分からなかったりしますよね。。。</p>
</div></div></div>



<p>逆にTkinterの<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color"><strong>デメリット</strong></mark>は下記のことが挙げられます。</p>



<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li>その他のGUIライブラリと比較して複雑な機能を実装する機能が少ないため凝ったGUIを作成する際には不向き</li>
</ul>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>



<p></p>



<h2 class="wp-block-heading">Tkinterで作成できるウィジェット</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="373" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png" alt="" class="wp-image-1101" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-300x109.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-768x280.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat.png 1048w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Tkinterを用いるとボタンやテキストラベルといった様々なウィジェットを作成することができます。</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>今回はTkinterで使用可能なメソッドをいくつか紹介していきます！</p>
</div></div></div>



<h3 class="wp-block-heading">tkinterで使用できるメソッド一覧</h3>



<p>紹介するメソッド一覧は以下の通りです。</p>



<figure class="wp-block-table"><table><tbody><tr><td><a href="#label"><strong>label</strong></a></td><td>テキストラベルの作成</td></tr><tr><td><a href="#button"><strong>button</strong></a></td><td>ボタンの作成</td></tr><tr><td><a href="#checkbutton"><strong>checkbutton</strong></a></td><td>チェックボタンの作成</td></tr><tr><td><a href="#radiobutton"><strong>radiobutton</strong></a></td><td>ラジオボタンの作成</td></tr><tr><td><a href="#entry"><strong>entry</strong></a></td><td>エントリーボックスの作成</td></tr><tr><td><a href="#listbox"><strong>listbox</strong></a></td><td>リストボックスの作成</td></tr><tr><td><a href="#optionmenu"><strong>optionmenu</strong></a></td><td>選択肢を表示できるボタンの作成</td></tr><tr><td><a href="#spinbox"><strong>spinbox</strong></a></td><td>スピンボックスの作成</td></tr><tr><td><a href="#separator"><strong>separator</strong></a></td><td>区切り線を作成</td></tr><tr><td><a href="#notebook"><strong>notebook</strong></a></td><td>タブ付きウィジェットの作成</td></tr><tr><td><a href="#canvas"><strong>canvas</strong></a></td><td>図形配置のためのウィジェットを作成</td></tr><tr><td><a href="#menu"><strong>menu</strong></a></td><td>メニューバーの作成</td></tr><tr><td><a href="#tkScale"><strong>scale</strong></a></td><td>スケールウィジェットの作成</td></tr></tbody></table></figure>



<p></p>



<h4 class="wp-block-heading" id="label">■テキストラベルを作成する</h4>



<p>「<span class="marker"><strong>テキストラベル</strong></span>」をGUI上に表示させた結果は以下のようになります。<br>テキストの文字や色は自由に変更することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.Label(root, text=&quot;（自由テキスト）&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="301" height="186" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-53.png" alt="result of textlabel" class="wp-image-1867"/></figure></div>


<p></p>



<h4 class="wp-block-heading" id="button">■ボタンを作成する</h4>



<p><span class="marker"><strong>「ボタン」ウィジェット</strong></span>をGUI上に表示させた結果は以下のようになります。</p>



<p>ボタンウィジェットはクリックすることで「クリックイベント」を発生させることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.Button(root, text=&quot;（自由テキスト）&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="309" height="178" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-52.png" alt="result of button" class="wp-image-1865"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>ボタンウィジェットの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/13/tkinter-button-adjust/">「ボタンウィジェット」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="checkbutton">■チェックボタンを作成する</h4>



<p><span class="marker"><strong>「チェックボタン」ウィジェット</strong></span>をGUI上に配置した結果はこのようになります。</p>



<div class="wp-block-jin-gb-block-box-with-headline kaisetsu-box5"><div class="kaisetsu-box5-title">チェックボックスとは</div>
<p>該当する項目の「ON/OFF」を任意の数だけ指定することができるウィジェットのこと</p>
</div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="394" height="253" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-54.png" alt="result of checkbutton" class="wp-image-1868"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>詳しい使い方が知りたい場合はコチラ：<br><a href="https://tomtom-stock.com/2022/02/13/tkinter-checkbox-radiobox/">「チェックボタン」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="radiobutton">■ラジオボタンを作成する</h4>



<p><span class="marker"><strong>「ラジオボタン」ウィジェット</strong></span>をGUI上に配置した結果はこのようになります。</p>



<div class="wp-block-jin-gb-block-box-with-headline kaisetsu-box5"><div class="kaisetsu-box5-title">ラジオボタンとは</div>
<p>表示されている項目のうち一つだけを「ON」にすることができるウィジェットのこと</p>
</div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="399" height="244" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-55.png" alt="result of radiobutton" class="wp-image-1870"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>詳しい使い方が知りたい場合はコチラ：<br><a href="https://tomtom-stock.com/2022/02/13/tkinter-checkbox-radiobox/">「ラジオボタン」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="entry">■エントリーボックスを作成する</h4>



<p>「<span class="marker"><strong>エントリーボックス</strong></span>」をGUI上に配置した結果はこのようになります。</p>



<p>エントリーボックスは、テキスト入力ができるウィジェットです。<br>入力した値を用いて様々な処理を行うことができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.Entry(root)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="410" height="198" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-57.png" alt="result of entry" class="wp-image-1873"/></figure></div>


<p></p>



<p></p>



<h4 class="wp-block-heading" id="listbox">■リストボックスを作成</h4>



<p>「<span class="marker"><strong>リストボックス</strong></span>」をGUI上に配置した結果はこのようになります。</p>



<p>リストボックスは、選択肢を一覧として表示させられるウィジェットです。ここで表示させた選択肢から一つを選択して値を返すことができます。</p>



<p>また、オプションを追加すると複数選択ができるようにもなります。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="493" height="282" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image.png" alt="result of listbox" class="wp-image-1373"/></figure></div>


<p></p>



<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ　レスポンシブ -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4709394586832392" data-ad-slot="5973725251" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h4 class="wp-block-heading" id="optionmenu">■オプションメニューボタンを作成する</h4>



<p>「<span class="marker"><strong>オプションメニューボタン</strong></span>」はボタンクリック時に選択肢を下記のように表示させられるウィジェットです。</p>



<p>ボタンの横に「-」マークがあるのが特徴的です。<br>実際に表示させると下記のようになります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.OptionMenu(master, variable, *values, **kwargs)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="421" height="242" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image.png" alt="result of optionmenu1" class="wp-image-1880"/></figure></div>


<p>GUI上に作成されたボタンをクリックすると選択肢の一覧が表示されます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="401" height="245" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-56.png" alt="result of optionmenu2" class="wp-image-1871"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>OptionMenuの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2023/02/06/tkinter-optionmenu/">「オプションメニュー」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="spinbox">■スピンボックスを作成する</h4>



<p>「<span class="marker"><strong>スピンボックス</strong></span>」は数値や任意の選択肢を右側の▲▼ボタンで変更できるウィジェットです。</p>



<p>数値は下記のように、整数単位でも変更できますしオプションを指定することで小数単位でも変更させることができます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="281" height="200" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie1.png" alt="result of spinbox" class="wp-image-1497"/></figure></div>


<p></p>



<p>また、数値だけでなく任意の選択肢を選ばせることもできます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="356" height="198" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_country.png" alt="result of spinbox" class="wp-image-1502"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>Spinboxの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2023/02/12/tkinter-spinbox/" data-type="post" data-id="1495">「スピンボックス」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="separator">■区切り線を作成する</h4>



<p><span class="marker"><strong>区切り線</strong></span>はGUIの画面上に直線を引くことができるウィジェットです。</p>



<p>tkinterの「<strong>Separatorメソッド</strong>」を使用します。直線の長さや色も自由に指定することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>ttk.Separator ( parent , option )</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="387" height="334" src="https://tomtom-stock.com/wp-content/uploads/2022/03/image-17.png" alt="result of separator" class="wp-image-599"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>Separatorの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/03/07/tkinter-separator/">「区切り線」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="notebook">■タブ付きウィンドウを作成する</h4>



<p><span class="marker"><strong>タブ付きウィジェット</strong></span>をGUI上に表示させた結果はこのようになります。表示されたタブ付きウィジェット上の「タブ」をクリックすることで表示される画面を切り替えることができます。</p>



<p>実際に使用する場合は、Tkinterの「<strong>notebookメソッド</strong>」を用います。<br>タブの個数や大きさなども自由に変更することができます！</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/02/image-28.png" alt="result of notebook" class="wp-image-248" width="409" height="336"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>タブ付きウィジェットの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/24/tkinter-ttknotebook/">「notebookメソッド」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="canvas">■図形を作成・配置するためのウィジェットを作成</h4>



<p><span class="marker"><strong>Tkinterで作成したGUI上に図形を配置したり画像を挿入したりする場合</strong></span>には、「Canvas」というウィジェットを配置させる必要があります。</p>



<p>実際に配置してみると下記のようになりました。<br>（分かりやすいように色を水色にしています）</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-58.png" alt="result of canvas1" class="wp-image-1874" width="377" height="215"/></figure></div>


<p>Canvasを使用して長方形を作成してみると下記のようになります。<br>他にも、円や三角形、多角形など様々な図形をCanvas上に作成することができます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/02/image-16.png" alt="camvas-image2" class="wp-image-196" width="401" height="267"/></figure></div>


<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>Canvasの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/20/python-tkinter-canvas/">図形を作成・配置する「Canvas」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="menu">■メニューバーの作成</h4>



<p>「<span class="marker"><strong>メニューバー</strong></span>」は作成したGUIの上部に ”<strong>ファイル</strong>” や ”<strong>編集</strong>” といったような項目を設定できます。<br>使用する場合には、<strong>tk.Menu()メソッド</strong>を使用します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>editmenu=tk.Menu(menubar)
menubar.add_cascade(label=&quot;編集&quot;,menu=editmenu)</code></pre></div>



<p></p>



<p>実際にGUI上に配置してみるとこのようになります。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="262" height="199" src="https://tomtom-stock.com/wp-content/uploads/2022/02/image-2.png" alt="result of menu" class="wp-image-137"/></figure></div>


<p>配置したメニューバーには、上図のように「新規作成」「上書き保存」「名前を変更して保存」などの要素を追加させることもできます。</p>



<p></p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>メニューバーの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/15/tkinter-menubar/">「Menubar」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="tkScale">■スケールウィジェットの作成</h4>



<p>「<span class="marker"><strong>スケールウィジェット</strong></span>」は、スライドバーを動かすことで任意の値を取得できるようにするウィジェットです。</p>



<p>実際に使用する場合には、<strong>tk.Scale()メソッド</strong>を使用します。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="381" height="208" src="https://tomtom-stock.com/wp-content/uploads/2023/03/tk_scale1.png" alt="scale1" class="wp-image-1915"/></figure></div>


<p></p>



<p>スケールウィジェットは、色や外観などを変更できるオプションがあります。</p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>スケールウィジェットを作成する方法はコチラ：<br><a href="https://tomtom-stock.com/2023/03/14/python-tkinter-scale/" data-type="post" data-id="1917">「tk.Scale」の使い方</a></p>
</div></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">スポンサーリンク</mark></p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>



<p></p>



<h2 class="wp-block-heading">その他Tkinterで使える様々なオプション機能</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="311" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png" alt="" class="wp-image-1112" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-300x91.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-768x233.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2.png 1080w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">機能を追加できるオプション一覧</h3>



<p>上記で紹介した様々なウィジェットの他にも、GUIに実装できる機能がたくさんあるので紹介していきます！</p>



<figure class="wp-block-table"><table><tbody><tr><td><a href="#progressbar"><strong>progressbar</strong></a></td><td>プログレスバーを表示させる</td></tr><tr><td><a href="#toplevel"><strong>toplevel</strong></a></td><td>新規ウィンドウを表示させる</td></tr><tr><td><a href="#focus"><strong>setfocus</strong></a></td><td>指定したウィジェットにフォーカスをあてる</td></tr><tr><td><a href="#filedialog"><strong>filedialog</strong></a></td><td>ファイルダイアログを開く</td></tr><tr><td><a href="#changebg"><strong>setPalette</strong>, <strong>bisque</strong></a></td><td>ウィンドウの色を変更する</td></tr></tbody></table></figure>



<h4 class="wp-block-heading" id="progressbar">■プログレスバーを表示させる</h4>



<p>「<span class="marker"><strong>プログレスバー」</strong></span>は、何かの処理が実行中であることを示すウィジェットです。このプログレスバーには「確定的プログレスバー」と「非確定的プログレスバー」の二種類があります。</p>



<p>「<span class="marker"><strong>確定的プログレスバー</strong></span>」は、下図の上側に示したプログレスバーのことで処理の進捗を割合で可視化してくれます。</p>



<p>「<span class="marker"><strong>非確定的プログレスバー</strong></span>」は、下図の下側に示したプログレスバーのことで処理の進捗具合に関わらずバーが移動し続けます。</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2022/02/progressbar比較.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/progressbar_compare.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>
</div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>GUIを作成する際に、プログレスバーの機能を追加するとユーザーにとっては使いやすいものになりますね。</p>
</div></div></div>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>プログレスバーの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/27/tkinter-progressbar/">「プログレスバー」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="toplevel">■新規ウィンドウを作成する</h4>



<p>Tkinterでは、作成したGUIからさらに新規でウィンドウを表示させる<span class="marker"><strong>tk.Toplevel()メソッド</strong></span>があります。</p>



<p>tk.Toplevel()をボタンのクリックイベント等に紐づけることで新規ウィンドウを表示させることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.Toplevel()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="551" height="404" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-3.png" alt="result of toplevel" class="wp-image-1384"/></figure></div>


<p>新規ウィンドウを表示させることができれば、任意の処理をさせたりグラフや画像を表示したりなどGUIの幅を広げることができます。</p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>tk.Toplevel()の詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2023/02/05/tkinter-create-newwindow/">「tk.Toplevel」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="focus">■ウィジェットにフォーカスを当てる</h4>



<p>TkinterでもGUI上に配置したウィジェットに対して<span class="marker"><strong>フォーカスを当てる</strong></span>ことができます。ここでいうフォーカスは、任意のウィジェットが選択された状態のことを指します。</p>



<p>フォーカスをセットするためには、Tkinterの<strong>focus_set()メソッド</strong>を使用します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>ウィジェット名.focus_set()</code></pre></div>



<p></p>



<p>この<strong>focus_set()メソッド</strong>を用いると矢印キーを使ってウィジェットのフォーカスを変更させることもできます。</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/poster_1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new1.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%"></div>
</div>



<p></p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>ウィジェットのフォーカスを変更させる方法はコチラ：<br><a href="https://tomtom-stock.com/2023/02/03/tkinter-setfocus/">「focus_set()メソッド」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="filedialog">■ファイルダイアログを表示させる</h4>



<p>「<span class="marker"><strong>ファイルダイアログ</strong></span>」はファイル・データを操作するために一時的に開かれるウィンドウのことです。</p>



<p>GUI上でファイルを開いたり保存したりする際には必須の機能です。</p>



<p>下記のようにダイアログを表示させることができます。</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="464" height="102" src="https://tomtom-stock.com/wp-content/uploads/2022/03/image-28.png" alt="dialog-image1" class="wp-image-624"/></figure></div>


<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="950" height="385" src="https://tomtom-stock.com/wp-content/uploads/2022/02/image-47.png" alt="dialog-image2" class="wp-image-352" srcset="https://tomtom-stock.com/wp-content/uploads/2022/02/image-47.png 950w, https://tomtom-stock.com/wp-content/uploads/2022/02/image-47-300x122.png 300w, https://tomtom-stock.com/wp-content/uploads/2022/02/image-47-768x311.png 768w, https://tomtom-stock.com/wp-content/uploads/2022/02/image-47.png 856w" sizes="(max-width: 950px) 100vw, 950px" /></figure></div>


<p></p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>ファイルダイアログの詳しい使い方はコチラ：<br><a href="https://tomtom-stock.com/2022/02/27/tkinter-filedialog/">「Filedialog」の使い方</a></p>
</div></div>



<p></p>



<h4 class="wp-block-heading" id="changebg">■ウィンドウの色を変更させる</h4>



<p>Tkinterで作成するGUIは、ウィンドウや配置するウィジェットの色を変更することができます。</p>



<p>ウィジェット自体の色を変更したい場合には、対象とするウィジェットのオプションで背景や文字色等の色（background, foreground）を指定します。</p>



<p>一方で、ウィンドウ自体の背景色を変更したい場合には専用のメソッドを使用します。色の変更方法としては下記の3パターンがあります。</p>



<div class="wp-block-jin-gb-block-box simple-box8">
<ol class="wp-block-list">
<li>configメソッド</li>



<li>tk_setPaletteメソッド</li>



<li>tk_bisqueメソッド</li>
</ol>
</div>



<p>それぞれ異なった特徴があります。<br>それぞれの一例を下記に示してみます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="514" height="299" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-33.png" alt="result of bg1" class="wp-image-1756"/><figcaption class="wp-element-caption">configメソッドで背景をオレンジに変更した結果</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="521" height="313" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-35.png" alt="result of bg2" class="wp-image-1760"/><figcaption class="wp-element-caption">tk_setPaletteメソッドで背景をオレンジに変更しか結果</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="515" height="300" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-34.png" alt="result of bg3" class="wp-image-1757"/><figcaption class="wp-element-caption">tk_bosqueメソッドで背景を変更した結果</figcaption></figure></div>


<p>それぞれ色の変更のされ方が異なっていると思います。</p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<p>ウィンドウの色の詳しい変更の仕方はコチラ：<br><a href="https://tomtom-stock.com/2023/02/20/tkinter-setpalette-bisque/">「ウィンドウの色」の変更方法</a></p>



<p>また、プログラミングで使えるカラーコード一覧はコチラ：<br><a href="https://tomtom-stock.com/2022/02/12/python-color-code/">使用可能なカラーコード一覧</a></p>
</div></div>



<p></p>



<p>以上となります。<br>最後まで見ていただきありがとうございました。</p>



<p><a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/">プログラミング学習に役立つ参考書</a>や<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" data-type="post" data-id="1411">人気のプログラミングスクール</a>もランキング形式で紹介しています。</p>



<a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/eyecatch_recombooks-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[2025年版][難易度別] Python学習にオススメな参考書：厳選9冊！</span><span class="blog-card-excerpt">Pythonを勉強する初心者から中級者を対象として、2023年現在で本当に良いと感じた厳選9冊を紹介しています。Pythonの基礎を学べる書籍から、GUI、アプリ作成、機械学習などを学べる書籍まで幅広く紹介しています！レビューも書き込んでいます！...</span></div></div></a>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/03/06/python_tkinter-methods/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/progressbar_compare.mp4" length="266677" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new1.mp4" length="355404" type="video/mp4" />

			</item>
		<item>
		<title>[Python/Tkinter]ウィンドウの背景色を変更する方法を3つ紹介！[tk_setPalette, tk_bisque, colorchooser]</title>
		<link>https://tomtom-stock.com/2023/02/20/tkinter-setpalette-bisque/</link>
					<comments>https://tomtom-stock.com/2023/02/20/tkinter-setpalette-bisque/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Mon, 20 Feb 2023 12:45:36 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1746</guid>

					<description><![CDATA[本記事では、tkinterで作成したウィンドウの背景を指定・変更する方法を3パターン紹介していきます！ ウェブアプリやサイトを設計する上で、背景色はとても大切ですよね。 今回は、数ある背景色変更方法について下記の3パター]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-media-text alignwide is-stacked-on-mobile" style="grid-template-columns:30% auto"><figure class="wp-block-media-text__media"><img decoding="async" width="344" height="400" src="https://tomtom-stock.com/wp-content/uploads/2023/02/kouyou_cat-1.png" alt="" class="wp-image-1709 size-full"/></figure><div class="wp-block-media-text__content">
<p>本記事では、tkinterで作成したウィンドウの背景を指定・変更する方法を3パターン紹介していきます！</p>
</div></div>



<p></p>



<p>ウェブアプリやサイトを設計する上で、背景色はとても大切ですよね。</p>



<p>今回は、数ある背景色変更方法について下記の3パターンを紹介していきたいと思います！</p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-star jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-star jin-icons"></i></div><div class="jin-iconbox-main">
<ul class="wp-block-list">
<li><a href="#config">configメソッド</a><br>rootメインウィンドの背景色のみを変更したい場合</li>



<li><a href="#palette">tk_setPaletteメソッド</a><br>ウィンドウに配置されているウィジェットもまとめて色を変更したい場合<br>(ウィジェットが複数ある場合に有効)</li>



<li><a href="#bisque">tk_bisqueメソッド</a><br>ビスク色（クリーム色）にウィンドウ全体を変更したい場合</li>
</ul>
</div></div>



<p></p>



<p>それぞれ異なる使い方になりますので是非参考にしていただければと思います！</p>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li><span class="marker"><strong>転職のためのスキルアップ</strong></span>として効率的に学びたい</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>副業</strong></mark>としてプログラミングができるようになりたい</li>



<li><span class="marker"><strong>独学での勉強に</strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>限界</strong></mark><strong>を感じている</strong></span></li>
</ul>
</div>



<p>これらに該当する方は<span class="marker"><strong>プログラミングスクール</strong></span>という選択肢があります。<br>是非参考にしてみてください。</p>



<p></p>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>
</div>



<div class="wp-block-jin-gb-block-icon-box jin-icon-heart jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-heart jin-icons"></i></div><div class="jin-iconbox-main">
<p>本ページを<strong>ブックマーク</strong>するといつでも確認できます。</p>
</div></div>



<p></p>



<h2 class="wp-block-heading" id="config">config()メソッド</h2>



<h3 class="wp-block-heading">config()メソッドの使い方</h3>



<p>まずは<span class="marker"><strong>config()メソッド</strong></span>について紹介します。<br>config()メソッドは下記のように使用します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.config(bg=&quot;color code&quot;)</code></pre></div>



<p class="has-text-align-center"><a href="https://tomtom-stock.com/2022/02/12/python-color-code/">color codeの一覧はコチラ</a></p>



<p></p>



<h3 class="wp-block-heading">config()メソッドを使ってみる</h3>



<p>実際に使用したプログラムは下記のようになります！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

root=tk.Tk()
root.geometry(&quot;400x200&quot;)
root.title(&quot;Python&quot;)

#ラベル作成
label1 = tk.Label(root,text=&quot;setPalette&quot;)
label1.pack()
#エントリーボックス作成
entry1 = tk.Entry(root)
entry1.pack()
#ボタン作成
button1 = tk.Button(root,text=&quot;ボタン1&quot;)
button1.pack()
#背景色を指定
root.configure(bg=&quot;orange&quot;)
root.mainloop()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="514" height="299" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-33.png" alt="config1" class="wp-image-1756"/></figure></div>


<p>背景の色がこのように変わります！</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ただし、setPalette()メソッドではボタンやラベルなどその他のウィジェットの色は変わらないみたいですね。</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading" id="palette">tk_setPaletteメソッド</h2>



<h3 class="wp-block-heading">tk_setPaletteの使い方</h3>



<p><span class="marker"><strong>tk_setPalette()メソッド</strong></span>も<span class="marker"><strong>config()メソッド</strong></span>と同様に、ウィンドウの背景色を変更できます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.tk_setPalette(background=&quot;color code&quot;, **kw)</code></pre></div>



<p class="has-text-align-center"><a href="https://tomtom-stock.com/2022/02/12/python-color-code/">color codeの一覧はコチラ</a></p>



<p>ここで、第二引数である<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>**kw</strong></mark>は任意のオプションを指定することで様々な機能を持たせることができます。</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size">スポンサーリンク</p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-small-font-size"></p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4299021029" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/51MZ06bBAjL._SL160_.jpg" alt="" style="border: none;"><br>Excel、データ整理&amp;分析、画像処理の自動化ワザを完全網羅! 超速Python仕事術大全</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" width="1" height="1" style="border: none;">
</div></div>
</div>
</div>



<h3 class="wp-block-heading">tk_setPalette()を使ってみる</h3>



<h4 class="wp-block-heading">option無し</h4>



<p>まずは、オプション指定無しで<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>backgroundのみ</strong></mark>指定してみます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

root=tk.Tk()
root.geometry(&quot;400x200&quot;)
root.title(&quot;Python&quot;)
#ラベル作成
label1 = tk.Label(root,text=&quot;setPalette&quot;)
label1.pack()
#エントリーボックス作成
entry1 = tk.Entry(root)
entry1.pack()
#ボタン作成
button1 = tk.Button(root,text=&quot;ボタン1&quot;)
button1.pack()
#背景色を変更
root.tk_setPalette(background=&quot;orange&quot;)
root.mainloop()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="523" height="310" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-27.png" alt="setpalette1" class="wp-image-1750"/></figure></div>


<p>先ほど紹介した<strong>config()メソッド</strong>とは異なって<span class="marker"><strong>ウィジェット全体の色を変更</strong></span>することができました。いちいち全てのウィジェットの色を指定する必要がなくなります。</p>



<div class="wp-block-jin-gb-block-icon-box jin-icon-checkcircle jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-checkcircle jin-icons"></i></div><div class="jin-iconbox-main">
<p><strong>ウィンドウ内に複数のウィジェットが存在する場合には非常に有効なメソッドです！</strong></p>
</div></div>



<p>また、ウィジェットのオプションとして色を設定すると<span class="marker"><strong>背景色を上書きできる</strong></span>みたいです。実際にEntryboxの背景を上書きしてみます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#エントリーボックス作成
entry1 = tk.Entry(root,bg=&quot;lightgreen&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="521" height="313" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-35.png" alt="" class="wp-image-1760"/></figure></div>


<p></p>



<h4 class="wp-block-heading">foregroundオプション</h4>



<p><strong>foregroundオプション</strong>は、<span class="marker"><strong>ウィンドウ内の文字の色</strong></span>を変更させることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.tk_setPalette(background=&quot;orange&quot;,foreground=&quot;blue&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="512" height="299" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-30.png" alt="setpalette foreground" class="wp-image-1753"/></figure></div>


<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>文字も先ほどと同様に色を上書きすることができます！</p>
</div></div></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#ラベル作成
label1 = tk.Label(root,text=&quot;setPalette&quot;, fg=&quot;red&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="519" height="305" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-36.png" alt="setpalette foreground2" class="wp-image-1761"/></figure></div>


<h4 class="wp-block-heading">activebackgroundオプション</h4>



<p><strong>activebackgroundオプション</strong>は、ウィンドウ内のウィジェットが<span class="marker"><strong>アクティブになった際の</strong></span><span class="marker"><strong>背景色</strong></span>を指定することができます。実際に使ってみると以下のようになりました。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.tk_setPalette(background=&quot;orange&quot;,activebackground=&quot;yellow&quot;)</code></pre></div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="517" height="305" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-28.png" alt="setpalette activebackground" class="wp-image-1751"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" width="516" height="301" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-29.png" alt="setpalette activebackground2" class="wp-image-1752"/></figure>
</div>
</div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">アイコン名を入力</span><div class="balloon-serif"><div class="balloon-content">
<p>ただしEntryボックスは、アクティブにしても色は変わらなかったです。</p>
</div></div></div>



<p></p>



<h4 class="wp-block-heading">activeforegroundオプション</h4>



<p><strong>activeforegroundオプション</strong>は、ウィンドウ内のウィジェットが<span class="marker"><strong>アクティブになった際のテキストの色</strong></span>を指定できます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.tk_setPalette(background=&quot;orange&quot;,activeforeground=&quot;blue&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="527" height="306" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-31.png" alt="setpalette activeforeground3" class="wp-image-1754"/></figure></div>


<p></p>



<h4 class="wp-block-heading">insertbackgroundオプション</h4>



<p>Entryboxなどのテキスト入力可能なウィジェット<span class="marker"><strong>がアクティブになった際の「I」の色</strong></span>を変えることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>root.tk_setPalette(background=&quot;orange&quot;,insertbackground=&quot;red&quot;)</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="512" height="297" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-32.png" alt="setpalette insertbackground" class="wp-image-1755"/></figure></div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4798071552" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/51VLEXd0y3L._SL160_.jpg" alt="" style="border: none;"><br>現場ですぐに使える！ 最新Pythonプログラミング逆引き大全450の極意</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4296205501" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/51fxoUcD30L._SL160_.jpg" alt="" style="border: none;"><br>ChatGPTとPythonで知識ゼロ！ 自動化アプリ作成</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392"
     crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4709394586832392"
     data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392"
     crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4709394586832392"
     data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>



<h2 class="wp-block-heading">colorchooserで背景色を変更する</h2>



<p>続いて、下図に示すような視覚的に分かりやすく色を選択できる<span class="marker"><strong>colorchooser</strong></span>を用いて色を変更する方法を紹介します。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" width="649" height="458" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-59.png" alt="result of colorchooser" class="wp-image-2167" style="width:383px;height:auto"/></figure></div>


<p>このcolorchooserを使用するには、<span class="marker"><strong>colorchooserメソッド</strong></span>を使用します。そのため使用する際には、colorchooserメソッドを<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>import</strong></mark>する必要があります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>import tkinter
from tkinter import colorchooser</code></pre></div>



<p>では実際に<span class="marker"><strong>colorchooser</strong></span>を使用してボタンの背景色を変更するコードを紹介していきます！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter
from tkinter import colorchooser

#colorchooserを使用したclass
class ColorSelectButton(tkinter.Button):
    def __init__(self, master):
        super().__init__(master=master,
                                 text=&quot;色を設定&quot;,
                                 command=self.color_change,
                                 )

    def color_change(self):
        color = colorchooser.askcolor() #colorchooserを表示
        self.config(bg=color<img decoding="async" class="ranking-number" src="https://tomtom-stock.com/wp-content/themes/jin/img/rank01.png" />)        #選択した色に背景を変更

if __name__ == &quot;__main__&quot;:
    root = tkinter.Tk()
    root.geometry(&quot;200x50&quot;)
    #ボタンの表示
    b = ColorSelectButton(master=root)
    b.pack()

    root.mainloop()</code></pre></div>



<p>実行結果は下記のようになります！<br>ここで、変更したい色を選択して「<strong>OK</strong>」のボタンをクリックするとGUI上のボタンの背景色が変更されます。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" width="857" height="535" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-60.png" alt="result of colorchooser2" class="wp-image-2168" style="width:385px;height:auto" srcset="https://tomtom-stock.com/wp-content/uploads/2023/02/image-60.png 857w, https://tomtom-stock.com/wp-content/uploads/2023/02/image-60-300x187.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/02/image-60-768x479.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/02/image-60.png 856w" sizes="(max-width: 857px) 100vw, 857px" /></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" width="291" height="136" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-61.png" alt="result of colorchooser2" class="wp-image-2169" style="width:215px;height:auto"/></figure></div>


<p>ここで、プログラム上でのcolorchooserで選択した色のデータは<span class="marker"><strong>要素数2の配列データ</strong></span>として格納されます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>    def color_change(self):
        color = colorchooser.askcolor() #colorchooserを表示
        self.config(bg=color<img decoding="async" class="ranking-number" src="https://tomtom-stock.com/wp-content/themes/jin/img/rank01.png" />)        #選択した色に背景を変更</code></pre></div>



<p>そして要素の一つ目は、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>R</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color"><strong>G</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color"><strong>B</strong></mark>カラーコードを示し二つ目の要素が<strong>16進数</strong>によるカラーコードを示しています。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="501" height="49" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-62.png" alt="result data of colorchooser array" class="wp-image-2170"/></figure></div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08DCQ6FVP" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/51tiXKMwPqL._SL160_.jpg" alt="" style="border: none;"><br>めんどうな作業が秒速で終わる！ Excel×Python自動化の超基本</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4295006254" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/51N4m15ttIL._SL160_.jpg" alt="" style="border: none;"><br>できる 仕事がはかどるPython自動処理 全部入り。 (「できる全部入り。」シリーズ)</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>
</div>



<h2 class="wp-block-heading" id="bisque">余談：tk_bisque()メソッド</h2>



<p>最後に余談にはなりますが、<span class="marker"><strong>setPalette()メソッド</strong></span>の他にも<span class="marker"><strong>bisque()メソッド</strong></span>というものがあります。</p>



<p>この<span class="marker"><strong>bisque()メソッド</strong></span>はウィンドウ全体の色をクリーム色に指定することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

root=tk.Tk()
root.geometry(&quot;400x200&quot;)
root.title(&quot;Python&quot;)

#ラベル作成
label1 = tk.Label(root,text=&quot;setPalette&quot;)
label1.pack()
#エントリーボックス作成
entry1 = tk.Entry(root)
entry1.pack()
#ボタン作成
button1 = tk.Button(root,text=&quot;ボタン1&quot;)
button1.pack()
#背景色を指定
root.tk_bisque()
root.mainloop()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="515" height="300" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-34.png" alt="bisque" class="wp-image-1757"/></figure></div>


<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>bisque()メソッドの色は、とても目に優しい色なので個人的にはお気に入りのメソッドです！</p>
</div></div></div>



<p></p>



<p>以上となります！<br>最後まで見ていただきありがとうございました。</p>



<p><a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/" data-type="post" data-id="655">Python学習に役立つ書籍</a>も紹介していますので是非参考にしてみてください！</p>



<a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/eyecatch_recombooks-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[2025年版][難易度別] Python学習にオススメな参考書：厳選9冊！</span><span class="blog-card-excerpt">Pythonを勉強する初心者から中級者を対象として、2023年現在で本当に良いと感じた厳選9冊を紹介しています。Pythonの基礎を学べる書籍から、GUI、アプリ作成、機械学習などを学べる書籍まで幅広く紹介しています！レビューも書き込んでいます！...</span></div></div></a>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/20/tkinter-setpalette-bisque/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>[Tkinter] Spinboxの使い方を徹底解説！</title>
		<link>https://tomtom-stock.com/2023/02/12/tkinter-spinbox/</link>
					<comments>https://tomtom-stock.com/2023/02/12/tkinter-spinbox/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Sun, 12 Feb 2023 05:10:37 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1495</guid>

					<description><![CDATA[Spinboxは、自分で指定した選択肢をウィジェット上に表示させることができ▲▼ボタンで選択肢リストから任意の選択肢を選択することができます！ 今回はGUIやWebアプリケーションを作成する際に、非常に使い勝手の良いウィ]]></description>
										<content:encoded><![CDATA[
<p>Spinboxは、自分で指定した選択肢をウィジェット上に表示させることができ▲▼ボタンで<span class="marker"><strong>選択肢リストから任意の選択肢を選択することができます</strong></span>！</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>



<p>今回は<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>GUI</strong></mark>や<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>Webアプリケーション</strong></mark>を作成する際に、非常に使い勝手の良いウィジェットである Spinbox ウィジェットの使い方を紹介していこうと思います！</p>



<p>Spinboxのレイアウトを変更できる<span class="marker"><strong>様々なオプション</strong></span>についても解説していこうと考えていますので是非参考にしてみてください！</p>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li><span class="marker"><strong>転職のためのスキルアップ</strong></span>として効率的に学びたい</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>副業</strong></mark>としてプログラミングができるようになりたい</li>



<li><span class="marker"><strong>独学での勉強に</strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>限界</strong></mark><strong>を感じている</strong></span></li>
</ul>
</div>



<p>これらに該当する方は<span class="marker"><strong>プログラミングスクール</strong></span>がスキルアップの近道です！<br>是非参考にしてみてください。</p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p></p>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>学生</strong></mark>や<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>30代の方</strong></mark>にも<span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>



<p></p>
</div>



<p></p>



<h2 class="wp-block-heading">Spinboxで数値を選択させる</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="373" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png" alt="" class="wp-image-1101" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-300x109.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-768x280.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat.png 1048w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading" id="op-1">使用するオプション</h3>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>今回使用するオプションは以下の通りになっています！</p>
</div></div></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<h4 class="wp-block-heading">■ formatオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>format = &#39;%m.nf&#39;  </code></pre></div>



<p>数値の表示形式を<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>%m.nf</strong></mark>で指定。<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>m</strong></mark>で<span class="marker"><strong>整数の桁数</strong></span>、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>n</strong></mark>で<span class="marker"><strong>小数点以下の桁数</strong></span>を指定します。<br>&#8216;%2.0f&#8217; の場合は、二桁の整数を指定しています。&#8217;%2.1f&#8217; の場合は二桁の整数と小数点以下一桁を指定しています。</p>



<p></p>



<h4 class="wp-block-heading">■ fromオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>from_= 0   #下限値</code></pre></div>



<p>&#8216;0&#8217; を指定した場合には、Spinboxで選択できる値の<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>下限値</strong></mark>が &#8216;0&#8217; となります。</p>



<p></p>



<h4 class="wp-block-heading">■ incrementオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>increment = 1   #ボタンクリック時の変化量を指定</code></pre></div>



<p>&#8216;1&#8217; を指定した場合には、Spinboxの▲▼ボタンをクリックした際に<span class="marker"><strong>±1.0 増減する</strong></span>ようになります。<br>&#8216;0.1&#8217; 等を指定すると<span class="marker"><strong>小数点以下でも増減させられます</strong></span>。</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<h4 class="wp-block-heading">■ textvariableオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>textvariable = 変数</code></pre></div>



<p><span class="marker"><strong>Spinboxに表示させるテキストの書式設定</strong></span>。今回は、ttk.spinbox() メソッド前に値の型と初期値を指定します。</p>



<p></p>



<h4 class="wp-block-heading">■ toオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>to = 10   #上限値</code></pre></div>



<p>from_で指定した値から<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>どの値（上限値）</strong></mark>までSpinboxで選択できるようにするかを指定できます。</p>



<p></p>



<h4 class="wp-block-heading">■ commandオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>command = 関数名</code></pre></div>



<p>Spinboxの▲▼ボタンがクリックされたときに呼び出される関数を指定。</p>



<p></p>
</div>
</div>



<p></p>



<h3 class="wp-block-heading">その他使用できるオプション</h3>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>その他使用できる代表的なオプションを紹介していきます！</p>
</div></div></div>



<p></p>



<p>様々な色の<a href="https://tomtom-stock.com/2022/02/12/python-color-code/">カラーコードを知りたい方はコチラ</a>を参考にしてください！</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">■ cursorオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#代表的なものをいくつか紹介
cursor = ”arrow”  #通常
cursor = &quot;dot&quot;      #点
cursor = &quot;target&quot;  #目のアイコン
cursor = &quot;star&quot;     #☆のアイコン
cursor = &quot;hand1&quot;  #手のアイコン
cursor = &quot;hand2&quot;  #手のアイコン</code></pre></div>



<p>マウスON時の<span class="marker"><strong>カーソルのアイコンを変更できます</strong></span>。</p>



<p></p>



<h4 class="wp-block-heading">■ stateオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code># 書き込み不可にする
state = &quot;readonly&quot; 
# ▲▼ボタンも使用不可にする
state = &quot;disabled&quot;</code></pre></div>



<p>&#8216;<strong>state</strong>&#8216; を指定すると、Spinboxをクリックして直接値を書き込むことが<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>不可能</strong></mark>になります。<br>（readonlyであれば<strong>▲▼ボタンによる値の変更は可能</strong>）</p>



<p></p>



<h4 class="wp-block-heading">■ backgroundオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>bg = &quot;orange&quot;</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="321" height="188" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox3.png" alt="spinbox3" class="wp-image-1507"/></figure></div>


<p>背景色を変更できます！</p>



<p></p>



<h4 class="wp-block-heading">■ fontオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#太字
font=(&quot;&quot;, 10, &quot;bold&quot;)
#下線
font=(&quot;&quot;, 10, &quot;underline&quot;)
#フォントサイズ変更
font=(&quot;&quot;, 15, &quot;underline&quot;)</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="303" height="188" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox6.png" alt="spinbox font" class="wp-image-1511"/><figcaption class="wp-element-caption">太字にした結果</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="312" height="187" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox7.png" alt="spinbox underline" class="wp-image-1512"/><figcaption class="wp-element-caption">下線を引いた結果</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="327" height="187" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox8.png" alt="spinbox fontsize" class="wp-image-1513"/><figcaption class="wp-element-caption">フォントサイズ変更</figcaption></figure></div>


<p></p>



<h4 class="wp-block-heading">■ selectオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>selectbackground = &quot;orange&quot;
seleckforeground = &quot;orange&quot;</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="325" height="182" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox10.png" alt="spinbox select background" class="wp-image-1515"/><figcaption class="wp-element-caption">selectbackground</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="322" height="185" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox11.png" alt="spinbox select2" class="wp-image-1516"/><figcaption class="wp-element-caption">selectforeground</figcaption></figure></div>


<p>背景色を選択する際のデフォルトは青色みたいです！</p>



<p></p>



<h4 class="wp-block-heading">■ justifyオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>justify = tk.LEFT
justify = tk.CENTER
justify = tk.RIGHT</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="292" height="242" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox15.png" alt="spinbox justify" class="wp-image-1520"/></figure></div>


<p></p>



<h4 class="wp-block-heading">■ wrapオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>#選択肢をループさせる
wrap = True
#選択肢をループさせない
wrap = False</code></pre></div>



<p>選択値が下限値に達した際に<span class="marker"><strong>上限値に戻る</strong></span>、あるいは上限値に達した際に<span class="marker"><strong>下限値に戻る</strong></span>機能を追加するかを指定できます。</p>



<p></p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">■ takefocusオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>takefocus = False   #無効
takefocus = True    #有効</code></pre></div>



<p><span class="marker"><strong>Tabキーによるフォーカス移動機能を有効にするか無効にするか指定できる</strong></span>オプションです。</p>



<p></p>



<h4 class="wp-block-heading">■ borderwidthオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>borderwidth=10</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="323" height="180" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox2.png" alt="spinbox2" class="wp-image-1506"/></figure></div>


<p>枠線の幅を指定できます。</p>



<p></p>



<h4 class="wp-block-heading">■ foregroundオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>fg = &quot;orange&quot;</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="311" height="187" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox4.png" alt="" class="wp-image-1509"/><figcaption class="wp-element-caption">文字色を変更させることができます。</figcaption></figure></div>


<p></p>



<h4 class="wp-block-heading">■ buttonbackgroundオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>buttonbackground = &quot;orange&quot;</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="330" height="191" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox5.png" alt="" class="wp-image-1510"/></figure></div>


<p>▲▼ボタンの背景色を変更できます！</p>



<p></p>



<h4 class="wp-block-heading">■ reliefオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>relief = tk.FLAT
relief = tk.SUNKEN
relief = tk.RIDGE
relief = tk.GROOVE
relief = tk.RAISED
relief = tk.SOLID</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="347" height="412" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox9.png" alt="spinbox relief" class="wp-image-1514"/><figcaption class="wp-element-caption">枠線を変更可能</figcaption></figure></div>


<p></p>



<h4 class="wp-block-heading">■ disabledオプション</h4>



<p><span class="marker"><strong>Stateオプション</strong></span>で&#8221;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>disabled</strong></mark>&#8220;を指定している場合に有効なオプション。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>disabledbackground = &quot;orange&quot;
disabledforeground = &quot;orange&quot;</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="305" height="182" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox12.png" alt="spinbox disabled1" class="wp-image-1517"/><figcaption class="wp-element-caption">disabledbackground</figcaption></figure></div>

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="301" height="185" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox13.png" alt="spinbox disabled2" class="wp-image-1518"/><figcaption class="wp-element-caption">disabledforeground</figcaption></figure></div>


<h4 class="wp-block-heading">■ readonlyオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>readonlybackground = &quot;orange&quot;</code></pre></div>



<figure class="wp-block-image size-full"><img decoding="async" width="317" height="195" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox14.png" alt="spinbox readonly" class="wp-image-1519"/></figure>



<p>文字色の変更はできませんでした。。。</p>



<p></p>
</div>
</div>



<h3 class="wp-block-heading">選択内容を取得する方法</h3>



<p>Spinboxで指定した値を取得すためには、<span class="marker"><strong>.get() メソッド</strong></span>を使用します。<br>具体的には、textvariableで指定した変数の値に対して使用することで取得できます。</p>



<p>詳しい使い方は<a href="#a-1">実例</a>を参考にしてください！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>textvariable.get()</code></pre></div>



<p></p>



<h3 class="wp-block-heading" id="a-1">整数値を選択させる方法</h3>



<p>整数値を選択できるSpinboxを作成してみます！</p>



<p>今回は、初期値を <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>5</strong></mark> として、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>0～10</strong></mark>の値を <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>1</strong></mark> 刻みで変更可能なSpinboxを作成してみます！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def select_val(val):
    # spinboxの現在地を取得
    now_value = val.get()
    print(now_value)

def gen_spinbox(root):
    # ラベルを配置
    label = tk.Label(root, text=&#39;数値を選択してください&#39;)
    label.pack()
    # スピンボックスを作成
    val = tk.IntVar()
    val.set(&#39;5&#39;)         #初期値を指定
    spinbox = tk.Spinbox(
        root,
        format=&#39;%2.0f&#39;,  #数値の桁数を指定 
        textvariable=val,
        from_=0,         #下限値を指定
        to=10,           #上限値を指定
        increment=1,     #変化量を指定
        command=lambda: select_val(val))  #クリック時に実行される関数を指定
    spinbox.pack()

if __name__ == &#39;__main__&#39;:
    root = tk.Tk()
    root.geometry(&#39;200x100&#39;)
    root.title(&#39;Spinbox&#39;)
    gen_spinbox(root)
    root.mainloop()
</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="281" height="200" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie1.png" alt="result of spinbox1" class="wp-image-1497"/></figure></div>


<p></p>



<p>このように数値を変化させることのできるSpinboxを無事作成できました！！！</p>



<p></p>



<h3 class="wp-block-heading">小数を選択させる方法</h3>



<p>先ほどは整数の値を変化させていましたが<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>、小数点以下の値を変化させる</strong></mark>方法を解説していきます。先ほどの<span class="marker"><strong>gen_spinbox 関数</strong></span>を以下のように書き換えてください。</p>



<p>（書き換えた部分にのみコメント追加↓）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>def gen_spinbox(root):
    label = tk.Label(root, text=&#39;数値を選択してください&#39;)
    label.pack()

    val = tk.StringVar()    #StringVarに変更
    val.set(&#39;5.0&#39;)              #小数点以下も表示させておく
    spinbox = tk.Spinbox(
        root,
        format=&#39;%2.1f&#39;,     #数値の桁数を指定 
        textvariable=val,
        from_=0,  
        to=10,
        increment=0.1,     #変化量を指定
        command=lambda: select_val(val))
    spinbox.pack()</code></pre></div>



<p>(実行結果)</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movieimage.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie2.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ちなみに increment の値を0.5とすると、0.5刻みでSpinboxの値が変化します！</p>
</div></div></div>



<p></p>



<p><span class="marker"><strong>.get() メソッド</strong></span>で値を取得する際に、浮動小数点値を取得したい場合には変数を <span class="marker"><strong>StringVar() </strong></span>として文字列として指定してあげる必要があるみたいです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code># 小数点を取得したい場合
val = tk.StringVar()
# 整数を取得したい場合
val = tk.IntVar()</code></pre></div>



<p></p>



<h2 class="wp-block-heading">Spinboxで任意の文字列を選択させる</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="383" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png" alt="" class="wp-image-1100" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-300x112.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-768x287.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat.png 1082w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">使用するオプション</h3>



<p>今回初めて使用するオプションを紹介していきます。<br><a href="#op-1">既に紹介しているオプションに関してはコチラ</a>を参考にしてみてください。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading">■ valuesオプション</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>select_list = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, ...]
values = select_list</code></pre></div>
</div>
</div>



<p><span class="marker"><strong>valuesオプション</strong></span>には、<span class="marker"><strong>選択したい任意の選択肢をリストとして渡してあげる</strong></span>ことでSpinboxに表示させることができます！</p>



<p>今回の実例では国名を選択させる例を挙げているので、<span class="marker"><strong>textvariableの型を tk.StringVar()</strong></span> としていますが、例えば任意の数値を扱いたい場合であれば <span class="marker"><strong>tk.IntVar() </strong></span>を用いると良いです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>    # スピンボックスを作成
    val = tk.IntVar()      #任意の数値を選択する場合はIntVar()とする
    value_list = [&#39;5&#39;, &#39;10&#39;, &#39;20&#39;]    #選択肢を指定
    val.set(&#39;5&#39;)              #初期値を指定
    spinbox = tk.Spinbox(
        root,
        textvariable=val,
        values=value_list)</code></pre></div>



<p></p>



<h3 class="wp-block-heading">任意の選択肢を選択させる方法</h3>



<p>任意の選択肢を選択させる例を挙げてみます。<br>今回は、<strong>国名を選択できるようなSpinboxを作成してみます</strong>。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def select_val(val):
    # spinboxの現在地を取得
    now_value = val.get()
    print(now_value)

def gen_spinbox(root):
    # ラベルを配置
    label = tk.Label(root, text=&#39;数値を選択してください&#39;)
    label.pack()
    # スピンボックスを作成
    val = tk.StringVar()
    countries = [&#39;Japan&#39;, &#39;America&#39;, &#39;Australia&#39;]    #選択肢を指定
    val.set(&#39;Japan&#39;)         #初期値を指定
    spinbox = tk.Spinbox(
        root,
        textvariable=val,
        values=countries,
        command=lambda: select_val(val))  #クリック時に実行される関数を指定
    spinbox.pack()

if __name__ == &#39;__main__&#39;:
    root = tk.Tk()
    root.geometry(&#39;200x100&#39;)
    root.title(&#39;Spinbox&#39;)
    gen_spinbox(root)
    root.mainloop()</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="356" height="198" src="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_country.png" alt="result of countries" class="wp-image-1502"/></figure></div>


<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>このように<span class="marker"><strong>任意の選択肢を指定できるSpinboxが作成できました</strong></span>！</p>
</div></div></div>



<p></p>



<p></p>



<p>以上となります。<br><strong>最後まで見ていただきありがとうございました！</strong></p>



<p>他にも記事を書いていますので是非参考にしてみてください！</p>



<a href="https://tomtom-stock.com/2023/02/03/tkinter-setfocus/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/eyecatch10-320x180.png" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[Tkinter] 矢印キーでウィジェットの選択（フォーカス）を変更/移動させる方法！</span><span class="blog-card-excerpt">tkinterで作成したGUI上のボタンやテキストボックスに、矢印キーを使ってカーソルを合わせる方法（フォーカスする方法）を分かりやすく解説しています。また、クリックでフォーカスする方法も解説しています。.focus_set(), .bind()...</span></div></div></a>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/12/tkinter-spinbox/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie.mp4" length="298412" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/spinbox_movie2.mp4" length="423630" type="video/mp4" />

			</item>
		<item>
		<title>[Tkinter] OptionMenuを使って選択肢を表示/取得できるボタンを作成する方法！</title>
		<link>https://tomtom-stock.com/2023/02/06/tkinter-optionmenu/</link>
					<comments>https://tomtom-stock.com/2023/02/06/tkinter-optionmenu/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Mon, 06 Feb 2023 08:21:07 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1390</guid>

					<description><![CDATA[Tkinterでは、リストボックス以外にも下図のように選択肢を一覧として表示させるOptionMenuというメソッドがあります。 今回はこのウィジェットの作成方法を解説していきたいと思います！ OptionMenuメソッ]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>Tkinterでは、リストボックス以外にも下図のように選択肢を一覧として表示させる<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>OptionMenu</strong></mark>というメソッドがあります。</p>



<p>今回はこのウィジェットの作成方法を解説していきたいと思います！</p>



<p></p>



<figure class="wp-block-video aligncenter"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/image-6.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/option_button1.mp4" playsinline></video></figure>



<p></p>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li><span class="marker"><strong>転職のためのスキルアップ</strong></span>として効率的に学びたい</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>副業</strong></mark>としてプログラミングができるようになりたい</li>



<li><span class="marker"><strong>独学での勉強に</strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>限界</strong></mark><strong>を感じている</strong></span></li>
</ul>
</div>



<p>これらに該当する方は<span class="marker"><strong>プログラミングスクール</strong></span>がスキルアップの近道です！<br>是非参考にしてみてください。</p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>学生</strong></mark>や<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>30代の方</strong></mark>にも<span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>
</div>



<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392"
     crossorigin="anonymous"></script>
<!-- ディスプレイ　レスポンシブ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4709394586832392"
     data-ad-slot="5973725251"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">OptionMenuメソッドの使い方</h2>



<p>まずは、<span class="marker"><strong>OptionMenuメソッド</strong></span>の使い方についてです。下記のように引数を指定してあげることでOptionMenuウィジェットを作成することができます。</p>



<p>間違いがあったらすみません。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>tk.OptionMenu(master, variable, *values, **kwargs)</code></pre></div>



<p></p>



<p>☆ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color"><strong>master</strong></mark>: <strong>OptionMenu</strong>を配置したいウィジェット名を指定</p>



<p id="data-type"><br>☆ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color"><strong>variable</strong></mark>: 変数の型を指定。<br>　　<strong>StringVar()</strong>：文字列<br>　　<strong>IntVar()</strong>：整数<br>　　<strong>DoubleVar()</strong>：浮動小数点<br>　　<strong>BooleanVar()</strong>：ブール値（True：1、False：0）</p>



<p><br>☆ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color"><strong>values</strong></mark>: 選択肢リストを渡す。</p>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>具体的な使い方は次の項で説明してきます！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading">OptionMenuを使用したプログラム</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="383" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png" alt="" class="wp-image-1100" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-300x112.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-768x287.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat.png 1082w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>では、実際にO<span class="marker"><strong>ptionMenu() メソッド</strong></span>を使ってみましょう。</p>



<p>今回は通勤手段を選択できるようなボタンを作成してみます！</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def display_selected(choice):
    choice = variable.get()
    print(choice)

root = tk.Tk()
root.geometry(&quot;200x100&quot;)

# 選択肢リストを作成
way_list = [&#39;公共交通機関&#39;,&#39;自家用車&#39;, &#39;バイク&#39;,&#39;徒歩&#39;]
# 選択肢リストの型を指定
variable = tk.StringVar()
variable.set(way_list)
# OptionMenu作成
option_button = tk.OptionMenu(
    root,
    variable,
    *way_list,
    command=display_selected
)
# ウィジェット配置
option_button.pack()
root.mainloop()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="430" height="183" src="https://tomtom-stock.com/wp-content/uploads/2023/03/image-2.png" alt="" class="wp-image-1895"/></figure></div>


<p>ここで、このままだと<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>選択肢すべてがオプションボタンに表示されてしまっている</strong></mark>と思います。表示する選択肢を1つに絞りたい場合には、variable.set()で指定します。</p>



<p>「<strong>variable.set(way_list)</strong>」の部分を「<span class="marker"><strong>variable.set(way_list<img decoding="async" class="ranking-number" src="https://tomtom-stock.com/wp-content/themes/jin/img/rank03.png" />)</strong></span>」に変更してみてください。</p>



<p><br>すると下記のように表示されると思います。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="536" height="311" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-6.png" alt="option menu result" class="wp-image-1391"/></figure></div>


<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>OptionMenuボタンを作成することができました。<br>ここで選んだ選択肢はコンソール画面にも表示されていると思います！</p>
</div></div></div>



<p></p>



<p>ここでは、まず <strong>way_list[]</strong> に選択肢として表示させたいものを格納します。その後、その格納した変数の型に合うものを <strong>variable </strong>に指定しています。</p>



<p><strong>variable.set()</strong>でオプションメニューボタンに初期値として表示させておきたい選択肢を指定しています。<br>今回は<strong>way_list<img decoding="async" class="ranking-number" src="https://tomtom-stock.com/wp-content/themes/jin/img/rank03.png" /></strong>としているので初期値として徒歩が表示されるプログラムになっています。</p>



<p>今回はリストのデータが文字列のため <strong>tk.StringVar() </strong>を指定しています。</p>



<p>リスト内のデータを整数型や浮動小数点型などにしたい場合は適宜、<a href="http://data-type">先ほど示したデータ型</a>に変更してあげる必要があります。</p>



<p>また、<strong>OptionMenu() </strong>の引数として<span class="marker"><strong>command</strong></span>を指定してあげることで選択肢が選択された際に関数が実行されるようにしています。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0C3GTGZ5V" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/41nx6xUqlFL._SL160_.jpg" alt="" style="border: none;"><br>Pythonプログラミングの2歩目でGUIアプリ制作をやるならTkinter</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<a href="//af.moshimo.com/af/c/click?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0DDNHF25B" rel="nofollow" referrerpolicy="no-referrer-when-downgrade"><img decoding="async" src="https://images-fe.ssl-images-amazon.com/images/I/5174bMicG5L._SL160_.jpg" alt="" style="border: none;"><br>仕事がはかどるPython&amp;Excel自動処理 全部入り 改訂2版（できる全部入り） 全部入り。シリーズ</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3290641&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" alt="" loading="lazy" width="1" height="1" style="border: none;">
</div>
</div>



<h2 class="wp-block-heading">選択した内容を取得する方法</h2>



<p>上述したプログラムでは、ユーザーが<strong>OptionMenuボタン</strong>から選んだ選択肢の情報を取得し、コンソール画面に表示させるようになっています。</p>



<p>ここで選択した内容を取得するために、<span class="marker"><strong>.get() メソッド</strong></span>を使用しています。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>def display_selected(choice):
    # 情報を取得
    choice = variable.get()
    # 選択内容を表示
    print(choice)</code></pre></div>



<p></p>



<h2 class="wp-block-heading">OptionMenuのその他のオプション</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="325" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png" alt="" class="wp-image-1132" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-300x95.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-768x244.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4.png 1222w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat4-1024x325.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p><strong>OptionMenuウィジェット</strong>には、背景やテキストの色を変えたり、幅や高さを変更したりなど種々の<span class="marker"><strong>オプション</strong></span>があります。</p>



<p>ただし、OptionMenuのオプションを使用する場合にはオプションをそのまま引数に加えて使用することができないので <span class="marker"><strong>config() メソッドを使用します。</strong></span></p>



<p>ウィジェットの幅や高さなどの基本的なオプションは<a href="https://tomtom-stock.com/2022/02/13/tkinter-button-adjust/">ボタン配置について</a>や<a href="https://tomtom-stock.com/2022/03/03/tkinter-font/">フォントの指定方法</a>という記事で紹介していますのでこちらを参考にしてみてください！</p>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>その他、<strong>OptionMenuに対して使用できるオプション</strong>を紹介していきます！</p>
</div></div></div>



<p></p>



<figure class="wp-block-table aligncenter is-style-stripes"><table class="has-fixed-layout"><tbody><tr><td><strong>activeforeground</strong></td><td>ウィジェットがフォーカスされている時の文字色を指定</td></tr><tr><td><strong>disableforeground</strong></td><td>ウィジェットがフォーカスされていない時の文字色を指定</td></tr><tr><td><strong>direction</strong></td><td>選択肢を表示する位置を指定</td></tr><tr><td><strong>wraplength</strong></td><td>文字列を折り返したい場合</td></tr><tr><td><strong>image</strong></td><td>選択肢に画像を張り付ける場合</td></tr></tbody></table></figure>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>OptionButton = tk.OptionMenu()


#activeforeground : フォーカスされている際のウィジェット色を指定
OptionButton.config(activeforeground = &quot;Red&quot;)  #カラーコードを指定

#disabledforeground : 未選択の場合のウィジェットの色を指定
OptionButton.config(activeforeground = &quot;Green&quot;)  #カラーコードを指定

#direction : 選択肢表示位置を指定
OptionButton.config(direction = &quot;above&quot;)    # 上
OptionButton.config(direction = &quot;below&quot;)    # 下
OptionButton.config(direction = &quot;left&quot;)        # 左
OptionButton.config(direction = &quot;right&quot;)      # 右

#wraplength : 選択肢の文字列を折り返したい場合に指定
OptionMenu.config(wraplength = 100)   #幅を数値で指定

#image : 選択肢に画像を張り付ける場合
image = tk.PhotoImage( file = &quot;画像のパスを指定&quot; )
OptionButton.config(image = image, compound = tk.TOP)          #文字列を上に表示
OptionButton.config(image = image, compound = tk.BOTTOM)   #文字列を下に表示
OptionButton.config(image = image, compound = tk.LEFT)        #文字列を左に表示
OptionButton.config(image = image, compound = tk.RIGHT)      #文字列を右に表示
OptionButton.config(image = image, compound = tk.CENTER)    #文字列を真ん中に表示</code></pre></div>



<p></p>



<p></p>



<p>以上となります！<br>最後まで見ていただきありがとうございました。</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/06/tkinter-optionmenu/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/option_button1.mp4" length="333675" type="video/mp4" />

			</item>
		<item>
		<title>[Tkinter] ボタンクリックで新規ウィンドウを表示させる方法！(Toplevel)</title>
		<link>https://tomtom-stock.com/2023/02/05/tkinter-create-newwindow/</link>
					<comments>https://tomtom-stock.com/2023/02/05/tkinter-create-newwindow/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Sun, 05 Feb 2023 05:50:32 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1379</guid>

					<description><![CDATA[TkinterでGUIを作成する際に、 「所定の処理を、別ウィンドウ上で行いたい」「処理結果を別ウィンドウで表示させたい」 といったようなことを思ったことはないでしょうか？ Tkinterには、新しいウィンドウを表示させ]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>TkinterでGUIを作成する際に、</p>



<p>「<strong>所定の処理を、別ウィンドウ上で行いたい</strong>」<br>「<strong>処理結果を別ウィンドウで表示させたい</strong>」</p>



<p>といったようなことを思ったことはないでしょうか？</p>



<p></p>



<p>Tkinterには、新しいウィンドウを表示させるためのメソッドがありますので今回はそれを紹介していきたいと思います！</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ちなみに新規ウィンドウを表示させた際には、<br><span class="marker"><strong>親ウィンドウを操作できる状態を維持する</strong></span>のか<br><span class="marker"><strong>親ウィンドウが操作できないようにロックする</strong></span>のか<br>によって使い分けることができます！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading">新規ウィンドウを表示させる方法</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="383" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png" alt="" class="wp-image-1100" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-300x112.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-768x287.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat.png 1082w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat-1024x383.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>では、新しくウィンドウを表示させる方法を紹介していきます。</p>



<p>Tkinterで新しくウィンドウを表示させるには、<span class="marker"><strong>Toplevel() メソッド</strong></span>を使用します。</p>



<p>GUI上に新規ウィンドウを表示させるためのボタンウィジェットを配置してみます！</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def create_window(event):
    #新規ウィンドウを表示
    window2 = tk.Toplevel(root)

root = tk.Tk()
root.geometry(&quot;200x100&quot;)
button = tk.Button(root, text=&quot;Create new window&quot;)
button.bind(&quot;&lt;Button-1&gt;&quot;, create_window)
button.pack()
root.mainloop()</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="294" height="194" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-4.png" alt="" class="wp-image-1385"/></figure></div>


<p></p>



<p>このようなウィンドウが表示されたと思います。<br>ボタンをクリックしてウィンドウを複数表示させてみましょう！</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="551" height="404" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-3.png" alt="" class="wp-image-1384"/></figure></div>


<p></p>



<p>ただし、ここで注意していただきたいのは <span class="marker"><strong>Toplevel() メソッド</strong></span>を呼び出すだけでは親ウィジェットは<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>操作できてしまう</strong></mark>状態だということです。</p>



<p></p>



<p></p>



<h2 class="wp-block-heading">親ウィンドウを操作不可にしたい場合</h2>



<p>先ほど説明した方法では、親ウィジェットが操作できてしまいました。</p>



<p>そのため親ウィジェットが<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>操作できない</strong></mark>ようにロックするためには、追加で <span class="marker"><strong>.grab_set() メソッド</strong></span>を呼び出してあげる必要があります。</p>



<p>実際に、親ウィンドウを操作できないようにするプログラムは以下のようになります。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

def create_window(event):
    #新規ウィンドウを表示
    window2 = tk.Toplevel(root)
    #親ウィンドウを操作不可にする
    window2.grab_set()

root = tk.Tk()
root.geometry(&quot;200x100&quot;)
button = tk.Button(root, text=&quot;Create new window&quot;)
button.bind(&quot;&lt;Button-1&gt;&quot;, create_window)
button.pack()
root.mainloop()</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="488" height="359" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image-5.png" alt="" class="wp-image-1386"/></figure></div>


<p></p>



<p>この場合だと、親ウィンドウが操作できなくなるのでボタンをクリックして新規ウィンドウを複数表示させることはできなくなってしまいます。。。</p>



<p></p>



<h2 class="wp-block-heading">新規ウィンドウをアクティブにしたい方法</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="334" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png" alt="" class="wp-image-1170" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-300x98.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-768x250.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2.png 1205w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_lookingcat2-1024x334.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>最後に、表示させた新規ウィンドウをアクティブな状態にする方法を紹介します！</p>



<p>新規ウィンドウをアクティブにするには、<span class="marker"><strong>.focus_set() メソッド</strong></span>を使用します。</p>



<p>上記プログラムの <strong>crete_window() 関数</strong>に <span class="marker"><strong>.focus_set() メソッド</strong></span>を追加してみてください。そうすると新規ウィンドウがアクティブな状態で表示されたと思います！</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>def create_window(event):
    #新規ウィンドウを表示
    window2 = tk.Toplevel(root)
    #新規ウィンドウをアクティブにする
    window2.focus_set()</code></pre></div>



<p></p>



<p></p>



<p>以上となります。<br>最後まで見ていただきありがとうございました！</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/05/tkinter-create-newwindow/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>[Python/Tkinter] テキストのフォントを一覧から取得する方法！</title>
		<link>https://tomtom-stock.com/2023/02/04/tkinter-choose-font/</link>
					<comments>https://tomtom-stock.com/2023/02/04/tkinter-choose-font/#comments</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Sat, 04 Feb 2023 05:14:35 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1370</guid>

					<description><![CDATA[今回は、フォントの一覧を表示して任意のフォントをダブルクリックすることでテキストのフォントを変更させる方法を紹介していこうと思います。 フォントの一覧があった方が、見やすいですし変更したい場合に使いやすいですよね。 フォ]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>今回は、フォントの一覧を表示して任意のフォントをダブルクリックすること<span class="marker"><strong>でテキストのフォントを変更させる方法</strong></span>を紹介していこうと思います。</p>



<p>フォントの一覧があった方が、見やすいですし変更したい場合に使いやすいですよね。</p>



<p></p>



<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/image.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/fontchoose-1.mp4" playsinline></video></figure>



<p></p>



<p></p>



<h2 class="wp-block-heading">フォント一覧を取得する</h2>



<p>まずは、選択肢として<strong>フォント一覧を表示</strong>させる必要があります。</p>



<p>そのためのフォント一覧を取得するには、下記メソッドを用います。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>fonts_list = tk.font.families()</code></pre></div>



<p></p>



<h2 class="wp-block-heading">list内の選択された要素を取得する</h2>



<p>フォント一覧が表示されたら、その中から任意のフォントを選択します。そこで選択したフォントの情報を取得するためには <span class="marker"><strong>.curselection メソッド</strong></span>を用います。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>selection = list.curselection()</code></pre></div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ここで返される値は<strong>リスト型</strong>みたいです！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading">フォントを取得できるプログラム</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="373" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png" alt="" class="wp-image-1101" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-300x109.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-768x280.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat.png 1048w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>では実際にフォント一覧からフォントを選択できるプログラムを書いてみます！</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

class CHANGE_FONT():
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        #font一覧を取得
        self.available_fonts = tk.font.families()
        self.fonts_list = tk.Listbox(root)
        self.fonts_list.pack()
        #font一覧を表示
        for font in self.available_fonts:
            self.fonts_list.insert(tk.END, font)
        #ダブルクリックで選択機能をバインド
        self.fonts_list.bind(&quot;&lt;Double-Button-1&gt;&quot;, self.change_font)
        #Labelを作成
        self.fontlabel = tk.Label(root,text=&quot;Choose your Font&quot;)
        self.fontlabel.pack()
        root.mainloop()
        
    def change_font(self, event):
        #選択したLabelを反映
        selection = self.fonts_list.curselection()
        self.fontlabel.config(font=(self.available_fonts[selection[0]],&quot;16&quot;))

ins = CHANGE_FONT()
ins.gen_window()</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="493" height="282" src="https://tomtom-stock.com/wp-content/uploads/2023/02/image.png" alt="result of fontchooser" class="wp-image-1373"/></figure></div>


<p></p>



<p>このようなウィンドウが表示されたと思います！</p>



<p>実際に好きなフォント名をダブルクリックしてみてください。<br>下側に表示されている &#8220;<span class="marker"><strong>choose your font</strong></span>&#8221; のテキストのフォントが変わると思います！</p>



<p></p>



<p>以上となります！<br>最後まで見ていただきありがとうございました！</p>



<p></p>



<p>Tkinter の font に関してはコチラの記事でも詳しく解説していますので興味がある方は是非参考にしてみてください！</p>



<a href="https://tomtom-stock.com/2022/03/03/tkinter-font/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/スクリーンショット-65-320x180.png" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[Python/tkinter] tk.fontでフォント（フォント、下線、斜体など）を設定してみよう！</span><span class="blog-card-excerpt">本記事では、tkinter.fontを用いてテキストのフォントを変更する方法を分かりやすく解説しています。フォントの種類や太字にする方法、アンダーバー（下線）を引く方法なども解説しています。tkinter.font.Font()...</span></div></div></a>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/04/tkinter-choose-font/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/fontchoose-1.mp4" length="611242" type="video/mp4" />

			</item>
		<item>
		<title>[Python/Tkinter] Enterキーで処理を実行する方法(Enter入力を取得)</title>
		<link>https://tomtom-stock.com/2023/02/03/tkinter-enter-return/</link>
					<comments>https://tomtom-stock.com/2023/02/03/tkinter-enter-return/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Fri, 03 Feb 2023 12:48:42 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1361</guid>

					<description><![CDATA[今回は、Tkinter上に作成したテキストボックスに入力した内容を #8220;Enter#8221; キーのクリックで表示させる方法を解説していきます！ Enterキーで処理を実行させる方法 Enter入力とウィジ]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>今回は、Tkinter上に作成したテキストボックスに入力した内容を<span class="marker"><strong> &#8220;Enter&#8221; キー</strong></span>のクリックで表示させる方法を解説していきます！</p>



<p></p>



<h2 class="wp-block-heading">Enterキーで処理を実行させる方法</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="301" src="https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-1024x301.png" alt="" class="wp-image-1174" srcset="https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-1024x301.png 1024w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-300x88.png 300w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-768x226.png 768w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3.png 1212w, https://tomtom-stock.com/wp-content/uploads/2022/02/eyecatch_lookingcat3-1024x301.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Enter入力とウィジェットを紐づける</h3>



<p>キーボード入力とTkinter上のウィジェットを紐づけるためには、<span class="marker"><strong>.bind() メソッド</strong></span>を使用します。</p>



<p><strong>Enterキー</strong>を紐づける場合はイベントに &lt;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>Return</strong></mark>&gt; を指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>ウィジェット名.bind(&quot;&lt;Return&gt;&quot;, 関数名)</code></pre></div>



<p></p>



<p></p>



<h3 class="wp-block-heading">入力内容をEnterキーで表示させてみる</h3>



<p>では、実際にEntry boxに入力した内容を<strong>Enterキー</strong>で表示させてみます。</p>



<p>Entry box内に入力した内容を取得する方法は <span class="marker"><strong>.get() メソッド</strong></span>を使用します。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk


class FOCUS_WIDGET():
    def __init__(self):
        self.num = 0
        self.button_num = 5
        self.widget_list = []
    
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        #ウィジェット作成
        self.entry = tk.Entry(root)
        #Enterキーとボタンクリックイベントをバインド
        self.entry.bind(&quot;&lt;Return&gt;&quot;, self.press_key)
        #ウィジェット配置
        self.entry.pack()

        root.mainloop()
        
    def press_key(self, event):
        #入力内容を表示
        print(self.entry.get())

ins = FOCUS_WIDGET()
ins.gen_window()
</code></pre></div>



<p>（実行結果）</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="502" height="288" src="https://tomtom-stock.com/wp-content/uploads/2023/02/resukt_entry.png" alt="result of enter2" class="wp-image-1362"/></figure></div>


<p></p>



<p>実行結果として表示されたEntry box内に何か文字を入力して、Enterキーをクリックしてみてください！</p>



<p>入力内容がコンソール上に表示されたと思います！</p>



<p></p>



<h2 class="wp-block-heading">Enterキーでボタンをクリックする方法</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="350" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat-1024x350.png" alt="" class="wp-image-1172" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat-1024x350.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat-300x103.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat-768x262.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat.png 1188w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_readingcat-1024x350.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Entry box内の入力内容を読み取る他にも、<strong>Enterキー</strong>でボタンをクリックすることもできます。</p>



<p>今回は矢印キーで任意のボタンを指定し、指定したボタン名を <strong>Enterキー</strong> がクリックされた際に表示させるプログラムを書いてみます。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk


class FOCUS_WIDGET():
    def __init__(self):
        self.num = 0
        self.button_num = 3
        self.widget_list = []
    
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        for i in range(self.button_num):
            #ボタンウィジェット作成
            button=tk.Button(root,text=&quot;ボタン%s&quot; %i)
            #ボタンとキーをバインド
            button.bind(&quot;&lt;KeyPress&gt;&quot;, self.press_key)
            #ボタンとクリックイベントをバインド
            button.bind(&quot;&lt;ButtonPress&gt;&quot;, self.click_button)
            #Enterキーとボタンクリックイベントをバインド
            button.bind(&quot;&lt;Return&gt;&quot;, self.press_key)
            #ボタンウィジェット配置
            button.pack()
            #リストに格納
            self.widget_list.append(button)
        #フォーカスの初期位置を指定
        self.widget_list[0].focus_set()
        root.mainloop()
        
    def press_key(self, event):
        # 上下キーで要素番号を変動
        if event.keysym == &quot;Up&quot;:
           self.num = self.num - 1 
        elif event.keysym == &quot;Down&quot;:
           self.num = self.num + 1
        elif event.keysym == &quot;Return&quot;:
           print(event.widget.cget(&quot;text&quot;))
        # 指定要素へフォーカスを切り替え
        self.widget_list[self.num].focus_set()

    def click_button(self, event):
        button_text = event.widget.cget(&quot;text&quot;)
        self.num = int(button_text[-1])
        self.widget_list[int(button_text[-1])].focus_set()

ins = FOCUS_WIDGET()
ins.gen_window()</code></pre></div>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="497" height="285" src="https://tomtom-stock.com/wp-content/uploads/2023/02/result_enter_click.png" alt="result of enter3" class="wp-image-1363"/></figure></div>


<p></p>



<p>ボタンをクリックさせるためには、<span class="marker"><strong>.focus_set() 関数</strong></span>を用いてクリック対象のボタンウィジェットにフォーカスする必要があります。</p>



<p><strong>フォーカスのさせ方についてはコチラの記事で解説しています。</strong><br>詳しく知りたい方は是非参考にしてみてください～！</p>



<a href="https://tomtom-stock.com/2023/02/03/tkinter-setfocus/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/eyecatch10-320x180.png" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[Tkinter] 矢印キーでウィジェットの選択（フォーカス）を変更/移動させる方法！</span><span class="blog-card-excerpt">tkinterで作成したGUI上のボタンやテキストボックスに、矢印キーを使ってカーソルを合わせる方法（フォーカスする方法）を分かりやすく解説しています。また、クリックでフォーカスする方法も解説しています。.focus_set(), .bind()...</span></div></div></a>



<p></p>



<p>以上となります。<br>最後まで見ていただきありがとうございました！</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/03/tkinter-enter-return/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>[Tkinter] 矢印キーでウィジェットの選択（フォーカス）を変更/移動させる方法！</title>
		<link>https://tomtom-stock.com/2023/02/03/tkinter-setfocus/</link>
					<comments>https://tomtom-stock.com/2023/02/03/tkinter-setfocus/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Fri, 03 Feb 2023 01:39:25 +0000</pubDate>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1343</guid>

					<description><![CDATA[通常、Tkinterで作成したGUI上のウィジェットは矢印キー（↑→↓←）で選択位置を変更することはできません。 ですが、Tkinterには下図のような矢印キーでフォーカス（選択）位置を変えられるようにするメソッドがあり]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>通常、Tkinterで作成したGUI上のウィジェットは<span class="marker"><strong>矢印キー（↑→↓←）</strong></span>で選択位置を変更することはできません。</p>



<p>ですが、Tkinterには下図のような矢印キーでフォーカス（選択）位置を変えられるようにするメソッドがあります！</p>



<p>今回は、選択位置をキー入力で変えられるようにするために方法を分かりやすく説明していきます！</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/poster_1.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new1.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>意外とキー入力で操作したい場面って多々ありますよね。。。</p>
</div></div></div>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<p>プログラミングを<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>より効率的</strong></mark>に学びたい方は<span class="marker"><strong>プログラミングスクール</strong></span>がスキルアップの近道です！是非参考にしてみてください。</p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p></p>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>学生</strong></mark>や<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>30代の方</strong></mark>にも<span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>



<p></p>
</div>



<h2 class="wp-block-heading">矢印キーでボタン選択させる方法</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="311" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png" alt="" class="wp-image-1112" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-300x91.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-768x233.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2.png 1080w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower2-1024x311.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>では実際にプログラムを解説していきます。</p>



<p>選択したいウィジェットにフォーカスを合わせるためのメソッドは、<span class="marker"><strong>focus_set() メソッド</strong></span>になります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>ウィジェット名.focus_set()</code></pre></div>



<p></p>



<p>この <span class="marker"><strong>.focus_set() </strong></span>を用いて「<strong>↑</strong>」「<strong>↓</strong>」キーで選択位置を変えていくプログラムを書いてみました！</p>



<p>完成したプログラムは以下のような形になりました。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

class FOCUS_WIDGET():
    def __init__(self):
        self.num = 0
        self.button_num = 5
        self.widget_list = []
    
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        for i in range(self.button_num):
            #ボタンウィジェット作成
            button=tk.Button(root,text=&quot;ボタン%s&quot; %i)
            #ボタンとキーをバインド
            button.bind(&quot;&lt;KeyPress&gt;&quot;, self.press_key)
            #ボタンウィジェット配置
            button.pack()
            #リストに格納
            self.widget_list.append(button)
        #フォーカスの初期位置を指定
        self.widget_list[self.num].focus_set()
        root.mainloop()
        
    def press_key(self, event):
        # 上下キーで要素番号を変動
        if event.keysym == &quot;Up&quot;:
           self.num = self.num - 1 
        elif event.keysym == &quot;Down&quot;:
           self.num = self.num + 1
        # 指定要素へフォーカスを切り替え
        self.widget_list[self.num].focus_set()

ins = FOCUS_WIDGET()
ins.gen_window()</code></pre></div>



<p></p>



<p>ここでは、まず初めに作成したボタンウィジェットを <span class="marker"><strong>.append()</strong></span> で widget_list[] に格納しています。そうすることで各ボタンをリスト番号で指定できるようになります！</p>



<p></p>



<p>また、ボタンのクリックイベントとボタンウィジェットを紐づけるために<span class="marker"><strong> .bind() メソッド</strong></span>を使用しています。<br>詳しくは<a href="https://tomtom-stock.com/2022/10/30/tkinter-multidef-argument/">ボタンクリック時に複数処理を行う方法</a>でも少し解説しているので確認してみてください！</p>



<p></p>



<p>なのでリスト番号を、<strong>矢印キーを押すたびに増減</strong>させてあげればボタンの選択位置を変えていくことができるという訳です！</p>



<p>また、フォーカスの初期位置を指定してあげないと矢印キーで位置を変更することができませんでした。。。なので、<span class="marker"><strong>gen_window()</strong></span> 関数内で初期位置を指定してあげています。</p>



<p></p>



<p>本記事では他にも下記の事柄を解説しています！</p>



<div class="wp-block-jin-gb-block-box simple-box6">
<ul class="wp-block-list">
<li>・ <a href="#a-1">マウスクリックした位置にフォーカスする方法</a></li>



<li></li>



<li>・ <a href="#a-2">Enterキーでフォーカスした位置をクリックさせる方法</a></li>



<li></li>



<li>・ <a href="#a-3">その他のウィジェットに対して実行した結果</a></li>
</ul>
</div>



<p></p>



<h2 class="wp-block-heading" id="a-1">クリックでフォーカスする機能を加える</h2>



<p>しかし、上記のプログラムでは矢印キーで選択位置を変更することはできましたが<span class="marker"><strong>実際にボタンをクリックした際に選択位置が変更されません</strong></span>。</p>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ボタンクリック時にも<strong>選択位置が変えられた方が使いやすい</strong>ですよね。</p>
</div></div></div>



<p></p>



<p>実際にボタンクリック時にも選択位置を変更したい場合は、下記のように<span class="marker"><strong>ボタンクリックイベントをもう一つ定義して、「クリックされたボタンをフォーカスする」という関数を作ってあげます</strong></span>。</p>



<p>（追記した部分のみ説明分を書いています）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

class FOCUS_WIDGET():
    def __init__(self):
        self.num = 0
        self.button_num = 5
        self.widget_list = []
    
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        for i in range(self.button_num):
            button=tk.Button(root,text=&quot;ボタン%s&quot; %i)
            button.bind(&quot;&lt;KeyPress&gt;&quot;, self.press_key)
            #ボタンとクリックイベントをバインド
            button.bind(&quot;&lt;ButtonPress&gt;&quot;, self.click_button)
            button.pack()
            self.widget_list.append(button)
        self.widget_list[0].focus_set()
        root.mainloop()
        
    def press_key(self, event):
        if event.keysym == &quot;Up&quot;:
           self.num = self.num - 1 
        elif event.keysym == &quot;Down&quot;:
           self.num = self.num + 1
        self.widget_list[self.num].focus_set()

    def click_button(self, event):
        #クリックしたボタンのテキストを取得
        button_text = event.widget.cget(&quot;text&quot;)
        #クリックしたボタンの番号を現在位置に更新
        self.num = int(button_text[-1])
        #クリックしたボタン番号の位置をフォーカス
        self.widget_list[int(button_text[-1])].focus_set()

ins = FOCUS_WIDGET()
ins.gen_window()</code></pre></div>



<p>（実行結果）</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/button_adjust.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new2.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p><strong>click_button() 関数</strong>にどのような処理を追加したのか説明していきます！</p>
</div></div></div>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code> #クリックしたボタンのテキストを取得
button_text = event.widget.cget(&quot;text&quot;)</code></pre></div>



<p>まず、この行ではクリックしたボタンの<span class="marker"><strong>テキスト情報を取得</strong></span>しています。<br>例えば、GUI上の &#8220;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>ボタン1</strong></mark>&#8221; をクリックした場合、<span class="marker"><strong>event.widget.cget(&#8220;text&#8221;) </strong></span>で返される値は &#8220;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>ボタン1</strong></mark>&#8221; という文字列になります。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>        #クリックしたボタンの番号を現在位置に更新
        self.num = int(button_text[-1])
        #クリックしたボタン番号の位置をフォーカス
        self.widget_list[self.num].focus_set()</code></pre></div>



<p>次に、先ほど取得した文字列の末尾（ボタン番号）を取得して現在位置を更新して、さらにその位置に <span class="marker"><strong>.focus_set() </strong></span>しているという訳です！</p>



<p></p>



<h2 class="wp-block-heading" id="a-2">Enterキーでボタンをクリックさせる方法</h2>



<figure class="wp-block-image size-full"><img decoding="async" width="952" height="312" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png" alt="" class="wp-image-1110" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png 952w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower-300x98.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower-768x252.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png 856w" sizes="(max-width: 952px) 100vw, 952px" /></figure>



<p>さらに、<span class="marker"><strong>Enterキーを押下した際にフォーカスしているボタンをクリックしたい場合</strong></span>の処理について説明します！</p>



<p><strong>Enterキー</strong>を押した際にクリックイベントを実行したい場合には、<span class="marker"><strong>.bind() メソッドでEnterキー入力とクリックイベントを紐づけてあげる</strong></span>必要があります。</p>



<p>どのように紐づけるかというと、<strong>Enterキー</strong>は、Keysym上では<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>&lt;Return&gt;</strong></mark>として定義されているため下記のようにして紐づけます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>ウィジェット名.bind(&quot;&lt;Return&gt;&quot;, 実行したい関数名)</code></pre></div>



<p></p>



<p>今回は、<strong>Enterキー</strong>を押した際にフォーカスされているボタンのテキストを出力させるプログラムを書いてみます！</p>



<p>（完成したプログラム：行を追加した部分のみコメント記載）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk


class FOCUS_WIDGET():
    def __init__(self):
        self.num = 0
        self.button_num = 5
        self.widget_list = []
    
    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        for i in range(self.button_num):
            button=tk.Button(root,text=&quot;ボタン%s&quot; %i)
            button.bind(&quot;&lt;KeyPress&gt;&quot;, self.press_key)
            button.bind(&quot;&lt;ButtonPress&gt;&quot;, self.click_button)
            #Enterキーとボタンクリックイベントをバインド
            button.bind(&quot;&lt;Return&gt;&quot;, self.press_key)
            button.pack()
            self.widget_list.append(button)
        self.widget_list[0].focus_set()
        root.mainloop()
        
    def press_key(self, event):
        # 上下キーで要素番号を変動
        if event.keysym == &quot;Up&quot;:
           self.num = self.num - 1 
        elif event.keysym == &quot;Down&quot;:
           self.num = self.num + 1
        #Enterキークリック時の処理を記載（下記は押したボタンテキストを表示）
        elif event.keysym == &quot;Return&quot;:
           print(event.widget.cget(&quot;text&quot;))
        self.widget_list[self.num].focus_set()

    def click_button(self, event):
        button_text = event.widget.cget(&quot;text&quot;)
        self.num = int(button_text[-1])
        self.widget_list[int(button_text[-1])].focus_set()

ins = FOCUS_WIDGET()
ins.gen_window()</code></pre></div>



<p></p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p><strong>press_key() </strong>関数に、<strong>event.keysym == &#8220;Return&#8221;</strong> を追加してボタンのテキストを表示させる処理を追加してみました！！！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading" id="a-3">ボタン以外のウィジェットにも対応</h2>



<p>本プログラムは、ボタンウィジェット以外にもそのまま適用可能です。</p>



<p>例えば、<strong>gen_window() 関数</strong>において作成するウィジェットを<strong>Entry box</strong>に変更してみます。すると同様に矢印キーやボタンクリックで位置を変更することができました！</p>



<p></p>



<p>Entry boxの作成方法は以下の通りです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>Entry = tk.Entry( parent, options )</code></pre></div>



<p>(parent : 親ウィジェット、options : 幅、高さなど種々のオプション)</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<figure class="wp-block-video"><video autoplay controls loop muted poster="https://tomtom-stock.com/wp-content/uploads/2023/02/poster-2.png" src="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new3.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>



<p>（gen_window() 関数を下記のように変更）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>    def gen_window(self):
        root=tk.Tk()
        root.geometry(&quot;400x200&quot;)
        root.title(&quot;Python&quot;)
        for i in range(self.button_num):
            entry=tk.Entry(root,text=&quot;ボタン%s&quot; %i)
            entry.bind(&quot;&lt;KeyPress&gt;&quot;, self.press_key)
            entry.bind(&quot;&lt;ButtonPress&gt;&quot;, self.click_button)
            entry.pack()
            self.widget_list.append(entry)
        self.widget_list[0].focus_set()
        root.mainloop()</code></pre></div>



<p></p>



<p>以上となります。<br>最後まで見ていただきありがとうございました！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2023/02/03/tkinter-setfocus/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new1.mp4" length="355404" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new2.mp4" length="410510" type="video/mp4" />
<enclosure url="https://tomtom-stock.com/wp-content/uploads/2023/02/setfocus_new3.mp4" length="347507" type="video/mp4" />

			</item>
		<item>
		<title>[python/tkinter] クリックイベントに引数を渡す / 複数処理を実行してみよう！</title>
		<link>https://tomtom-stock.com/2022/10/30/tkinter-multidef-argument/</link>
					<comments>https://tomtom-stock.com/2022/10/30/tkinter-multidef-argument/#respond</comments>
		
		<dc:creator><![CDATA[katakuriko214]]></dc:creator>
		<pubDate>Sun, 30 Oct 2022 05:12:19 +0000</pubDate>
				<category><![CDATA[Tkinter]]></category>
		<guid isPermaLink="false">https://tomtom-stock.com/?p=1042</guid>

					<description><![CDATA[本記事では、「クリックイベントに引数を渡す方法」「クリックイベントと複数処理を紐づける方法」を分かりやすく解説していきます！ tkinterなどでUIを作成する際に、ボタンをクリックして何か処理を実行させるのは必要不可欠]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-media-text alignwide" style="grid-template-columns:27% auto"><figure class="wp-block-media-text__media"><img decoding="async" width="384" height="400" src="https://tomtom-stock.com/wp-content/uploads/2023/02/hanami_usagi.png" alt="" class="wp-image-1730 size-full"/></figure><div class="wp-block-media-text__content">
<p>本記事では、<br>「<span class="marker"><strong>クリックイベントに引数を渡す方法</strong></span>」<br>「<span class="marker"><strong>クリックイベントと複数処理を紐づける方法</strong></span>」<br>を分かりやすく解説していきます！</p>
</div></div>



<p></p>



<p>tkinterなどで<strong>UI</strong>を作成する際に、ボタンをクリックして何か処理を実行させるのは必要不可欠ですよね。</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>今回は、冒頭でも書いたようにクリックイベントを少し応用した使い方を紹介していきたいと思います！</p>
</div></div></div>



<p></p>



<div class="wp-block-jin-gb-block-box-with-headline kaisetsu-box4"><div class="kaisetsu-box4-title">今回紹介すること</div>
<ul class="wp-block-list">
<li>ボタンクリック時、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong><a href="#a-1">実行される関数に引数を渡す</a></strong></mark>方法</li>



<li>ボタンクリック時、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong><a href="#a-2">関数を複数実行する</a></strong></mark>方法</li>
</ul>
</div>



<p>では順に解説していきます！</p>



<p></p>



<div class="wp-block-jin-gb-block-box simple-box2">
<div class="wp-block-jin-gb-block-box simple-box7">
<ul class="wp-block-list">
<li><span class="marker"><strong>転職のためのスキルアップ</strong></span>として効率的に学びたい</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>副業</strong></mark>としてプログラミングができるようになりたい</li>



<li><span class="marker"><strong>独学での勉強に</strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>限界</strong></mark><strong>を感じている</strong></span></li>
</ul>
</div>



<p>これらに該当する方は<span class="marker"><strong>プログラミングスクール</strong></span>がスキルアップの近道です！</p>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>



<p class="has-text-align-center"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>未経験</strong></mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color"><strong>でも安心！</strong></mark><br><span class="marker"><strong>おすすめなプログラミングスクールがあります</strong></span>！</p>



<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-shiny jsb-hover-down"><a style="border-radius:40px;background-color:#f39800;background:linear-gradient(107.61deg, #f39800 7.99%, #fbca4d 91.12%)" href="https://tomtom-stock.com/2023/02/08/program-school-recommend/">人気のプログラミングスクールをチェック！</a><img border="0" width="1" height="1" alt=""/></div></div>
</div>



<div class="wp-block-jin-gb-block-icon-box jin-icon-heart jin-iconbox"><div class="jin-iconbox-icons"><i class="jic jin-ifont-heart jin-icons"></i></div><div class="jin-iconbox-main">
<p>ブックマークするといつでも確認することができます！</p>
</div></div>



<h2 class="wp-block-heading" id="a-1">ボタンクリックイベントを作成してみる</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="373" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png" alt="" class="wp-image-1101" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 1024w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-300x109.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-768x280.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat.png 1048w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_mike_cat-1024x373.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>まずは、ウィンドウ上の<strong>ボタンをクリック</strong>した際に、<span class="marker"><strong>”ボタンが押されました！”</strong></span>　とテキストボックス上に表示させるプログラムを作成してみます。</p>



<p>ボタンの配置方法やクリックイベントなどを詳しく知りたい方はこちらの記事を参考にしてみてください！</p>



<p>　　→　　<a href="https://tomtom-stock.com/2022/02/13/tkinter-button-adjust/">Buttonメソッドのオプションや、配置方法、クリック時に処理を行う方法</a></p>



<h3 class="wp-block-heading">commandオプションで指定する</h3>



<p><span class="marker"><strong>tk.Button()</strong></span>の<span class="marker"><strong>command</strong></span>オプションに関数を与えてあげることでクリックイベントと紐づけることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>button1 = tk.Button(root, text, command)</code></pre></div>



<p>では実際にプログラムを書いていきましょう！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

class ButtonClick:
    def __init__(self, root):
        # textbox表示
        self.textbox = tk.Entry(width=50)
        self.textbox.pack()
        # ボタン作成
        self.button1 = tk.Button(root, text = &quot;ボタン&quot;, command = self.button_click)
        self.button1.pack()

    # ボタンクリック時処理
    def button_click(self):
        self.textbox.insert(0, &quot;ボタンが押されました！&quot;)

if __name__==&quot;__main__&quot;:
    # window作成
    root = tk.Tk()
    root.geometry(&quot;400x100&quot;)   
    # インスタンス作成
    ins = ButtonClick(root)  
    root.mainloop()</code></pre></div>



<p></p>



<p>では実際にこのプログラムを実行してみましょう！<br>すると下記のようなウィンドウが表示されます！</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="519" height="179" src="https://tomtom-stock.com/wp-content/uploads/2022/10/image.png" alt="result conduct program" class="wp-image-1043"/><figcaption class="wp-element-caption">プログラムの実行結果</figcaption></figure></div>


<p>次にこのボタンをクリックしてみるとしっかりとボタンクリック時の処理が実行されています。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="518" height="177" src="https://tomtom-stock.com/wp-content/uploads/2022/10/image-1.png" alt="after click button" class="wp-image-1044"/><figcaption class="wp-element-caption">ボタンクリック後の結果</figcaption></figure></div>


<p>上記プログラムでは、<span class="marker"><strong>tk.Button()の引数 &#8220;command&#8221;</strong></span> に実行したい関数を与えてあげることでクリックイベントを紐づけることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>        # ボタン作成
        self.button1 = tk.Button(root, text = &quot;ボタン&quot;, command = self.button_click)</code></pre></div>



<p></p>



<h3 class="wp-block-heading">.bind() メソッドで指定する</h3>



<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>”command = ***” </strong></mark>として指定しなくても<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong> &#8220;.bind()&#8221;</strong></mark> メソッドを用いてイベントをバインドすることができます！</p>



<p>先ほどの<strong>tk.Button()</strong>メソッドの<strong>command</strong>オプションを削除して下記のように変更しても同様に関数をクリックイベントに紐づけることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>        # ボタン作成
        self.button1 = tk.Button(root, text = &quot;ボタン&quot;)
        self.button1.bind(&quot;&lt;button-1&gt;&quot;, self.button_clic)
        self.button1.pack()</code></pre></div>



<p></p>



<p><strong>bind()</strong>メソッドを用いると、ボタンをクリックした際に複数のイベントを呼び出すことができます！</p>



<p>これは記事の後半で説明していますので最後まで見ていってください（^^）</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ボタンクリックでいろいろなことができそうですね！</p>
</div></div></div>



<p></p>



<h2 class="wp-block-heading">ボタンクリックイベントに引数を渡す方法</h2>



<figure class="wp-block-image size-full"><img decoding="async" width="952" height="312" src="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png" alt="" class="wp-image-1110" srcset="https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png 952w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower-300x98.png 300w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower-768x252.png 768w, https://tomtom-stock.com/wp-content/uploads/2023/01/eyecatch_cat_flower.png 856w" sizes="(max-width: 952px) 100vw, 952px" /></figure>



<p>これまで説明してきた方法では、クリックイベントを呼び出すことはできても<span class="marker"><strong>呼び出した関数に何か引数を与えて処理をさせることができませんでした。。。</strong></span></p>



<p>ですが、pythonのはそんな<strong>かゆいところに手が届く</strong>書き方があります！</p>



<p>それが<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>”lambda式”</strong></mark>になります。</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>では<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong> &#8220;lambda式&#8221;</strong></mark> の書き方を紹介していきたいと思います！</p>
</div></div></div>



<p></p>



<h3 class="wp-block-heading">　commandオプションで<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">”lambda式”</mark>を用いる</h3>



<p><span class="marker"><strong>tk.Button()メソッド</strong></span>の<span class="marker"><strong>commandオプション</strong></span>およびボタンクリック時の処理を下記のように書き換えてみてください。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code># ボタン作成
self.button1 = tk.Button(root, text = &quot;ボタン&quot;, 
                                    command = lambda: self.button_click(&quot;ボタンが押されました！&quot;))</code></pre></div>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code># ボタンクリック時処理
def button_click(self, label):
    self.textbox.insert(0, label)</code></pre></div>



<p></p>



<p>すると、実行したい関数に（）で指定した任意の引数を渡すことができました！</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size">スポンサーリンク</p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-text-align-center has-small-font-size">スポンサーリンク</p>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4709394586832392" crossorigin="anonymous"></script>
<!-- ディスプレイ300×280 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4709394586832392" data-ad-slot="1091550778"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>



<h2 class="wp-block-heading" id="a-2">クリックイベントを複数呼び出す方法</h2>



<p>また、ボタンをクリックした際に関数を複数実行したいこともありますよね！</p>



<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>そのようなときは<span class="marker"><strong>.bind()メソッド</strong></span>の<span class="marker"><strong>addオプション</strong></span>を使います！</p>
</div></div></div>



<p>方法は、下記のようにクリックイベントに紐づけたい関数を<span class="marker"><strong>.bind()メソッド</strong></span>でボタンに紐づけていきtます。</p>



<p>この時2つめ以降の<span class="marker"><strong>.bind()メソッド</strong></span>には、第三引数に<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong>”+”</strong></mark>を渡すようにしてください！</p>



<p>そうすることで複数の関数を紐づけていくことができます！</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>        # ボタン作成
        self.button1 = tk.Button(root, text = &quot;ボタン&quot;)
        self.button1.bind(&quot;&lt;Button-1&gt;&quot;, self.button_click)
        self.button1.bind(&quot;&lt;Button-1&gt;&quot;, self.button_click2, &quot;+&quot;)</code></pre></div>



<p></p>



<p>実際にコードを書いてみます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>import tkinter as tk

class ButtonClick:
    def __init__(self, root):
        # textbox表示
        self.textbox = tk.Entry(width=50)
        self.textbox.pack()
        # ボタン作成
        self.button1 = tk.Button(root, text = &quot;ボタン&quot;)
        self.button1.bind(&quot;&lt;Button-1&gt;&quot;, self.button_click)
        self.button1.bind(&quot;&lt;Button-1&gt;&quot;, self.button_click2, &quot;+&quot;)
        self.button1.pack()

    # ボタンクリック時処理1
    def button_click(self, event):
        self.textbox.insert(0, &quot;ボタンが&quot;)
    # ボタンクリック時処理2    
    def button_click2(self, event):
        self.textbox.insert(4, &quot;押されました！&quot;)

if __name__==&quot;__main__&quot;:
    # window作成
    root = tk.Tk()
    root.geometry(&quot;400x100&quot;) 
    # インスタンス作成
    ins = ButtonClick(root)  
    root.mainloop()</code></pre></div>



<p></p>



<p>上記プログラムを実行すしてボタンをクリックしてみると同じように表示されました！</p>



<p></p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="528" height="183" src="https://tomtom-stock.com/wp-content/uploads/2022/10/image-3.png" alt="after button clicked" class="wp-image-1046"/></figure></div>


<div class="wp-block-jin-gb-block-chat-block balloon-box balloon-left clearfix has-ccc-ballon has-efefef-bgballon"><div class="balloon-icon maru"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/slime5-2.png"/></div><span class="icon-name">すらいむ管理人</span><div class="balloon-serif"><div class="balloon-content">
<p>ボタンなどのウィジェットを活用していくことでアプリケーション開発の幅が広がりますね！</p>
</div></div></div>



<p></p>



<h3 class="wp-block-heading">.insert()</h3>



<p>ここで、<span class="marker"><strong>insert()メソッド</strong></span>の第一引数<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong> a </strong></mark>は挿入したいオブジェクトを何番目に入れるかを指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-python" data-lang="Python"><code>***.insert( a, object)</code></pre></div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="261" height="154" src="https://tomtom-stock.com/wp-content/uploads/2022/10/image-2.png" alt="definision of insert()" class="wp-image-1045"/></figure></div>


<p>今回の場合では、<strong>”ボタンの”</strong>というstring型リストの<span class="marker"><strong>４番目に挿入したかったので</strong></span><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><strong> a = &#8220;4&#8221; </strong></mark>を指定しています。</p>



<p>今回は以上となります！<br>最後まで見ていただきありがとうございました！</p>



<p></p>



<p class="has-text-align-left" style="font-size:16px"><strong>他にもPython学習に役立つ書籍や優良プログラミングスクールを紹介しています！</strong></p>



<a href="https://tomtom-stock.com/2022/03/13/python-bookreview-syosinnsya/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2022/03/eyecatch_recombooks-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">[2025年版][難易度別] Python学習にオススメな参考書：厳選9冊！</span><span class="blog-card-excerpt">Pythonを勉強する初心者から中級者を対象として、2023年現在で本当に良いと感じた厳選9冊を紹介しています。Pythonの基礎を学べる書籍から、GUI、アプリ作成、機械学習などを学べる書籍まで幅広く紹介しています！レビューも書き込んでいます！...</span></div></div></a>



<a href="https://tomtom-stock.com/2023/02/08/program-school-recommend/" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail"><img decoding="async" src="https://tomtom-stock.com/wp-content/uploads/2023/02/2025-09-06-194514-320x180.jpg" class="blog-card-thumb-image wp-post-image" alt="" width ="162" height ="91" /></div><div class="blog-card-content"><span class="blog-card-title">【2025年最新】プログラミング上達の近道とは？スクールに通うメリットやおすすめランキングも徹底解説！</span><span class="blog-card-excerpt">プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています！特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...</span></div></div></a>
]]></content:encoded>
					
					<wfw:commentRss>https://tomtom-stock.com/2022/10/30/tkinter-multidef-argument/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
