Bootstrapをカスタマイズ!カレンダーなどjQueryプラグイン5選
- ツイート
-
- 2018/01/19
BootstrapはCSSフレームワークの中でも人気が高く、機能性に富んでいることが大きな特徴ですが、Webサイトのデザイン性や機能性を追加してより良いWebサイトに仕上げるためには、jQueryプラグインの存在が欠かせません。
HTMLにタグやクラスを追加するだけで手軽に機能実装できるjQueryプラグインはWeb制作の現場でもよく使われています。今回はjQueryプラグインの中でもカレンダーやフォーム、アイコンといったWebデザインの幅が広がるプラグインについてご紹介します。
IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。
目次
FullCalendar
カレンダーは、特にECサイトで営業日や営業時間の表示、商品発送日の指定などの重要な役割を持つWebサイトの基本機能です。現在はHTMLコードを少し追加するだけで利用できるカレンダーのjQueryプラグインも多く、手間をかけずに導入できます。
FullCalendarは、デフォルト設定のままでも十分に使えるカレンダーです。見やすい構成で、初心者の方でも操作に迷うことはないでしょう。また、カスタマイズ性に富み、カラーやデザインを思い通りにアレンジすることが可能です。
関連URL
FullCalendarDatepicker for Bootstrap
Datepicker for Bootstrapは、日付入力に特化したjQueryプラグインです。表示されるカレンダーの日付をクリックするだけで日付を入力できるため、文字入力の手間が省けます。日にちだけでなく、特定の月や年を選択することも可能です。また、過去の日付を非表示に設定することもできます。
関連URL
Datepicker for BootstrapQuick[select]
ユーザーが問い合わせや資料請求・商品購入などに利用するフォームは、コンバージョンに直結するWebサイトの要です。入力フォーム最適化(EFO)の観点から、ユーザーの負担が少ないフォームが求められています。
フォーム入力で重要とされるポイントの1つが、「スムーズに入力できる」ことです。Quick[select]は名前の通り、セレクトボックス(メニュー)から選択肢を素早く選ぶことができるjQueryプラグインです。 プルダウン形式やリスト形式のメニュー、複数の選択肢を選択可能なメニューなど、一通りのメニューを備えています。メニューを選択不可にしたり、デザインのテーマを変更したりすることも可能です。
関連URL
Quick[select]Bootstrap Maxlength
テキストボックスに入力した文字数をカウント・表示するjQueryプラグインがBootstrap Maxlengthです。入力中の文字数をリアルタイムでカウントするだけでなく、決められた文字数をオーバーすると入力できなくなる仕組みを作ることができます。IDやパスワードの設定、文字制限のある文章入力などに役立つでしょう。
関連URL
Bootstrap MaxlengthFont Awesome
Webサイトを彩るアクセントとしてよく活用されるパーツがアイコンですが、ナビゲーションや見出しといった、ユーザーの目を引く場所に配置されることの多いアイコンを一つ一つ制作することは大変です。さまざまな種類のアイコンを手軽に利用したい場合は、jQueryプラグインを活用しましょう。
Font Awesomeは、jQueryのアイコンフォントプラグインです。ベクター形式のためアイコンを表示拡大・縮小してもぼやけることなく、HTMLファイルの追加したい場所に指定のタグとクラスを記述するだけで手軽にアイコンが表示できます。Font Awesome 4.7.0では、675ものアイコンが用意されています。
関連URL
Font Awesomeおわりに
Web制作の現場はスクールとは異なり、周囲の人がjQueryの使い方を懇切丁寧に教えてくれることはありません。使い方が分からずに困ることがないよう、制作現場に入る前にあらかじめマスターしておきましょう。
インターネット・アカデミーでは、現場で即戦力として活躍できるBootstrapの短期講座を毎月開催しており、jQueryプラグインの使い方についても学ぶことができます。Bootstrapの短期講座の詳細に関しましては、お知らせページにて随時ご確認ください。