【Magic xpa 連載最新号のご案内】 2020年10月5日

Magic xpa の連載、「Magic xpa で作るイベントドリブン型プログラム」の第151回目、「WebClient のオーバレイウィンドウをカスタマイズする（2）」を連載コーナーにアップいたしました。

http://www.tandacomp.com/home/magic/columns/

前号では、オーバレイウインドウの四隅を角丸にし、タイトル部分のバランスと配色を調整するところまでを学習しました（画面1）。

画面1　前号までの途中完成図

ここまでで、下記の6項目の課題のうち、1番と2番が完成したことになります。

　1. オーバレイの四隅が角ばっており、オーバレイらしくない。
　2. 見出しタイトル領域が狭く、コントロールのバランスが悪い。
　3. 項目タイトルと項目データに段差があり、見づらい。
　4. 項目タイトルの左側に余白がない。
　5. 終了ボタンが左寄せであり、左側に余白がない。
　6. 背景の色が濃すぎて、親タスクのデータがよく見えない。

今回はその続きとして、3番から6番までの課題である、「項目データの表示バランス」と「終了ボタンの位置の調整」、および「背景の透明度を変更する方法」を学びます。

6項目の全ての課題の修正が完了すると、完成図は画面2のようになります。

画面2　6項目の課題の完成図

なお、ここで学ぶ修正手順は、ただ単にこの1画面を修正するだけの解説にとどまらず、汎用的な修正手順のコツをつかんでいただくことに重点を置いています。したがって、そのコツを習得された暁には、ほとんど自由自在にレイアウトを調整していく能力が身に付くことが期待できます。

もちろん今回の修正も前回と同様、ソースコードとなる HTML や TypeScript には一切の手を触れず、簡単な CSS の追記だけで作業を進めていきます。追加する CSS はわずか数行で、その場で暗記できる内容の記述ばかりです（後略）。

次回は、「さくらインターネット上に Windows インスタンスを作る」をお送りします。

目次

1 残り4項目の課題の修正
2 HTMLやTypeScript には手を触れない
3 前号の最終画面の確認
4 項目タイトルと項目データの段差の解除
5 項目タイトルの余白設定
6 項目タイトルの余白設定の変更確認
7 終了ボタンの配置の変更
8 ボタンの配置を司るスタイルを探す
9 モーダルウィンドウのスタイルまで遡る
10 ブロックレベル要素内の特定のスタイル
11 CSS セレクタの使用
12 終了ボタンの配置変更確認
13 「×」ボタンの配置の再考
14 オーバーレイの背景の透明度の変更
15 カラーパレットで試行錯誤して設定
16 スタイルが反映されないことへの対処

皆様のお越しをお待ちいたしております。

タンダコンピュータ 丹田 昌信
〒454-0911 名古屋市中川区高畑 5-34-5-1F
http://www.tandacomp.com/ （タンダコンピュータ）