AndroidやiOSのブラウザではCSS3で定義されるような新しい表現に対応して、画像を使わずとも、HTMLを様々に飾り付けることができるようになりました。
しかし、素のままだとフォームボタンにCSSのプロパティを設定してもデザインが適用されません。iOSではデフォルトでかっこいいボタンが表示されるみたいですが、Androidだとデフォルトのボタンがかなり醜いので、これは困りものです。
これはAndroidのエミュレーターで表示したものをスクリーンショットで撮ったものです。
気にならない人はこれでいいと思うかもしれませんが、小さくて押しづらいです。それに、これをXperiaで表示すると、背景のグラデーションがもっと暗く表示され、かなりイケてない感じになります。また、左に配置したときに、右に数ピクセルずれるのも気になります。
Firefoxなどのブラウザで表示されるデフォルトのボタンも醜いのですが、paddingを設定すればWindows標準のボタンに近くなり、だいぶ良くなります。しかし、先ほど述べた通り、AndroidのブラウザではボタンにCSSのプロパティが適用されないのです。
そこで、CSSが適用できるようにする方法を調べました。
ボタンに対して以下のように書くことで、CSSが適用されるようになるようです。
試しにこのプロパティだけ指定した状態がこちら。
飾り付けも何もされていない、昔ながらのボタンスタイルになりました。
そこに次のようなCSSを加えます。
-webkit-appearance: none;
padding: 0.5em 2em;
color: midnightblue;
border: 1px solid royalblue;
-webkit-border-radius: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(lightblue));
text-shadow: 1px 2px 3px lightblue;
}
すると、このようにデザインすることができました。
やや角丸がカクカクしちゃってますが、色使いを変えたらもう少し綺麗に見せることができると思います。1
さて、今回設定した -webkit-appearance ですが、詳しくは分からないのですが、CSSの displayプロパティ のように、フォームの要素がどのように表示されるかを指定するプロパティのようです。
詳しくは以下のサイトなどを見て頂きたいのですが、説明がほとんど無くてよく分かりませんね……。
- ここではボタンを押した状態を考慮していないので、マウス操作には向かないことに注意しておいて下さい。 ↩