ホーム‎ > ‎Magic xpa‎ > ‎Magic xpa 新連載概要‎ > ‎

第151回 WebClient のオーバレイウィンドウをカスタマイズする(2)

2020/10/05 1:20 に Masanobu Tanda が投稿   [ 2020/10/05 1:25 に更新しました ]
2020年9月30日

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

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

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

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

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

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

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

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

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

(以降、本編に続きます。本編ご購読のお申込みはこちらです)

第151回(2020年9月30日号)目次

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