エンジニアばかりのMMMでデザイナーをやっている池島です。デザインにコーディング、さらにSEO対策なども行っています。 ところで、先日担当したプロジェクトの中で、HTML5を使ってカレンダー機能を実装しました。 IEやFirefoxなど、HTML5に非対応のブラウザもあるものの、ユーザー視点に立つとカレンダーUIから日付を選択することができるのは非常に分かりやすいですよね。 日付選択フォームのスタイル変更を行ったりもしたので、備忘録も兼ねてその方法を書いておこうと思います。 HTML5によるカレンダーのデザイン例 MacのChromeではデフォルトで次のように表示されます。 マウスを載せると、矢印が出てきます。(中央) 右の▼がカレンダーを出すボタン、左の上下矢印が年・月・日の数字を1つずつ上下させるボタン(スピンボタン)です。 入力すると、クリアボタンも出てくるようになります。(右) 今