スーパーセントウです！
回収率計算機のリニューアルについて書きます。
大幅なデザイン変更をしました。
←旧 新→
変更点と方法を１つずつ書いていきます。
１．inputにNullが入力された場合の対応
デザインうんぬんの前にずっとやりたかったことはこれです。
旧を見てもらうとわかりますが、0を初期表示しています。
これはnull値の場合計算エラーになってしまうからでした。
虚弱な仕様ですね(笑)
この0のおかげでとにかく入力がやりにくい・・・。
そんな悩みをついに解決しました。
参考にさせてもらった資料はQiitaの以下です。
javascript側で
a[0] = document.form3.txtA0.value;
と受けているのですが、
if (!(document.form3.txtA0.value)) {
a[0] = 0;
}
このようにnull値の場合のチェックを加えました。
リニューアル当初やりたかったことはここまでです。
ここからはデザインの変更についてです。
２．タイトルフォントの統一
枠の神様はじめ他にもよく使っている
に統一しました。
若干無機質になった印象です。
３．ボタンをCSSでデザイン
回収率計算機におけるボタンは３つ。
・ファイルアップロードボタン（input type=”file”）
・計算ボタン（input type=”image”）
・ファイルダウンロードボタン（input type=”image”）
下部の２つは画像に置き換えているのでいいとして、
ファイルアップロードボタンは直接デザイン変更することができない仕様とのことで、
初期表示させていました。
これがとにかください(笑)
３－１．input type=”file”のデザイン
参考にさせてもらったページは以下です。
input type=”file”のボタンデザインを変更する方法
つまり、inputタグを非表示（style=”display:none;”）し、
labelタグでラベル化してしまうという手法ですね。
旧との違いはこうすることで選択したファイルのファイル名を表示させる
機能がなくなったことです。
表示するやり方もjavascriptを追加すればできそうでしたが、
いったんここまでとしました。
３－２．input type=”button”のデザイン
上を変更したら画像だった下部のボタンと雰囲気がことなってしまったので、
imageをbuttonに変更し、要領はfileのときと同様にlabelで囲ってCSSでデザインしました。
ダウンロードボタンのほうはダウンロード機能のために
<a>タグを利用しているので直接<a>タグにCSSでデザインしました。
４．tabelをCSSでデザイン
どんなに色を変更してもダサい感じだったのは表ですね。
参考にさせてもらったページは以下です。
レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS]
個人的好みで横の罫線のみにしました。
欧米では縦の罫線を引かないとか噂で聞きましたが、
本当なのでしょうか？
５．色をグリーン調に変更
最後に色をシンプルに変えました。
あまり色を使いすぎないのがかっこいいと昨年学びました。
（デザイン系のお仕事の方から）
カラーパレットによく使わせていただいている
を利用し、もともと緑っぽいページだったので、
引き継いだような、もはや別物なような・・・
かっこよくなりました！
多少使いやすくなったと思いますので、
誰かの役に立てたら幸いです。
※webページですが、一応スマホでも使えます。
p.s 回収率レースのために作ったのにレースする機会が・・・
[ad#co-1]