収入UPの転職を目指す方へ

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

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

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

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

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

IT研修・ITスクールのインターネット・アカデミー

目次

FullCalendar

FullCalendar

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

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

関連URL

FullCalendar

Datepicker for Bootstrap

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

関連URL

Datepicker for Bootstrap

Quick[select]

Quick[select]

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

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

関連URL

Quick[select]

Bootstrap Maxlength

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

関連URL

Bootstrap Maxlength

Font Awesome

Font Awesome

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

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

関連URL

Font Awesome

おわりに

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

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

Webデザイン・プログラミングスクール インターネット・アカデミー

関連講座

モバイルファーストなWebサイトを作るための「Bootstrap基礎講座」

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
1995年開校、日本初のWebデザイン・プログラミングスクールインターネット・アカデミー

自分にぴったりのコースが見つかる

プログラミングスクールのインターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム