0120-746-555お電話での無料体験レッスン予約・ご質問はこちら(受付時間 10時‐21時)
無料体験レッスン
IT業界まるわかりガイド

Bootstrapをカスタマイズ!カレンダーなどjQueryプラグイン5選

Bootstrapをカスタマイズ!カレンダーなどjQueryプラグイン5選

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

BootstrapはCSSフレームワークの中でも人気が高く、機能性に富んでいることが大きな特徴ですが、Webサイトのデザイン性や機能性を追加してより良いWebサイトに仕上げるためには、jQueryプラグインの存在が欠かせません。

HTMLにタグやクラスを追加するだけで手軽に機能実装できるjQueryプラグインはWeb制作の現場でもよく使われています。今回はjQueryプラグインの中でもカレンダーやフォーム、アイコンといったWebデザインの幅が広がるプラグインについてご紹介します。

FullCalendar

FullCalendar

カレンダーは、特にECサイトで営業日や営業時間の表示、商品発送日の指定などの重要な役割を持つWebサイトの基本機能です。現在はHTMLコードを少し追加するだけで利用できるカレンダーのjQueryプラグインも多く、手間をかけずに導入できます。

FullCalendarは、デフォルト設定のままでも十分に使えるカレンダーです。見やすい構成で、初心者の方でも操作に迷うことはないでしょう。また、カスタマイズ性に富み、カラーやデザインを思い通りにアレンジすることが可能です。

関連URL

FullCalendar

Datepicker for Bootstrap

Datepicker for Bootstrapは、日付入力に特化したjQueryプラグインです。表示されるカレンダーの日付をクリックするだけで日付を入力できるため、文字入力の手間が省けます。日にちだけでなく、特定の月や年を選択することも可能です。また、過去の日付を非表示に設定することもできます。

Quick[select]

Quick[select]

ユーザーが問い合わせや資料請求・商品購入などに利用するフォームは、コンバージョンに直結するWebサイトの要です。入力フォーム最適化(EFO)の観点から、ユーザーの負担が少ないフォームが求められています。

フォーム入力で重要とされるポイントの1つが、「スムーズに入力できる」ことです。Quick[select]は名前の通り、セレクトボックス(メニュー)から選択肢を素早く選ぶことができるjQueryプラグインです。 プルダウン形式やリスト形式のメニュー、複数の選択肢を選択可能なメニューなど、一通りのメニューを備えています。メニューを選択不可にしたり、デザインのテーマを変更したりすることも可能です。

関連URL

Quick[select]

Bootstrap Maxlength

テキストボックスに入力した文字数をカウント・表示するjQueryプラグインがBootstrap Maxlengthです。入力中の文字数をリアルタイムでカウントするだけでなく、決められた文字数をオーバーすると入力できなくなる仕組みを作ることができます。IDやパスワードの設定、文字制限のある文章入力などに役立つでしょう。

Font Awesome

Font Awesome

Webサイトを彩るアクセントとしてよく活用されるパーツがアイコンですが、ナビゲーションや見出しといった、ユーザーの目を引く場所に配置されることの多いアイコンを一つ一つ制作することは大変です。さまざまな種類のアイコンを手軽に利用したい場合は、jQueryプラグインを活用しましょう。

Font Awesomeは、jQueryのアイコンフォントプラグインです。ベクター形式のためアイコンを表示拡大・縮小してもぼやけることなく、HTMLファイルの追加したい場所に指定のタグとクラスを記述するだけで手軽にアイコンが表示できます。Font Awesome 4.7.0では、675ものアイコンが用意されています。

関連URL

Font Awesome

[PR] Webデザイナーの仕事の魅力とは? 先輩Webデザイナーに聞いた仕事の魅力

おわりに

Web制作の現場はスクールとは異なり、周囲の人がjQueryの使い方を懇切丁寧に教えてくれることはありません。使い方が分からずに困ることがないよう、制作現場に入る前にあらかじめマスターしておきましょう。

インターネット・アカデミーでは、現場で即戦力として活躍できるBootstrapの短期講座を毎月開催しており、jQueryプラグインの使い方についても学ぶことができます。Bootstrapの短期講座の詳細に関しましては、お知らせページにて随時ご確認ください。

IT企業研修

Bootstrapのカスタマイズに興味がある方へまずはお気軽にお問い合わせください

無料体験レッスン

無料体験レッスン実施中

業界のトレンドや、最先端のWeb技術についてご紹介をする『無料体験レッスン』をインターネット・アカデミーでは毎日開催しています。インターネット・アカデミーは日本初そして唯一のIT・Web専門スクールなので、その専門的なノウハウを活かした転身についてのご相談も承っています。ぜひお気軽にご参加ください。

このページの上へ

お電話での無料体験レッスンのお申込み・お問い合わせはこちら(受付時間10時-21時)