ブログデザイン備忘録 ~入力フォームのデザイン
1. 入力フォームのデザイン
前回の記事で設置した入力フォームのデザインについて今回は紹介したい。
2. ボタンのデザイン
以前HTMLとstyleの記述でボタンをデザインする方法を紹介したが、今回は<input>のボタンを利用してデザインを変更していく方法を紹介する。
まず、何もデザインを行わない場合は下のようなボタンになる。
<div><input type="button" value="ボタン"></div>
デザインを変更するには<input ～ style="～">のようにinputタグ内にstyleを記述すればよい
<div><input type="button" value="ボタン" style="cursor:pointer; width:160px;text-align:center;text-decoration:none;color:white;background:midnightblue;border:1px solid black;border-radius:5px;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);"></div>
単にリンク先に移動するようなボタンであれば、前回の記事のようにaタグにstyleを記述する<a href="リンク先" style="～">ボタン</a>で、それ以外の汎用処理をする場合、例えばポップアップを表示するなどはinputタグを用いるといった使い分けになると思う。
3. テキスト入力フォームのデザイン
ボタンと同様にテキスト入力についてもinputタグ内にstyleを記述していくことで、デザインを変更することができる。何もしない場合は下のようなテキスト入力窓となる。
<div><input type="text" placeholder="E-Mail"></div>
styleの記述により入力窓の枠、入力時の文字を変更した。またイベントハンドラoninputにより入力されたら枠を角丸・点線・シルバーから実線・青になるようにした。
<div><input class="text" type="textbox" placeholder="Email Address" style="color:green;border:2px dashed silver;border-radius:8px;" oninput="this.style.border='2px solid blue';"></div>
さらにアイコン(今回ははてなWebアイコン)*1 も加えることができる。<input ～ style="～"><i class="Webフォント名" style="～"></i>としてinputタグとiタグを並べてiタグのstyle内にmarginを設定して、入力窓内にアイコンが配置されるように調整する。入力時の入力開始位置を調整するために、input内でpadding-leftを使っている。
<div> <input type="text" placeholder="E-Mail" style="padding-left:30px;color:green;border:2px dashed silver;border-radius:8px;"oninput="this.style.border='2px solid blue';"><i class="blogicon-mail" style="position:relative;margin-left:-14.5em;color:silver"></i> </div>
4. プルダウンメニュー・リストメニュー
他の入力フォームとしては、前回取り上げなかったがプルダウンメニュー、リストメニューがある。
<select><option valeu=""></option></select>でプルダウンメニューが設置でき、それぞれの<option>内にstyleを記述する。例えば1行ごとに色を変えるには
<select name="文字" > <option value="A">A</option> <option value="B" style="background:lightblue;">B</option> <option value="C">C</option> <option value="D" style="background:lightblue;">D</option> <option value="E">E</option> </select>
リスト形式で表示するには<select size="リスト数">として以下は同じ。
<select name="文字" size="5" > <option value="A">A</option> <option value="B" style="background:lightblue;">B</option> <option value="C">C</option> <option value="D" style="background:lightblue;">D</option> <option value="E">E</option> </select>
5. その他
チェックボックスやラジオボタンはタグ内のstyleの記述ではあまり変更できるところがなく、チェックボックスやラジオボタンを設置してからCSSで非表示にして、デザインし直すという方法がとられている。(例えば CSSでラジオボタンとチェックボックスをデザインする - Qiita)。チェックボックスの疑似要素;checkedでチェックされたかどうかの判定に利用するためで、チェックボックスの機能を利用できるように一度設置、デザインは使わないので非表示となっていると思う。これをタグ内のstyle記述で実現しようとすると、:checkedと同等のイベントハンドラがないのでjavascriptで同じ処理になるように関数定義をする必要があり、かなり面倒ということが、いまのところわかってきた。（よい方法があれば今後続報で）
6. まとめ
今回はタグ内のstyleの記述でボタン、テキスト入力、プルダウンのデザイン変更方法を紹介した。
*1:Webフォント名は はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！参照
