HyperCardのボタンをCSSでそれっぽく再現
あまり実用性はありませんが、HyperCardのボタンをHTML/CSSでそれっぽく再現する試みです。
Button Name
Style
Font
FontSize
Auto Hilite
「チェックボックス」、「ラジオボタン」、「ポップアップ」はHTMLでは別要素なので割愛しました。「楕円」、「省略時設定」はやり方が思いつきません。
初期値は"Round Rect"でこんな感じ
<button style="color:black;background-color:white;border-color:black;border-style:solid;border-width:1px;border-radius:6px;box-shadow:1px 1px 0px black;">New Button</button>
見づらいので整理すると
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 6px;
box-shadow: 1px 1px 0px black
CSSの各値は次のとおり
| Transparent | Opaque | Rectangle | Round Rect | Shadow | Standard | |
|---|---|---|---|---|---|---|
| color | black | black | black | black | black | black |
| background-color | #00000000 | white | white | white | white | white |
| border-color | #00000000 | white | black | black | black | black |
| border-style | solid | solid | solid | solid | solid | solid |
| border-width | 1px | 1px | 1px | 1px | 1px | 1px |
| border-radius | 0px | 0px | 0px | 6px | 0px | 6px |
| box-shadow | 0px 0px | 0px 0px | 0px 0px | 1px 1px 0px black | 1px 1px 0px black | 0px 0px |
ご注意と補足
- Auto Hiliteはjavascriptで制御しています。
- フォントやサイズは任意にご指定ください。
- KrungthepやOsakaはMac用のフォントですので、できましたらMacでご覧ください。
- アイコンをつけることこんな感じになります。
公開中のスタック
本ブログはほぼ更新を停止しており、紹介した殆どのスタックが再現紹介を終了しています。画像だけでもお楽しみ頂けるかとは思いますが、やはり動作するスタックの方が楽しめるかと思いますので現在も公開できるスタックをまとめ、アクセスしやすくしました。
・再現紹介できるスタックは以下のとおりです。
古田様作品 「魔女入門書」「魔女入門書２」
大串様作品 「ぐるぐる女子高生」「長崎紀行」
細馬様作品 「Kuala lumpur」「Sagan」
掌田様作品 「10行ラジコン」
・新作スタックは以下のとおり
yodopk様作品 「ミサイル防衛システム」
「ぐるぐる女子高生」と「10行ラジコン」はブログ内のデスクトップでお楽しみいただけますが、それ以外は画面サイズの関係で別ウィンドウでお楽しみください。
