レイアウトを整える

千葉県千葉市中央区にあるアシストICTパソコンスクールの引田です。

第10回は前回住所録管理のフォームを作ったのでレイアウトをもう少し良くしていく。レイアウトを整えていきたいなと思います。

第10回はその説明をしたいと思います。

いつも通り文字をダブルクリックします。

第9回で作成した住所録管理をクリックしてデザインビュー。

そうするとこうなるんですね。やりたいことはですね表形式、これ表ですから上の名前ラベルと下のテキストボックスが連動してないですね。だから画面を作る上ではかなり結構大変です。

例えば会社名、こっちだけこうやったとしても、上も本当はついてきてほしいですね。

やり方としたら二つ選択してやるという手法もあるんですけれどもフィールドとフィールドの間の間隔が表示されなかったりだとか全体のレイアウトのバランスがガタガタになったりするので今回それをなくすための手法をやっていきたいと思います。

このタイトルのところがウィザードで作った関係で下の方まで降りてきてこれを上の方に戻します。

あとついでにFっていうのがついてるんでこれはタイトル上はいらないですね。

ここにはあった方がいいんですけど、画面上にはFいらないと思うので逆に紛らわしいので取った方がいいと思います。

では早速表形式レイアウトの表形式ですね。レイアウトの設定をちょっとやっていきたいと思います。

全部ラベルとテキスト全部選択して表形式。もうできました。

ちょっと実際やってみよう。IDがラベルとテキストボックスですね。

ちょっと広いから真ん中の方に狭くすると上も一緒についてくるのでなおかつ左の項目もそれに伴ってついてきてくれますのでレイアウトの作り方すごく楽なんですね。

こんな感じで整えていきたいと思います。

名前、会社名、役職は電話番号、会社ももうちょっと枠のサイズを変更したいときはまずクリックをしてオレンジのところの端をやって矢印が出るんでこうするとこう動きます。

下もそうですね矢印が出たところでこっちもそうですね。

電話番号カテゴリーは後でって書いてありましたね。

名刺もその局面でまた名刺画像あるのかないのか名刺画像登録されていればここにありって出て、登録されてなければなしと出ます。

これも名刺画像登録の局面で説明したいと思います。URL、会社のホームページですね。

あとは全体ちょっと薄いので黒にしたいと思います。

全部選択をして全景色この三点リーダーそうするとこの黒を選択してください。

あとはここの幅をうまく調整するとこんな感じでいいんじゃないですかね。

タイトルここはちょっとあれですね。ラベルは真ん中に寄せた方が見やすいかもですね。真ん中に寄せましょう。

もう一度デザイン、ラベルを全部選択します。

引っ掛けるだけで全部選択されるのでオレンジになると選択されています。

文字の配置、中央ってやるとこうなりますね。

あと枠もちょっとつけましょうか、ラベルについて枠をつけたいので境界線スタイル透明になってるやつを実践に書いてください。

これでどうでしょう。上書きしますね。もう一度ホームもはいこんな感じですね。こんな感じで出ます。

今日は実際にフォームを作ってその後のレイアウトを整えるというところをやりました。

次回はちょっとプロパティ関連ですね。ここら辺をちょっとやりたいと思います。

プロパティをちょっとやりたいと思いますのでレイアウトのところやり方を今回覚えてください。

第10回の説明は以上です。次回またお会いしましょう。ありがとうございました