NO.96 Windowsのデザインを再現 for CSS
前に
NO.49 Windowsのデザインを再現
にてHTMLタグでの再現を試みましたが、
今回はCSSも加わるので、見た目だけならかなり近づける事が可能だと思われます。
例
◆HEAD内の記述
<style type="text/css"> <!-- .BD{border:groove white 2px;padding:1px;width:501px;} .WIN{background-color:#bbbbff;width:500px;height:380px;border:solid darkblue 1px; font-size:13px;font-family:"ＭＳ Ｐゴシック";} .TL{padding:3px 0px;background-color:darkblue;color:white;} .AI{width:15px;height:15px;} .BT{width:16px;height:16px;padding:0px;float:right;margin:1px; font-size:10px;font-weight:bold;font-family:Arial;} .BT2{width:16px;height:16px;padding:0px;float:right;margin:1px; font-size:7px;font-weight:bold;font-family:Arial;} .MN{background-color:cccccc;height:18px;clear:all;} .M{padding:4px;margin:2px;} .IT{width:498px;height:320px;background-color:#c6c3c6; border-left:3px white solid;border-top:3px white solid; border-right:3px #888888 solid;border-bottom:3px #888888 solid;} .FL1{margin:6px;padding:5px;padding-top:2px;background-color:#c6c3c6;width:480px;height:35px; border-left:2px #888888 solid;border-top:2px #888888 solid; border-right:2px white solid;border-bottom:2px white solid;} .CW{width:40px;height:25px;padding:1px;color:red;font-size:23px;font-weight:bold;font-family:"ＭＳ Ｐ明朝"; background-color:black;border-left:1px #888888 solid;border-top:1px #888888 solid; border-right:1px white solid;border-bottom:1px white solid;} .BT3{width:100px;border-left:2px white solid;border-top:2px white solid; border-right:2px #888888 solid;border-bottom:2px #888888 solid;width:25px;height:25px;} .FL2{width:480px;height:260px;margin:6px;padding:5px;padding-top:2px;background-color:#c6c3c6; border-left:3px #888888 solid;border-top:3px #888888 solid; border-right:3px white solid;border-bottom:3px white solid;} .W0,.W{width:16px;height:16px;border-left:2px white solid;border-top:2px white solid; border-right:2px #888888 solid;border-bottom:2px #888888 solid;font-size:1px;} .D,.W1,.W2,.W3,.W4{font-size:14px;font-weight:bold;padding:0px;text-align:center; border-right:solid gray 1px;border-bottom:solid gray 1px;}.IY{width:10px;height:10px;} .W0{padding:0px;text-align:center;}.W1{color:blue;}.W2{color:green;}.W3{color:red;}.W4{color:darkblue;} --> </style>
◆BODY内の記述
<div class=BD> <div class=WIN> <input type=button class=BT value="×"><input type=button class=BT value="□"> <input type=button class=BT2 value="＿"> <div class=TL><img src=temp/iruka.png class=AI align=left> マインスイーパ</div> <div class=MN><span class=M>ゲーム(<u>G</u>)</span><span class=M>ヘルプ(<u>H</u>)</span></div> <div class=IT><div class=FL1> <table border=0 align=center width=100%> <tr></tr> <td align=left><span class=CW>007</span></td> <td align=center><input type=image src=temp/iruka.png class=BT3></td> <td align=right><span class=CW>145</span></td> </tr></table></div> <table class=FL2 cellpadding=0 cellspacing=0> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W2>２</td> <td class=W1>１</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W3>３</td><td class=W3>３</td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W3>３</td><td class=W1>１</td><td class=W1>１</td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W2>２</td> <td class=W1>１</td><td class=W1>１</td><td class=W1>１</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W> </td><td class=W> </td><td class=W1>１</td><td class=W2>２</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W2>２</td><td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W4>４</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W3>３</td> <td class=W0><img src=temp/iruka.png class=IY></td> <td class=W1>１</td><td class=D> </td><td class=D> </td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W> </td><td class=W> </td><td class=W2>２</td><td class=W1>１</td><td class=W1>１</td> <td class=W1>１</td><td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W1>１</td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W2>２</td><td class=W1>１</td><td class=W2>２</td><td class=W1>１</td> <td class=W1>１</td><td class=D> </td><td class=W1>１</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W> </td><td class=W> </td><td class=W1>１</td><td class=D> </td><td class=D> </td> <td class=D> </td><td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W3>３</td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W2>２</td><td class=D> </td><td class=D> </td><td class=D> </td> <td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W1>１</td><td class=D> </td><td class=D> </td> <td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W3>３</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W2>２</td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W1>１</td><td class=D> </td><td class=W1>１</td><td class=W1>１</td> <td class=W1>１</td><td class=D> </td><td class=W1>１</td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W1>１</td><td class=D> </td><td class=D> </td> <td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W2>２</td><td class=D> </td><td class=W1>１</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W1>１</td><td class=D> </td><td class=D> </td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W1>１</td><td class=D> </td><td class=D> </td> <td class=D> </td><td class=W1>１</td><td class=W2>２</td><td class=W3>３</td><td class=W3>３</td> <td class=W3>３</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W3> </td><td class=W3>３</td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W1>１</td><td class=D> </td><td class=W1>１</td><td class=W2>２</td> <td class=W3>３</td><td class=W2>２</td><td class=W1>１</td><td class=W1>１</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W2>２</td><td class=W1>１</td><td class=W1>１</td> <td class=W2>２</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W2>２</td><td class=W2>２</td> <td class=W2>２</td><td class=W2>２</td><td class=W1>１</td><td class=W1>１</td><td class=W1>１</td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W1>１</td><td class=W1>１</td><td class=W1>１</td><td class=W2>２</td> <td class=W> </td><td class=W> </td><td class=W2>２</td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W2>２</td><td class=W3>３</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W0><img src=temp/iruka.png class=IY></td><td class=W1>１</td><td class=W1>１</td><td class=W1>１</td><td class=W3>３</td> <td class=W> </td><td class=W3>３</td><td class=W1>１</td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W1>１</td> <td class=W2>２</td><td class=W2>２</td><td class=W1>１</td><td class=W2>２</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W3>３</td><td class=W1>１</td><td class=W1>１</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W2>２</td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W3>３</td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W2>２</td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W2>２</td> <td class=W1>１</td><td class=D> </td><td class=D> </td><td class=W1>１</td><td class=W2>２</td> <td class=W2>２</td><td class=W2>２</td><td class=W2>２</td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W2>２</td><td class=W1>１</td><td class=W2>２</td><td class=W1>１</td><td class=W2>２</td> <td class=W0><img src=temp/iruka.png class=IY></td><td class=W2>２</td><td class=W0><img src=temp/iruka.png class=IY></td> <td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W3>３</td> <td class=W2>２</td><td class=W0><img src=temp/iruka.png class=IY></td><td class=W2>２</td> <td class=W0><img src=temp/iruka.png class=IY></td><td class=W2>２</td> <td class=W1>１</td><td class=W2>２</td><td class=W1>１</td><td class=W3>３</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> <tr> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W1> </td> <td class=W1>１</td><td class=W1>１</td><td class=W2>２</td><td class=W1>１</td><td class=W1>１</td> <td class=D><img src=temp/iruka.png class=IY></td><td class=D><img src=temp/iruka.png class=IY></td> <td class=D><img src=temp/iruka.png class=IY></td><td class=W2>２</td><td class=W> </td> <td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td><td class=W> </td> </tr> </table> </div></div></div>
◆実行例
マインスイーパ
ゲーム(
G
)
ヘルプ(
H
)
007
145
２
１
３
３
３
３
１
１
２
２
１
１
１
３
１
２
２
１
２
４
３
１
３
２
１
１
１
１
１
２
１
２
１
１
１
３
１
１
３
２
１
１
１
３
２
１
１
１
１
１
２
１
１
２
１
１
２
１
１
２
３
３
３
３
３
１
１
２
３
２
１
１
２
１
１
２
３
２
２
２
２
１
１
１
１
１
１
２
２
２
３
１
１
１
３
３
１
１
２
２
１
２
３
１
１
２
３
２
２
１
１
２
２
２
２
２
２
１
２
１
２
２
２
３
２
２
２
１
２
１
３
１
１
２
１
１
２
前に戻る
次に進む
SEO
掲示板
[PR]
爆速!無料ブログ
無料ホームページ開設
無料ライブ放送
