WEB 最上部見出し HTML(PYTHON.400/QHTMLSRC.DSPTOP)

最終更新: 2025-11-28
0001.00 <!DOCTYPE html>                                                                    
0002.00 % import ibm_db2                                                                       
0003.00 <html lang="ja">                                                                   
0004.00   <head>                                                                           
0005.00     <meta charset="utf-8">                                                         
0006.00           <meta http-equiv="Content-Language" content="ja">                        
0007.00           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      
0008.00           <meta http-equiv="Pragma" content="no-cache">                            
0009.00           <meta http-equiv="cache-control" content="no-cache">                     
0010.00           <meta http-equiv="Expires" content="-1">                                 
0011.00           <meta http-equiv="X-UA-Compatible" content="IE=edge"/>                   
0012.00           <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
0013.00     <title>$TEXT</title>                                                       
0014.00     <style>                                                                        
0015.00     html {                                                                             
0016.00       font-family: "BIZ UPDGothic", Meiryo, sans-serif;                                
0017.00       accent-color: rgb(26, 115, 232);                                                 
0018.00       color: #555;                                                                     
0019.00       margin: 0;                                                                       
0020.00       box-sizing: border-box;                                                          
0021.00       height: 100%;                                                                    
0022.00     }                                                                                  
0023.00     body {                                                                             
0024.00       margin: 0;                       
0025.00       padding: 1em 4em 3em;            
0026.00       box-sizing: border-box;          
0027.00       height: 100%;                    
0028.00       display: flex;                   
0029.00       flex-direction: column;          
0030.00     }                                  
0031.00     header {                           
0032.00       flex: 0;                         
0033.00     }                                  
0034.00     footer {                           
0035.00       flex: 0;                         
0036.00     }                                  
0037.00     main {                             
0038.00       min-height: 0;                   
0039.00       flex: 1;                         
0040.00       overflow: auto;                  
0041.00     }                                  
0042.00     form {                             
0043.00       display: contents;               
0044.00     }                                  
0045.00     input {                            
0046.00       font-family: inherit;            
0047.00       font-size: inherit;              
0048.00       color: inherit;                            
0049.00     }                                            
0050.00     input:read-only {                            
0051.00       border-color: transparent;                 
0052.00     }                                            
0053.00     h1 {                                         
0054.00       font-size: 2.4em;                          
0055.00       font-weight: normal;                       
0056.00       color: #8888ff;                            
0057.00     }                                            
0058.00     fieldset {                                   
0059.00       display: grid;                             
0060.00       grid-template-columns: repeat(3, 20em);    
0061.00       gap: 0;                                    
0062.00       border: 0;                                 
0063.00       margin: 1em 0;                             
0064.00     }                                            
0065.00     .span-2 {                                    
0066.00       grid-column: span 2;                       
0067.00     }                                            
0068.00     .span-3 {                                    
0069.00       grid-column: span 3;                       
0070.00     }                                            
0071.00     label {                                      
0072.00       display: flex;                                
0073.00       align-items: baseline;                        
0074.00       gap: 0 0.7em;                                 
0075.00     }                                               
0076.00     .name {                                         
0077.00       flex: none;                                   
0078.00       width: 8em;                                   
0079.00     }                                               
0080.00     header .name::after,                            
0081.00     footer .name::after                             
0082.00     {                                               
0083.00       content: ':';                                 
0084.00     }                                               
0085.00     #record-table thead tr th {                     
0086.00       color: #333;                                  
0087.00       font-weight: normal;                          
0088.00       text-align: left;                             
0089.00       border-bottom: 2px solid hsl(220, 90%, 56%);  
0090.00     }                                               
0091.00     #record-table {                                 
0092.00       border-collapse: separate;                    
0093.00     }                                               
0094.00     #record-table th {                              
0095.00       padding-bottom: 0.75em;                       
0096.00       background-color: white;         
0097.00       position: sticky;                
0098.00       top: 0;                          
0099.00     }                                  
0100.00     header input {                     
0101.00       height: 0.8em;                   
0102.00     }                                  
0103.00     button > img {                   
0104.00       width: 1.2em;                    
0105.00       height: 1.2em;                   
0106.00       object-fit: contain;             
0107.00       vertical-align: text-bottom;     
0108.00       margin-right: 0.3em;             
0109.00     }                                  
0110.00     .dspmod {                          
0111.00       position: absolute;              
0112.00       top: 1em;                        
0113.00       right: 3em;                      
0114.00       font-size: 2.5em;                
0115.00       color: #8888ff;                  
0116.00     }                                  
0117.00     </style>                       
0118.00   </head>                          
0119.00   <body>                           
0120.00     <form action="/DSPDTA" method="post">                                                                             
0121.00       <header>                                                                                                        
0122.00         <h1>$TEXT</h1>                                                                                            
0123.00         <div class="buttons">                                                                                         
0124.00           <button type="submit" formaction="/end"><img src="/icon/END.SVG"> 終了 </button>                    
0125.00 % if dspmod == "CHGPTN":                                                                                                  
0126.00             <button type="submit" formaction="/update"><img src="/icon/UPDATE.SVG"> 更新 </button>            
0127.00             <button type="submit" formaction="/delete"><img src="/icon/DELETE.SVG"> 削除 </button>            
0128.00             <button type="submit" class="default" formaction="/init"><img src="/icon/BACK.SVG"> 戻る </button&g 
0129.00 % elif dspmod == "INPPTN":                                                                                                
0130.00             <button type="submit" formaction="/insert"><img src="/icon/UPDATE.SVG"> 更新 </button>            
0131.00             <button type="submit" class="default" formaction="/init"><img src="/icon/BACK.SVG"> 変更 </button&g 
0132.00 % else:                                                                                                                   
0133.00             <button type="submit" class="default" formaction="/init"><img src="/icon/BACK.SVG"> 戻る </button&g 
0134.00 % end                                                                                                                     
0135.00         </div>                                                                                                        
0136.00         <fieldset>                                                                                                    
0137.00           <!--  ヘッダー  -->                                                                                         
0138.00           <label class="span-3">                                                                                      
0139.00             <span class="name">$COLHDG</span>                                                                     
0140.00             <span class="value">                                                                                      
0141.00               <input type="text" name="$FLD" value="$VALUE"                                                             
0142.00                   size="$SIZE" maxlength="$FLDLEN"   {{"readonly" if dspmod == "DSPPTN" else ""}}$ALIGN>                
0143.00             </span>                                                                                                   
144.00           </label>                                     
145.00         </fieldset>                                    
146.00       </header>                                        
147.00       <!--  サブファイル  -->                          
148.00       <main>                                           
149.00 % if dspmod == 'DSPPTN':                                   
150.00         <div class="dspmod"> 表示 </div>           
151.00 % elif dspmod == 'CHGPTN:                                  
152.00         <div class="dspmod"> 変更 </div>           
153.00 % else:                                                    
154.00         <div class="dspmod"> 入力 </div>           
155.00 % end                                                      
156.00         <table id="record-table">                      
157.00           <thead>                                      
158.00             <tr>                                       
159.00               <th>                                     
160.00                 <span class="name">$COLHDG</span>  
161.00               </th>                                    
162.00             </tr>                                      
163.00           </thead>                                     
164.00           <tbody>                                      
165.00             %for value in values:                          

DSPTOPは伝票型式画面HTMLの最上部として使われるHTMLテンプレートです。

0013.00     <title>$TEXT</title> 

=> $TEXTはPYTHON適用業務のテキストに置換えられます。

0138.00           <label class="span-3">                                                                        
0139.00             <span class="name">$COLHDG</span>                                                       
0140.00             <span class="value">                                                                        
0141.00               <input type="text" name="$FLD" value="$VALUE"                                               
0142.00                   size="$SIZE" maxlength="$FLDLEN"   {{"readonly" if dspmod == "DSPPTN" else ""}}$ALIGN>  
0143.00             </span>                                                                                     

=>この部分が明細行の欄見出しとしてフィールドの数の分だけ生成されます。

$COLHDG = フィールド欄見出しに置換えます。
$FLD = フィールド名に置換えさます。
$FLDLEN = フィールド長に置換えます。
1$SIZE = フィールド長 + 1に置換えます。