こんにちは、ハマです。

気温が一気に上がり、連日の日差しに気力もジリジリと焼かれていくような今日この頃。

1週間分買い溜めしたはずのアイスも、2日と持たず無くなってしまいました。生活費に「アイス代」を考えないといけない季節ですね。

今回はスマホサイトの入力項目を、CSSで綺麗に見せる方法を紹介します。

『テキストボックス』を綺麗に見せるには

テキストボックスは十分な余白をとって、全体に余裕のある配置をすると、モダン・デザインのような雰囲気になります。圧迫感がなくなり、入力にも余裕ができます。ポイントはセレクタの指定です。

input[type="text"] {
}

のように指定すると、type=”text”が指定されたinputタグに対してのみCSSが反映されます。

入力不可(disabled)の場合は見た目を変えることで、入力できないことを視覚的に伝えられ、ユーザビリティ改善に繋がります。

input[type="text"]:disabled {
}

セレクタに疑似クラス:disabledを使用することで、入力不可の場合のみ、CSSが反映されるようになります。

デフォルト(Nexus 5 chrome)

efo-textbox_001

CSS適用

efo-textbox_002

CSS

input[type="text"] {
 line-height: 1;
 padding: 0.4em 0.6em;
 border: 1px solid #999;
 border-radius: 0.8em;
 letter-spacing: 1px;
 box-shadow: inset 0.2em 0.2em 0.2em #ccc;
 background-color: #fff;
 font-size: inherit;
}

input[type="text"]:disabled {
 background-color: #eee;
 box-shadow: none;
}

『ラジオボタン』を綺麗に見せるには

対応ブラウザが少ないのでベンダープレフィックスを付けます。

-webkit-appearance: none;

「appearance: none」はデフォルトスタイルを無効にするCSSです。

グラデーションや角丸の装飾で綺麗に飾りましょう。
カオツ氏の過去の記事でも紹介していますので、ぜひご参照ください。

ラジオボタンの「on」と「off」の見た目の差を付けるのであれば、セレクタに疑似クラス:checkedを付ければ、「on」にした時だけに効くCSSを作れます。

グラデーションの付け方次第で、出っ張って見えたり、くぼんで見えたりします。

ボタンは説明がなくてもボタンと理解できるような見た目である事が大切です。また、「on」と「off」の違いも分かるようにしないといけません。

疑似要素:beforeを使って黒丸などの修飾ができます。

疑似要素:beforeと:afterは、形や位置を調整することで要素の修飾に使うことができます。

デフォルト(Nexus 5 chrome)

efo-radiobutton_001

CSS適用

efo-radiobutton_002

CSS

input[type="radio"] {
 -webkit-appearance: none;
 appearance: none;
 width: 2em;
 height: 2em;
 border: 1px solid #999;
 border-radius: 50%;
 background-color: #fff;
 background-image: linear-gradient(#fff, #aaa);
 font-size: inherit;
}

input[type="radio"]:checked {
 background-image: linear-gradient(#aaa, #fff);
 position: relative;
}

input[type="radio"]:checked:before {
 content: "";
 display: block;
 width: 50%;
 height: 50%;
 background-color: #333;
 border-radius: 50%;
 box-shadow: 0.1em 0.1em 0.2em #999;
 position: absolute;
 left: 25%;
 top: 25%;
}

input[type="radio"]:disabled {
 background-color: #aaa;
 background-image: none;
}

input[type="radio"]:disabled:checked:before {
 background-color: #666;
 box-shadow: none;
}

『チェックボックス』を綺麗に見せるには

チェックボックスのポイントは、ラジオボタンとほぼ同じです。
色を付けてページデザインに合わせる事で、整ったデザインを演出できます。

デフォルト

efo-checkbox_01

CSS適用

efo-checkbox_002

見やすく、入力しやすいサイトを目指そう

端末やブラウザによっては、CSSで味付けしなければ表示が小さく、とても入力しづらい場合があります。特に、スマートフォンではその傾向が顕著なので、ページを工夫して入力しやすいフォームにしたいですね。