NO.49 Windowsのデザインを再現①
Windowsのダイアログボックス・フォルダのようなデザインをHTMLタグだけで再現してみます。
うちのPCはだいぶデザインが標準とは違いますが、FORM部品はうまく作ればそれなりに仕上がります。
擬似的な機能を付けるのならJavaScript、デザインをもっと本物に近づけるのならCSSを使うのが良いですが、
今回は敢えてタグだけに絞って作ってみます。
幸いFORM部品の配色はWindowsのシステムカラーらしいので、結構作りやすいですよ。
*+* タスクマネージャを再現 *+*
Ctrl+Shift+ESCキーで出てくるアレです。
さすがにタブやメニューはタグだけでは無理ですが、プロセスリストなんかは比較的簡単にFORM部品で再現できますね。
要点・コツ
◆フォントは"ＭＳ Ｐゴシック"
◇枠は<fieldset>で囲う
◆そのまま<fieldset>を使うと横に伸びてしまうので、テーブル等の中に入れる。
<font face="ＭＳ Ｐゴシック"size=2> <table width=470 height=410 border=1 bordercolor=black> <tr bgcolor=darkblue spacing=0 padding=0><th width=460 height=16 align=left valign=center> <img src=temp/iruka.png width=15 height=15> <font color=white size=2>Windows タスクマネージャ</font></th> <th><button><font size=2>＿</font></button> <button><font size=2>□</font></button><button><font size=2>×</font></button></th> </tr> <tr><td colspan=2 bgcolor=silver><font size=2>ファイル(<u>F</u>) オプション(<u>O</u>) 表示(<u>V</u>) ヘルプ(<u>H</u>)</font></td></tr> <tr><td colspan=2> <fieldset> <legend>プロセス</legend> <center> <button><font size=1>イメージ名 </font></button> <button><font size=1> PID</font></button> <button><font size=1> CPU</font></button> <button><font size=1> CPU 時間</font></button> <button><font size=1> メモリ使用量</font></button> <select size=18> <option>System Idle Process 0 90 2:38:11 16 KB</option> <option>IEXPLORE.EXE 1384 00 0:07:10 19,876 KB</option> <option>blackbox.exe 1172 00 0:02:07 11,932 KB</option> <option>Jane2ch.exe 792 00 0:01:11 2,680 KB</option> <option>TeraPad.exe 1540 00 0:01:12 10,532 KB</option> <option>csrss.exe 168 00 0:01:04 2008 KB</option> <option>Sys.exe 8 01 0:00:50 240 KB</option> <option>MsnMsgr.exe 1380 00 0:00:41 9,236 KB</option> <option>materia.exe 1376 01 0:00:34 2,764 KB</option> <option>taskmgr.exe 1520 01 0:00:31 1,740 KB</option> <option>ashServ.exe 592 01 0:00:16 3,488 KB</option> <option>WinMgmt.exe 932 00 0:00:07 160 KB</option> <option>winlogon.exe 188 00 0:00:03 2,164 KB</option> <option>services.exe 216 00 0:00:02 2,500 KB</option> <option>ashWebSv.exe 856 00 0:00:02 2,560 KB</option> <option>NOTEPAD.EXE 1196 00 0:00:02 1,892 KB</option> <option>ashDisp.exe 1348 00 0:00:02 1,028 KB</option> <option>Madotate.exe 1132 00 0:00:02 1,208 KB</option> <option>ashMaiSv.exe 992 00 0:00:01 1,408 KB</option> <option>lsass.exe 228 00 0:00:01 572 KB</option> <option>svchost.exe 396 00 0:00:01 1428 KB</option> </select><br><br> <div align=right> <button>プロセスの終了 (<u>E</u>)</button> </div><br> </center> </fieldset> </td></tr> <tr> <td colspan=2> <table border=1> <tr><td> <font size=2>プロセス: 21 </font> </td> <td> <font size=2>CPU 使用率: 10% </font> </td> <td> <font size=2>メモリ使用量: 237848 KB/309596 KB </font> </td></tr></table> </td> </tr></table> </font>
Windows タスクマネージャ
＿
□
×
ファイル(
F
) オプション(
O
) 表示(
V
) ヘルプ(
H
)
プロセス
イメージ名
PID
CPU
CPU 時間
メモリ使用量
System Idle Process 0 90 2:38:11 16 KB
IEXPLORE.EXE 1384 00 0:07:10 19,876 KB
blackbox.exe 1172 00 0:02:07 11,932 KB
Jane2ch.exe 792 00 0:01:11 2,680 KB
TeraPad.exe 1540 00 0:01:12 10,532 KB
csrss.exe 168 00 0:01:04 2008 KB
Sys.exe 8 01 0:00:50 240 KB
MsnMsgr.exe 1380 00 0:00:41 9,236 KB
materia.exe 1376 01 0:00:34 2,764 KB
taskmgr.exe 1520 01 0:00:31 1,740 KB
ashServ.exe 592 01 0:00:16 3,488 KB
WinMgmt.exe 932 00 0:00:07 160 KB
winlogon.exe 188 00 0:00:03 2,164 KB
services.exe 216 00 0:00:02 2,500 KB
ashWebSv.exe 856 00 0:00:02 2,560 KB
NOTEPAD.EXE 1196 00 0:00:02 1,892 KB
ashDisp.exe 1348 00 0:00:02 1,028 KB
Madotate.exe 1132 00 0:00:02 1,208 KB
ashMaiSv.exe 992 00 0:00:01 1,408 KB
lsass.exe 228 00 0:00:01 572 KB
svchost.exe 396 00 0:00:01 1428 KB
プロセスの終了 (
E
)
プロセス: 21
CPU 使用率: 10%
メモリ使用量: 237848 KB/309596 KB
何か作ってから凄く後悔しました・・・
前に戻る
次に進む
SEO
掲示板
[PR]
爆速!無料ブログ
無料ホームページ開設
無料ライブ放送
Windows タスクマネージャ