パソコンを便利に！！

前回記事までで、思いつく機能はすべて盛り込めました。
　　↓
　数値入力ボックスでIMEを半角入力モードにする／ブログでJavaScriptで計算

今回は、計算フォームの見た目を整えます。
具体的には、ボタンや計算結果の表示スペースのデザインを変えて、ボタンを横に並べたりといった感じです。
ただし、スマホで見ると画面からはみ出したりして酷い状態です。
このブログでは、スマホ版ではCSSが使えないためです。
このブログ（ファンブログ）でスマホ版のCSSが使えることが分かったので、パソコン版と同じCSSを設定しました。

見た目を整えた計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。

前回の計算フォームと比べていただけると、違いが分かると思いますが、以下の点を変えています。
・入力ボックスの幅
・計算結果表示ボックスの幅と色
・各ボタンのデザイン
・計算ボタンとクリアボタンの配置
・計算結果のラベル・数値・コピーボタンの配置
・3桁区切りのない計算結果を非表示に

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV6">
  Ａ：<input class="inputbox1" type="tel" name="a" value="">
  Ｂ：<input class="inputbox1" type="tel" name="b" value="">

<table>
  <tr>
    <td><input class="keisanbutton" type="button" name="keisan" value="計算" onClick="calTasuKakeruV6();"></td>
    <td><input class="keisanbutton" type="reset" name="reset" value="クリア"></td>
  </tr>
</table>

<table>
  <tr>
    <td align="right">Ａ＋Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans1" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy1V6();"></td>
    <td><input class="inputbox3" type="text" id="ans1a" value=""></td>
  </tr>
  <tr>
    <td align="right">Ａ×Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans2" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy2V6();"></td>
    <td><input class="inputbox3" type="text" id="ans2a" value=""></td>
  </tr>
</table>

</form>

赤色・青色・緑色部分が、今回主に変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

１）［計算］ボタンと［クリア］ボタンを横に並べる
ラベル・入力ボックス・ボタンといった各要素を横に整った状態で並べたいときは、<table> タグを使います。
上の例では青色にした部分が <table> タグで、２つの <table> を使っています。
1つ目の <table> で、［計算］ボタンと［クリア］ボタンを横に並べています。
分かりやすくするため、この <table> をシンプルに表すと下のような構造になり、実際のコードでは、�@部分に［計算］ボタンのコード、�A部分に［クリア］ボタンのコードが入っています。

<table>
  <tr>
    <td> �@ </td>
    <td> �A </td>
  </tr>
</table>

２）計算結果部分を横に並べる
２つ目の <table> で、計算結果部分（ラベル・計算結果・コピーボタン・コピー用計算結果）を、2行に分けて横に並べています。
この <table> を簡単に表すと下のようになります。

<table>
  <tr>
    <td> �@ </td><td> �A </td><td> �B </td><td> �C </td>
  </tr>
  <tr>
    <td> �D </td><td> �E </td><td> �F </td><td> �G </td>
  </tr>
</table>

�@〜�CはＡ＋Ｂの計算結果部分が、それぞれ次のように入っています。
　�@：ラベル（Ａ＋Ｂ）
　�A：計算結果（3桁区切りあり）
　�B：計算結果コピーボタン
　�C：計算結果（3桁区切りなし）※ただし非表示
Ａ×Ｂの計算結果も同じように、�D〜�Gに入っています。
�@と�Dのラベルは、右寄せにした方が上下で揃って見えるので、align="right" を入れて右寄せにしています。

３）ボタンのデザイン
ボタンのデザインは、CSSで下のように書いて、計算フォームの中の各ボタンのコードで
class="keisanbutton" で呼び出しています。

/* ▼ 計算ボタン ▼ */
.keisanbutton {
  width: auto;
  text-align: center;
  display: block;
  padding: 2px 5px 2px 5px;
  background: #F3F2F2;
  border: 1px solid;
  border-radius: 5px
}
/* ▲ 計算ボタン ▲ */

ボタンのデザインを設定するCSSは、「ボタン　CSS」みたいな言葉でネット検索すると、いろいろなデザインのボタンのCSSが見つかるので、この中から気に入ったものをコピーして使うのがいいと思います。
私もどこかで見つけて、色を変えるなど少し編集して使っています。
ちゃんと理解しきれていない部分もありますが、簡単に説明しておきます。

a) 最初と最後の /* と */ で挟んだ部分はコメントで、CSSとして機能しないメモとして使います。
/* と */ が逆になっているのを間違えないように。

b) .keisanbutton { と } の間にデザインの設定を書きます。
計算フォーム側でそのデザインを呼び出す class="keisanbutton" と同じ名前にします。

