フォームデザインを色々集めたサイト作った
Adobe CEPとか作ってるとフォームの実装が多いと思います。テキストボックスとかラジオボックス等。自分でいろいろ実装して使いまわす事なんかも多いのでフォーム関係の実装を一つのサイト（というかGit hub）に自分用に集めました。勿論たかがCEPです。ほとんどの人が自分自身でこういったフォームを作る必要性はあまり無いとえます。top coat、Adobe spectrumもしくはデフォルトの状態でも問題無いかもしれません。それでも自分でやりたいという方にも向けてGitHub、GitHubPageでサイトを公開しました。ただ今回React+styled-componentsで構築しているので普通のCSSとは少し異なるので気が向いたら個々に通常のCSSにして解説しようとは思います。今回は簡単なボタンの解説をします。
ボタン自体は押すと凹むように色が濃くなるシンプルなボタンです。React+styled-components+typescriptで作っているので少しわかりづらいかもしれませんがバニラjs,ピュアなjsしか触ったことがなくても多少はわかると思います。React+styled-componentだとcssもhtmlもjs内でまとめて記述するので全てのボタンの要素がこのjsのコードにまとめられています。人によっては違和感があるかもしれません。まずボタンのグリーンの色ですが変数化しています。stdGreenという変数ですね。ボタンのcss自体はStdButtonStyleの変数の中にまとめれています。デフォルトのボーダーを消すためのborder:none。フォーカスした時にボタンの周りに表示される青い色を非表示させたいので擬似要素で非表示にしています。
ここまでは大体お分かりかもしれませんが問題はcssの中にdarkenという見慣れないメソッドがあります。これはsassの時に実装された色管理用の関数で引数に渡した色の値を明度を濃くした値を返す関数です。styled-componentsだとpolishedという別途モジュールをインストールすることで使えます。話を戻してdarken関数ですが第一引数に数値を0~1の値で、第二引数には色の値（16進数でもrgbの値でも可）を渡すと第一引数の値に応じて明度の濃くなった色の値を返します。例えば以下の場合
変数stdGreenに代入されたrgb値の値を20%暗くした色の値を返します。そんためactive（ボタンが押された場合の時）にボタンの色が濃い状態になります。こういうメソッドは非常に使い勝手がいいのですが通常のCSSでは使えないのでstyled-components等を使わないはsassを使用して使った方が管理がやりやすくなるとは思います。簡単にstyled-componentsを解説したところで通常のcssとhtmlに書き直してみました。以下、sandBoxのページから確認できます。
今回簡単なボタンだったのでcssとhtmlに簡単に分解できました。もっと複雑なformになるとこうはいきません。次回以降もう少し深くcss sass styled-componentsについて突っ込もうかと思います。