2012年01月30日

スタイルシートで電卓をデザイン

スポンサード リンク

 <table>要素と <input>要素の text,button属性 で作成

 電卓本体は<table>で、計算表示ボックスは<input type="text">で
入力ボタンは<input type="button">で作り、それぞれ
スタイルシートで装飾しています。
 *デザインだけです。動作はしません!!

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>スタイルシートで電卓をデザイン</title>
 <style type="text/css">
<!--
#outDiv{ position: relative ; /* 相対配置 */
      }

.calTbc{  /* 電卓本体 */
   background-color: #c5f1fe; /* 背景色 */
   border-style: solid;  /* 枠線 実線 */
   border-width: 2px 6px 6px 2px; /* 枠線 幅 上,右,下,左 */
   border-color: #7e7e7e #a9a9a9; /* 枠線 色 上下,左右 */
   -moz-border-radius: 10px; /* 角丸 Firefox */
   -webkit-border-radius: 10px; /* 角丸 Safari、Google Chrome */
   border-radius: 10px; /* 角丸 IE9 */
   font-size: 16px; /* 文字のサイズ */
     }

.calTbc input{ /* 数値、演算子ボタン */
  width: 55px; /* ボタンの幅 */
  color: #ffffff; /* 文字の色 */
  background-color: #0000cd;
  text-align: center; /* 文字の水平位置 */
  border-width: 3px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px; 
  font-size: 1em;
  font-weight: bold; /* 文字の太さ */
  cursor: pointer; /* カーソルの形状 */
    }

.calTbc #dispBox{ /* 表示ボックス */
  width: 165px;
  color: navy;
  background-color: #ffffda;
 padding-right: 3px;/* 内側余白 */
  margin-left: 3px;
  text-align: right;
  border: 7px #a9a9a9 inset;
  font-size: 1.3em;
  font-weight: bold;
  ime-mode: inactive; /* 入力モード切替 半角,英数 */
    }

.calTbc td{
  padding: 0px 0px 5px 5px; /* 内側余白 上,右,下,左*/
    }

.calTbc th{
  padding: 5px 4px; /* 内側余白 上下,左右*/
    }

.calTbc #aC{ /* ACボタン */
  color: white;
  background-color: #cc0000;
  margin-right: 4px;
    }

.calTbc input[type=button]:hover, 
.calTbc #aC:hover{ /* ボタンにマウスが乗ったら背景色変更 */
   background-color: #20b2a1;
    }

input[type="button"]::-moz-focus-inner{ /* Firefoxのボタンの点線を消す */
   border :0px;
    }

#opeBox{ /* 演算子表示 ボックス */
  width: 15px;
  height: 20px;
  position : absolute;
  top: 16px;
  left: 19px;
  font-weight: bold;
  text-align: center;
  color: #ff00ff;
  font-size: 1.5em;
    }
-->
</style>
</head>
<body>
<div style="position : relative;">
<table border="0" class="calTbc" cellpadding="0">
 <tbody>
  <tr>
    <th colspan="3"><input type="text" value="0" id="dispBox" title="計算表示ボックス"></th>
    <th><input type="button" value="AC" id="aC" title="すべてクリア"></th>
  </tr>
  <tr>
   <td><input type="button" value="7"></td>
   <td><input type="button" value="8"></td>
   <td><input type="button" value="9"></td>
   <td><input type="button" value="÷"></td>
  </tr>
  <tr>
   <td><input type="button" value="4"></td>
   <td><input type="button" value="5"></td>
   <td><input type="button" value="6"></td>
   <td><input type="button" value="×"></td>
  </tr>
  <tr>
   <td><input type="button" value="1"></td>
   <td><input type="button" value="2"></td>
   <td><input type="button" value="3"></td>
   <td><input type="button" value="−"></td>
  </tr>
  <tr>
   <td><input type="button" value="0"></td>
   <td><input type="button" value=" ."></td>
   <td><input type="button" value="=" title="計算 実行"></td>
   <td><input type="button" value="+"></td>
  </tr>
  <tr>
   <td colspan="3" style="text-align : center;">
<a href="http://javascript123.seesaa.net/" target="_blank">javascript123</a></td>
<td><input type="button" value="BS" title="右から一文字消去"></td>
  </tr>
</tbody>
</table>
<div id="opeBox">+</div>
</div>
</body>
</html>
一行テキストボックス
 <input type="text" value="テキストボックス">
type属性の値に"text"を設定すると一行テキスト入力ボックスが作成できます。
valueは入力ボックスに表示する初期値です。ボックスの装飾はスタイルシートで
指定しています。
汎用ボタン
 <input type="button" value="ボタン" onclick="Javascript:alert(this.value)">
type属性の値に"button"を設定すると汎用ボタンが作成できます。
valueはボタンに表示するテキストです。onClickイベントで
スクリプトを作動させるときに、よく使用します。
Firefoxでボタンの点線を消す
button  Firefoxではボタンをクリックするとこのような囲み点線が現れます。
 これを消去するスタイルシートです。

Firefoxのボタンの囲み点線を消去。
input[type="button"]::-moz-focus-inner{
border :0px;
}

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
テーブル
全角/半角 MS-IMEの入力モードの切り替え imeMode
テキストボックス
ボタン
text-align プロパティ
background 背景に関するプロパティ 一覧
borderプロパティ
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
CSS3 を使って角丸コーナーを表現する方法 IE9
paddingプロパティ  ボックスの内側の余白
CSS positionプロパティ
カラーコード 色見本



posted by javaScript at 16:36 | 大阪 ☀ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。