SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

セレクトボックスをスタイリングできるjQueryプラグイン「customSelect.js」

「jQuery プラグイン」の利用(23)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回は、フォーム部品の中でもスタイリングが難しいセレクトボックスを簡単にデザインできるjQueryプラグインを紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 セレクトボックス(select要素)は、フォーム部品の中でもCSSによるスタイリングが難いパーツです。本記事では、jQueryプラグインの「customSelect.js」を使って、セレクトボックスを簡単にスタイリングする方法を紹介します。

対象読者

  • (X)HTMLとCSSの基本を理解している方。
  • デザインのコツを学びたい方。
  • セレクトボックスをグラフィカルにスタイリングしたい方。

必要な環境

 jQuery本体。本記事では、jQuery 1.x系を使用します。Internet Explorer 6~8を考慮しなくてよい場合には、jQuery 2.x系も利用可能です。

 本連載で動作確認を行ったブラウザは次のとおりです。

  • Windows 7 Internet Explorer 11(以下IE 11)
  • Windows 7 Firefox 30
  • Windows 7 Chrome 35

セレクトボックスをCSSでスタイリング

 図1のように、セレクトボックスのユーザーエージェントスタイルシートは、ブラウザによって異なります。

図1 セレクトボックスのデフォルトCSS(select.html)
図1 セレクトボックスのデフォルトCSS(select.html)

背景やボーダー関連プロパティで装飾

 図2は、セレクトボックスをCSSだけでスタイリングした例です。

図2 背景やボーダー関連プロパティで装飾したセレクトボックス(select.html)
図2 背景やボーダー関連プロパティで装飾したセレクトボックス(select.html)

 セレクトボックスを背景やボーダー関連のプロパティで装飾することはできますが、右側に表示される下向きの三角形や、展開時のデザインをCSSだけで制御することは現在のところ難しくなっています。

リスト1 背景やボーダー関連プロパティで装飾したセレクトボックス/CSS(select.html)
select#sample {
  margin: 0;
  padding: 10px;
  width: 280px;
  height: 40px;
  font-size: 14px;
  background: url(select.png);
  padding-left: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
}

appearanceプロパティ

 CSS3のappearanceプロパティは、ユーザーが利用するプラットフォームに応じて、要素がその環境における標準的なUIになるよう指定するプロパティです。「appearance:none;」を指定すると、ChromeやSafariのwebkit系ブラウザであれば、右側に表示される下向きの三角形を消すことができますが、IEやFirefoxでは消すことができません(図3)。

図3 「appearance:none;」の表示結果(select.html)
図3 「appearance:none;」の表示結果(select.html)

 また、「appearance:button;」を指定してボタンとして装飾する方法もありますが、同じくPC向けのブラウザではwebkit系を除いて未対応のため、使用はスマートフォン向けにとどめるのが無難です。

図4 「appearance:button;」の表示結果(select.html)
図4 「appearance:button;」の表示結果(select.html)

 そこで、セレクトボックスをスタイリングするのに便利なjQueryプラグインを紹介します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
軽量で導入が簡単な「customSelect.js」

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8023 2014/09/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング