CSS3 + jQueryを使った入力フォーム

先日からGoogle ChromeとSafariの拡張機能を作っているのですが、その設定画面をCSS3とjQueryを使用して開発しています。

特定のブラウザの拡張機能で使用するHTMLということで、他のブラウザとの互換性を気にする必要がないため、今回は思う存分CSS3を使ってみたのですが、スゴイの一言。

なんといっても最大の特徴は、以下のデモ画面では画像ファイルを一切使用していないんです!

実際の画面のサンプル(HTML)

Chrome、Safari、おまけでFirefoxにも対応しています。

デモ画面

※ デモ画面ではフォームの入力結果をHTML5で策定されたローカルストレージという領域に保存しています。
保存データは非常に小さなものですが、リセットをクリックすればデータは完全に削除されます。

ON/OFFボタンについて

この画面にはiPhone風のON/OFFボタンがありますが、このボタンはCSSのみで実装しており、HTMLの実体はINPUT(checkbox)です。

以下のページを参考にして作りました。(若干CSSを修正しています。)

iPhone Style Checkboxes With CSS3 « tobypitman.com

デモ画面ではHTMLのほとんどをJavaScriptで出力しているのですが、HTMLは以下のようになっています。

<ul id="checked">
  <li>
    <p>
      <input id="open" type="checkbox">
      <label class="check" for="open"></label>
      <label class="info" for="open">常に新しいタブでブックマークを開く。</label>
    </p>
  </li>
  <li>
    <p>
      <input id="confirm" type="checkbox">
      <label class="check" for="confirm"></label>
      <label class="info" for="confirm">ラベル内の全てのブックマークを開く前に確認する。</label>
    </p>
  </li>
</ul>

上記のHTMLに以下のCSSを適用すると、それだけでiPhone風のON/OFFボタンに変身します。

checkboxをON/OFFボタンに変えるスタイルシート

WEBフォント

この画面の中には以下のような、画像らしきものが表示されています。

これらは、WEBフォントと呼ばれる技術を使用しており、実体はフォントです。
True Type FontをWEBサーバー上にアップロードして、それをCSSに埋め込むことで、テキストをイラスト風のフォントに置き換えています。

これに関しては以下のページで公開されているフォントデータを使用しました。

Font-Embedding Icons: This Is a Big Deal — Some Random Dude

フォントの埋め込みは以下のような感じで。

@font-face {
  font-family: 'IconicStroke';
  src: url('../font/iconic_stroke.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

ヘッダーの左端の鉛筆風のアイコンは以下のようなCSSで。

h1:before
{
    color: #ffffff;
    content: "P";
    font-size: 24px;
    font-family: "IconicStroke";
    font-weight: normal;
    padding-right: 5px;
}

このCSSは大文字のPをh1の左に挿入しなさいという記述なのですが、この大文字のPはIconicStrokeというフォントでは鉛筆風のイラストが割り当てられており、それが表示されるという仕組みです。

(したがって、未対応のブラウザ(IEなど)では、Pと表示されてしまいます。)

今回は単に「やりたかった」が本音ですが、実際にはこの技術でこういう使い方はどうかとも思いますけど。(笑)素直に画像を使ったほうがいいかも。

ボタンのCSS

ボタンのCSSについては以下のURLを参考にしました。

CSS3 buttons / ubuwaits.github.com/css3-buttons

ソースはGitHub上でオープンソースとして公開されています。(すばらしい!)

その他

角丸やグラデーション、ドロップシャドウなど、この画面では多くのCSS3を使用しています。

残念なのは、いくつかの機能が、あきらかにブラウザの独自実装である点で、これらは標準化が進むに従って解消されるようですが、今後もブラウザの互換性の問題に悩まされることです。

そして何よりも、よりによってIEがこれらのほとんどの機能を実装していないことが、ほんとうに残念!

ちなみに

このインターフェースは、以下の拡張機能で使用する予定ですが、現時点でリリースしているバージョンでは、まだ実装していません。

近日中に実装しますので、もしよかったら使ってください。