c) width: auto; は、ボタンの幅を、ボタンに表示する名称に合わせて自動で設定するものです。

d) text-align: center; は、ボタンに表示する名称をボタンの中心に配置します。

e) display: block; は、ブロックレベル要素にするというもので、意味が分かりづらいですが、ブロックレベル要素にすることで、要素同士が改行されて縦に配置され、余白などを設定できるようになります。

f) padding: 2px 5px 2px 5px; でボタンの文字の周囲の余白を設定しています。
左から順に、上・右・下・左の余白です。

g) background: #F3F2F2; でボタンの色を設定しています。

h) border: 1px solid; でボタンの枠線の太さと種類を設定しています。

i) border-radius: 5px は、ボタンの4隅の面取りです。
5pxを大きくすると面取りが大きくなり、小さくすると面取りが小さくなります。
ちなみに、各行の最後のセミコロン（ ; ）は、複数の設定をするときの区切りなので、最後の行には不要です。
（付いていても、機能しますが）

それぞれの設定値を調べたいときは、「CSS　padding」みたいにネット検索すると、情報が見つかると思います。

４）入力ボックスのデザイン
入力ボックスのデザインは、CSSで下のように書いて、計算フォームの中の各入力ボックスのコードで
class="inputbox1" で呼び出しています。

/* ▼ inputbox(数値入力) ▼ */
.inputbox1 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#FFFFFF;
  border: 1px solid
}
/* ▲ inputbox(数値入力) ▲ */

デザインとして設定している内容は、ボタンと大して変わらないので説明を省きますが、text-align: で数字を右寄せで表示して、padding: で右の余白を 5px にして、数字が右の枠から少し離れるようにしています。
また、標準のままだと文字が少し小さいので、font-size:16px; で少し大きくしています。

５）計算結果ボックス（3桁区切りカンマあり）のデザイン
計算結果ボックス（3桁区切りカンマあり）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックスのコードで class="inputbox2" で呼び出しています。

/* ▼ inputbox(計算結果) ▼ */
.inputbox2 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#F0F0F0;
  border: 1px solid
}
/* ▲ inputbox(計算結果) ▲ */

こちらも、設定している内容は入力ボックスとあまり違わないので、説明を省略しますが、ボックス内の色を background:#F0F0F0; にして、入力する部分と違う色にしています。

６）計算結果ボックス（3桁区切りカンマなし）のデザイン
計算結果ボックス（3桁区切りカンマなし）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックス（3桁区切りカンマなし）のコードで class="inputbox3" で呼び出しています。

/* ▼ inputbox(計算結果非表示) ▼ */
.inputbox3 {
  width: 100px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 0px none
}
/* ▲ inputbox(計算結果非表示) ▲ */

こちらは、画面上に表示されないようにするため、文字とボックス内の色を、ブログの背景色と同じ白（#FFFFFF）で表示するようにしています。
背景色と同じ色にして何もないように見せているわけで、その部分をマウスでドラッグして範囲選択すると、色が反転するので、計算結果が見えます。
なお、スマホ版では表示幅が足りなくなるため、ここの width: 100px; を width: 10px;にして幅が収まるようにしています。
それ以外は、スマホ版のCSSもパソコン版と同じにしています。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV6()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV6.a.value - 0;
  inputValueB = document.calformTasuKakeruV6.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV6.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV6.ans2.value = ans2.toLocaleString();
  document.calformTasuKakeruV6.ans1a.value = ans1;
  document.calformTasuKakeruV6.ans2a.value = ans2;
}
// 計算結果をコピー
function AnsCopy1V6() {
    var copyTarget = document.getElementById("ans1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
function AnsCopy2V6() {
    var copyTarget = document.getElementById("ans2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
</script>

赤色部分が、今回変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

また、計算結果コピー用の3桁区切りカンマなしの数値は見えないようにしたため、最後の行の copyTarget.remove(); でその数値を削除するのをやめて、代わりに copyTarget.blur(); として、コピーのためにその数値を選択した状態を解除しています。
remove(); で数値を削除すると、コピー対象がなくなるので、選択した状態も解除できて、画面上ではその部分に何も表示されないのでいいのですが、コピーしたあとで、もう一度その数値をコピーしたい場合もあるので、できれば数値は削除しない方がいいです。
そこで、コピー対象を削除しないで、単にフォーカスを外す blur(); に変更したというわけです。

その他

今回 CSS を使ってデザインを変えた部分は、計算フォームの HTML コードに直接書いて設定することもできますが、CSS を使っておけば、後で少しデザインを変えたいといったときに、同じデザインを使った部分は CSS の変更だけで済みます。
できるだけ CSSで設定しておいた方がいいです。