ユーザーフォームは難しそうだと諦めていませんか？実はそれほど高度な知識は必要無く、初心者でもフォームデザインから始めれば楽しく覚えられます。
(*’ω’*)σ 記事の最後にはネタで魔改造したフォームを載せたので、気楽にご覧ください。
初めてユーザーフォームを作成する際は2つのパートに分けて考えると分かりやすくなります。
- ユーザーフォームプロパティ
🔹土台となる部分の基本的な仕様を決める作業（色・フォント・表示位置など）
🔹リモコンで言うと本体部分と考えると分かりやすい - コントロールツール
🔹作業したい内容に応じてフォームに配置するツール
🔹リモコンで言うとボタンと考えると分かりやすい
本体を作ってから、実装したい機能のツールを配置していきます。
(*’ω’*)σ カラフル・ビジネス向けの落ち着いたトーン・個性的なツートンなど、自由自在です。
▼ グラフもドレスアップすれば目に留まる｜グラフデザイン記事
- デザイン1つで仕事の”デキる感”が上がる
- ▶ 【Excel】グラフデザイン比較｜伝わるグラフの作成方法4パターン
ユーザーフォームプロパティ
ユーザーフォーム土台部分の表示内容や動作について細かい設定ができます。
▼ プロパティで設定できる項目の概要
- 表示
フォーム本体・区切り線・文字などの色の設定
区切り線の有無・フォーム本体の立体感などの設定 - ピクチャ
フォームに画像を挿入する場合の位置やサイズの設定 - フォント
書体・太字・斜体・文字の大きさなどの設定 - 位置
フォームを呼び出した際に表示される画面上の位置設定 - スクロール・動作・その他
スクロールの有無やマウスポインタ―のデザインの設定
Excelを開いてAlt+F11でVBEを起動→新規ユーザーフォームを挿入すると画面左下に登場します。
英語が並んでいて速攻くじけそうになりますが、「項目別」タブを選択すると日本語でカテゴライズしてくれます。やれる気がしてきましたね。
7カテゴリで、分かりやすくなりました。
今回はデザインに特化した内容なので、関連の高い項目をメインに紹介していきます。
表示｜色やスタイルの基本設定
表示で設定できるのは6項目です。
BackColor【バックカラー】
ユーザーフォームの色を変更できます。見やすさを考えると白か薄めの色がおすすめです。
BoderColor/BoderStyle【ボーダーカラー/ボーダースタイル】
BorderStyleでフチ(枠線)の有無を設定して、フチアリの場合はBorderColorで色を変更できます。
見た目的にはあまり変わりませんが、こだわる方はいじる場所です。
Caption/ForeColor【キャプション/フォアカラー】
キャプションはフォームのタイトルです。プロパティに直接入力して書き換えが可能です。
文字色のデフォルト設定はフォアカラーで行います。後からツールごとに個別設定も可能です。
SpecialEffect【スペシャルエフェクト】
フォームのタイトル部分とコントロール部分の境目を設定できます。
設定値は0，1，2，3，6の5種類です。
微妙すぎて掲載を迷うレベルですが、皆様の「へぇ～・・・」のために載せておきます。
ピクチャ｜背景画像の編集
ユーザーフォームの背景に画像を設定します。
Picture以外の3つは、画像を設定した際のサイズや位置の調整に使用します。
Picture【ピクチャ】
PictureAlignment【ピクチャーアライメント】
背景画像の位置を指定します。
✔ 0-fmPictureAlignmentTopLeft 左上端に合わせて配置
✔ 1-fmPictureAlignmentTopRight 右上端に合わせて配置
✔ 2-fmPictureAlignmentCenter 中央に配置（既定値）
✔ 3-fmPictureAlignmentBottomLeft 左下端に合わせて配置
✔ 4-fmPictureAlignmentBottomRight 右下端に合わせて配置
英語表記で設定値の名前が長いですが、要は「どこ合わせか？」です。
PictureSizeMode【ピクチャーサイズモード】
✔ 0-fmPictureSizeModeClip 元の画像サイズのまま表示(規定値)
✔ 1-fmPictureSizeModeStretch フォームサイズに合わせて画像を引き延ばす
✔ 2-fmPictureSizeModeZoom フォームサイズに合わせて1：1比率で引き延ばす
設定値1はユーザーフォームの大きさにピッタリ合わせですが、画像が歪む可能性ありです。
設定値2だと画像は歪みませんが、フォームの途中で画像が途切れる場合があります。
PictureTiling【ピクチャーターニング】
✔ True フォームのサイズを埋めるだけの画像を並べて表示する
✔ False 画像は1つしか表示しない
フォームが大きくて画像が小さい場合、Trueにしておくと左図のようになります。
フォント｜コントロールツールのフォント設定
コントロールツールに表記されるフォントの既定値になります。
ツールごとに変更したい場合はツールのプロパティで個別設定できます。
位置｜ユーザーフォーム表示位置の調整
実行時の表示位置とフォームサイズを設定できます。
StartUpPosition【スタートアップポジション】
ユーザーフォームが最初に表示される位置を選択できる。
0-手動・・・別途LeftプロパティとTopプロパティを設定してポイント単位で位置を指定
1-オーナーフォームの中央・・・ユーザーフォームが属する項目の中央に表示
2-画面の中央・・・画面全体の中央に表示
3-Windowsの既定値・・・左上隅に表示
Left/Top【レフト/トップ】
スタートアップポジションが0-手動の時のみ有効。
画面上の座標をポイントで指定して位置を調整する。
Height/Width【ハイト/ワイズ】
ユーザーフォームの高さ(Height)と幅(Width)を指定。
ドラッグで大まかな大きさを決めた後、ポイント単位で微調整する際に使用する。
スクロール・動作・その他
この辺りはデザインにほぼ関係ないので省きます。
実際に既定値から変更する必要も無いに等しい部分なので、知らなくても大丈夫です。
コントロールツールの種類
ツールボックスから使いたいコントロールを選択し、ユーザーフォーム上でドラッグして配置します。
一通りフォームに追加して実行した図です。まずは見た目から。
ラベル/テキストボックス
フォーム上に文字を表記するのがラベル、ユーザーが入力する部分がテキストボックスです。
この2つの表示設定はほぼ共通です。
▶BackStyle設定
0-fmBackStyleTransparentなら背景透明、1-fmBackStyleOpaqueなら任意の色
▶BorderStyle設定
0-fmBorderStyleNoneなら境目線無し、1-fmBorderStyleSingleなら任意の色で境目線有り
▶ForeColorでデフォルトの文字色設定可、SpecialEffectで凸凹設定可
見た目を整えるのであれば、このあたりの設定だけで十分です。
PasswordChar
テキストボックスプロパティにPasswordChar(パスワードキャラ)という項目があります。
これはパスワード入力時など、画面上に直接表示を出したくない場合に使います。例えばPasswordCharに「*」と入力しておくと、実行時は右図のようになります。
コンボボックス/リストボックス
この2つは似ているのですが、それぞれ特徴があります。
フォームをコンパクトにまとめたい時はコンボボックスがおすすめです。
✔ 始めは閉じている
✔ 選択できるのは1つだけ
✔ 直接入力も可能
✔ 始めから開いている
✔ 設定次第で複数選択も可能
✔ 直接入力は不可能
表示設定の項目はほぼ共通ですが、コンボボックスの方が少し多くなっています。
4つあるので解説します。
BackStyle【バックスタイル】
リストボックスは背景を透明にできませんが、コンボボックスは背景を透明に設定できます。下図は色の組み合わせ比較です。
DropButtonStyle【ドロップボタンスタイル】
右端のボタンのアイコンが選択できます。4種類あります。
ShowDropButtonWhen【ショードロップボタンホエン】
ボタンの表示/非表示の設定ができます。
✔ 0-fmShowDropButtonWhenNever ボタンは表示しない
✔ 1-mShowDropButtonWhenFocus コンボボックスにフォーカスした時のみボタンを表示
✔ 2-fmShowDropButtonWhenAlways ボタンを常に表示する（既定値）
Style【スタイル】
コンボボックスでの値の選択方法を設定できます。
既定値のままにしないとコンボボックスの意味がないという、謎の設定になっています。
✔ 0-fmStyleDropDownCombo
直接値を入力したり、リストから値を選択することができる（既定値）
✔ 2-fmStyleDropDownList
直接入力不可。リストから値を選択する(リストボックスとして機能する)
チェックボックス/オプションボタン/フレーム
チェックボックスは複数選択が可能です。
オプションボタンは択一式で、昔は「ラジオボタン」(1個しか押せないから)と呼ばれました。
フレームはオブジェクトを見やすくまとめる役割です。「図形のグループ化」のようにオブジェクトを動かす時に塊で移動できるので、フォーム編集の際も便利な機能です。
チェックボックスとオプションボタンの表示設定項目は同じです。
アライメントと、ここまで説明してこなかった2つについて解説します。
Alignment【アライメント】
通常よく見るのが左端にチェックを入れる配置(既定値)です。
Value【バリュー】
チェックボックス(オプションボタン)の状態を表す値を設定または取得します。
「True」なら「選択されている」
「False」なら「選択されていない」です。
Visible【ビジブル】
表示、非表示を切り替えまたは状態を取得します。
「True」なら「表示」、「False」なら「非表示」です。
※Falseの場合、VBE上では見えますが実行画面では非表示になります。
コマンドボタン/トグルボタン/スピンボタン
CommandButton【コマンドボタン】
作業を「実行」するボタンです。
値の入力・検索・並べ替え・抽出・転記など、様々な作業にGOサインを出す役割です。
表示設定に特に変わった項目はありません。
色を変えたり、透明にしたり、画像を設定することができます。
ToggleButton【トグルボタン】
電気のスイッチのようにクリックするたびにON,OFFが切り替わります。
処理条件の切り替えや、表示/非表示の切り替えなどに使用します。
表示設定に特に変わった項目はありません。
色を変えたり、透明にしたり、画像を設定することができます。
SpinButton【スピンボタン】
ボタンをクリックして、特定の範囲内で値を増減させることができます。
単体では増減の表示ができないので、ラベル・テキストボックス・セル等と組み合わせて使用します。
色設定の他、ボタンの並びを設定できます。
*Orientation【オリエンテーション】
✔ -1-fmOrientationAuto コントロールの大きさによって自動的に判定（既定値）
✔ 0-fmOrientationVertical0 垂直(縦)方向に配置
✔ 1-fmOrientationHorizontal 水平(横)方向に配置
タブストリップ/マルチページ
タブストリップはどのページを開いても、同じコントロールが表示されます。
マルチページは各ページに違うコントロールを設定できます。
コントロールツールの紹介は以上です。
この後、ネタとして魔改造したフォームの画像を載せます。
怖いのが嫌いな方はここまでです。お疲れ様でした！
どこの会社にもいると思うんですがね・・・
仕事を後輩に丸投げするアカン先輩・・・
入社以来お世話にはなっているんです。それなりに笑
人としては人間味があって、人情もあって、いい先輩なんです。
でもちょっと丸投げが過ぎるので、いたずらしました笑
頼まれてたファイルを魔改造してやった！
開くとこんなファイル・・・
自分で作ったのに気持ち悪い・・笑
ちなみに大事なデータが入ったファイルはちゃんと別で後日渡しましたョ。
そして、馬刺しとスタバUber10回を手に入れ、MacBookProの代わりにペンタブをGet!
先輩いわく、「丸投げのおかげで、お前はスキルアップした」
・・・( ﾟДﾟ)えーーーー？！ まぁいいか。
XP PENのDeco01もらいました。板タブだけどすごく使いやすいので、別記事書く予定です。