スキルアップ記事

レバテックキャリアではIT・Web業界のエンジニア、デザイナーのスキルアップに役立つコンテンツをお届けいたします。
転職に役立つノウハウから、日々のスキルアップや業務で使える記事等幅広く掲載していきます。

転職支援サービスをご希望の方はこちら

Web制作に活用できる!オススメのjQueryプラグインをご紹介知っておくと便利なjQueryのプラグインまとめ

スライドするページを作りたい、目次機能をつけたい、無限スクロール機能が欲しい、など要望に沿ったサイト作りに使えるのがJQueryのプラグイン。そんな便利なプラグインのメリット・使い方がまとめられた記事をピックアップしました。Web制作の可能性を広げるために、ぜひ参考にしてみてくださいね。

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

(1)1ページずつスライドできるOne Page Scroll

『Black Everyday Company』は、JavaScript・C#・VBA等の情報がエントリーした、プログラミングノウハウが詰まったサイト。サーバ関連の仕事に携わるダーシノさんが、言語の使い方、エラー対処などそれぞれわかりやすく解説してくれます。

その中に、jQueryプラグインに関する記事があったのでご紹介します!
タイトル名は《スライドショーみたいに1ページずつスクロールするウェブサイトをつくる》

スライドショーのように1ページずつ流れるシステムを作るために使用するのが、"One Page Scroll"というプラグインです。
軽量でシンプルに仕上げるなら、このツールを使うのがベターなのだそう。

記事中では、"One Page Scroll"のパラメータがひとつひとつ説明されています。スライドショーのアニメーション時間をms単位で指定したり、キーボードで操作できるようにしたり…とカスタマイズが可能なので、参考にしてみるといいでしょう。

さらに、JavaScript・HTML・CSSのコードもしっかり記載してあるため、初心者の方も安心です!
"One Page Scroll"の使い方をマスターして、ネットユーザーを惹きつけるサイトを作成してみては?

【参照元】
http://kuroeveryday.blogspot.jp/2017/04/one-page-scroll-website.html
 

(2)アニメーションが実装できるjQueryプラグイン12選

jQueryは、複雑になりがちなJavascriptのコードをシンプルにまとめることができるライブラリ。
Webデザインの仕事をしている方の中にも、jQueryユーザーは多いことでしょう。

そこでここでは、Webデザインする際に、ページ内にアニメーションを実装するときに役立つjQueryプラグインのことが書かれた《Webページの隠し味に!アニメーションが実装できるjQueryプラグイン12選》という記事を紹介したいと思います。

この記事はコーディングの代行に特化した『くまWEB』に掲載されており、"Animate.css"、"Hover.css"、"Velocity.js"などをはじめ、バラエティー豊かなアニメーションが添付できるプラグインがラインナップ!

12個すべてにその特徴を記したコメントが添えられているので、ニーズに合わせたプラグインの選定に役立つのではないでしょうか?
ぜひ、インパクトやユーザビリティを追求したWebサイト制作の参考にしてくださいね。

【参照元】
http://kumaweb-d.com/jquery/plugins-for-animation/
 

(3)スムーススクロール用のプラグインをnpmにあげた話

WordPressのテーマ、プラグイン開発、Webサイトの構築などを行っている『モンキーレンチ』の代表であるキタジマタカシさんは、以前Webページ内のリンクをスムースにスクロールさせるjQueryプラグインを作りました。

しかし、制作時にGitHubから手動でダウンロードして設置するようにしていたため、JavascriptライブラリやjQueryプラグインをnpmで入れていたキタジマさんは、手間がかかる点が気になっていたんだとか。
そこで、スムーススクロールのプラグインをnpmにあげることにし、メンテナンス性を考慮した上でコードも書き換えたそうです。

こちらの記事《スムーススクロールの jQuery プラグインを npm にあげるようにしました》には、その詳細が書かれています。
利便性を増すために、さらに手を加えることも検討中とのことなので、スムーススクロール用のプラグインに関心をお持ちの方は、一度目を通してみてはいかがでしょう。

【参照元】
https://2inc.org/blog/2017/04/21/5681/
 

(4)parallax background.jsの使い方

パララックスは、視差効果のあるWebサイトを制作するときに用いられるエフェクトの1つ。
jQueryには、このパララックス効果を実装できるプラグインがあります。そこで注目してほしいのが、プラグインの具体的な使用方法が書かれた《jQueryプラグイン parallax background.jsの使い方》という記事です。

ここで紹介されているプラグインは"parallax background.js"。
背景のみのスクロールに対応するパララックスプラグインですが、シンプルな設定なのがポイントです。
記事にはデモ版と一緒に、ダウンロード方法をはじめ、CSSの編集、HTMLの編集、オプションなどについて記載されているので、"parallax-background.js"の詳細を知るのにおすすめですよ。

また、この記事を執筆したいっせいさんのブログ『いつか誰かの役に立つかもしれないweb制作屋の備忘録』には、他にも便利なjQueryプラグインを紹介した記事がエントリーしています。

アクセスすれば、業務の幅を広げてくれるTipsやアイデアをキャッチできるかもしれませんよ。

【参照元】
https://blog.raizzenet.com/how-to-use-parallax-background/
 

(5)スマホにも対応可能な画像表示プラグインLightbox

Webサイトの制作・運用・集客などを行っているフリーランサーのほーくえーすさんが綴る『ほーくブログ』。その中に、レスポンシブWebデザインに画像ビューアを埋め込む時に便利なプラグインの記事があったので紹介します!

タイトルは、《[jQuery]スマートフォンにも対応してる画像表示プラグイン》
ほーくえーすさんの記事によると、jQueryプラグインの"Lightbox"には、オリジナル版とLightbox(Boxer)とがあり、どちらもクリックで画像が切り替わる仕様になっているそうです。

しかし、スマホへの対応も視野に入れた場合は、後者の方がUI的に優れていると感じたとのこと。
そこで、ユーザーエージェントの重要性を感じているほーくえーすさんは、記事内でオリジナル版とLightbox(Boxer)の基本的な使い方を説明してくれています。

jQueryで画像をしっかりと見せるサイトを制作するときには、ぜひ"Lightbox"の導入も検討してみると良いのではないでしょうか。
目的に合わせて使い分けると、より一層視覚的効果が期待できることでしょう。

【参照元】
https://hawk-a.com/boxer-and-lightbox-jquery/
 

(6)サイトに手軽に目次機能を付加できるプラグインTOC

「Webページに目次機能を付ける」
その動作をより簡単にするjQueryプラグインに"TOC"があります。

『寝ログ』の運営者わいひらさんも、"TOC"の使い勝手の良さに魅了された一人。
ブログ内の《サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」》の記事に、"TOC"の特徴と目次を作成する手順がわかりやすく書かれていたので紹介します。

記事中では
・TOCサイトからスクリプトをダウンロード・設置する方法
・CSSの記述内容
・スクリプトの記述内容
の順に"TOC"の利用方法が説明されています。
スクリプトに関しては、WordPressテーマの利用例・コードの説明など、詳細に言及してあるので必見です。また、同ページの左サイドに、実際に"TOC"で作成した目次サンプルを付けてくれているのも嬉しい点です。

「軽量・カスタマイズ性が高い・お手軽操作」の三拍子が揃った"TOC"。その使い勝手の良さを、ぜひ自分で確かめてみてはどうでしょう?

【参照元】
https://nelog.jp/jquery-table-of-contents-plugin
 

(7)無限スクロールを可能にするInfinite Scroll

次の記事や画像がキリなく表示される「無限スクロール機能」は、facebookやtwitterでも適用されています。
jQueryプラグイン"Infinite Scroll"を使えば、この無限スクロールを組み込んだサイトの作成が可能になります。

「無限スクロール機能を活用してみたい」
そんな方におすすめの記事がこちら《jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法》です。
ギャラリーを"Masonry"でタイル状に並べ、"Infinite Scroll"で無限スクロールを実現させる方法が詳しく書かれています。

「手動リロード」「自動リロード」の2タイプの作成方法が記載されており、それぞれデモ版が紹介されているので、両者の違いもチェックできますよ!
添付されたコードのスクショをお手本にしながら、無限スクリーンの実用スキルを身に付けてみては?

また、サイト『I'll be NET』にはjQuery・CSS情報の他、豊富なWeb制作のマメ知識が掲載されています。為になる情報満載なので、空いた時間に気になるテーマをチェックしてみてくださいね!

【参照元】
http://illbenet.jp/view/78
 

(8)スライド毎にポーズ時間を設定できるbxSlider

「Webページ内のスライドのポーズ時間を個別に変えたい!」
そんな要望に応えてくれる、おすすめ記事が掲載されているのが、『NxWorld』のサイト。
《bxSliderでポーズ設定をスライド毎に変更する方法》の記事に、1枚目は5秒、2枚目は10秒…、というように、スライドのポーズ時間の設定を変える方法が書かれています。

筆者のNaoyaさんは、上記の設定をjQueryプラグインの"bxSlider"で行っています。
記事には5枚のスライドを用いたケースを例に挙げて、サンプルコードや実際の動きを確認できるデモが添えられているので、プログラミングのイメージがしやすいのではないでしょうか。

それぞれに異なる画像のポーズ時間を設定するのに便利なプラグインは他にもありますが、"bxSlider"のTipsとして覚えておくと役立つシーンがあるかもしれませんね。

【参照元】
http://www.nxworld.net/tips/jquery-plugin-bxslider-setting-different-pause.html

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む

技術の話ができる転職エージェント。30秒で無料登録!

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

  • STEP1
  • STEP2
  • STEP3
  • 次のstepで入力すると返事が来る!
  • プロフィール入力すると返事が来る!
  • ご希望の条件を選択してください

    ご希望の勤務形態

    必須

    ご希望の勤務地

    任意

  • プロフィールをご入力ください!必須入力項目はこのページで終わりです。

    氏名

    必須

    氏名かな

    必須

    生年月日

    必須

    電話番号

    必須

    メールアドレス

    必須

  • スキルシート・ポートフォリオをお持ちの方はアップロードしてください

    スキルシート

    任意

    提出しておくことで
    迅速なご紹介が可能に!

    職務経歴書

    ドラッグアンドドロップ or ファイルを選択 選択されていません

    履歴書

    ドラッグアンドドロップ or ファイルを選択 選択されていません

    スキルシートを確認しています...

    スキルシートを確認しています...

    ※ファイルは5MB以下で対応するファイル形式 ? でアップロードしてください
    Microsoft Office .xls .xlsx .doc .docx .ppt .pptx
    KINGSOFT Office .xls .xlsx .doc .docx .ppt
    iWork .numbers .pages .key
    LibreOffice .ods .odt .odp
    OpenOffice .ods .odt .odp
    その他 .pdf

    ※事前にご用意のない方は、弊社フォーマットを是非ご活用下さい。

    ポートフォリオURL

    任意

    ?

    ポートフォリオとは主にクリエイターの方が自己PRのために過去の作品や制作実績をまとめた作品集の事です。

    ポートフォリオをWeb上で公開されている方はそのURLを、データでお持ちの方は作品データをアップしたURLを入力してください。

    ※データをアップされる場合は、保存期間や容量制限の少ないGoogleドライブを推奨しています。

    その他ご要望

    任意

  • 下記の内容をご確認いただき問題ないようでしたら、送信してください

    プロフィール入力すると返事が来る!

    • ご希望の勤務形態 必須

    • ご希望の勤務地 任意

      第一希望:
      第二希望:

    • 氏名 必須

    • 氏名かな 必須

    • 生年月日 必須

    • 電話番号 必須

    • メールアドレス 必須

    • 職務経歴書 任意

    • 履歴書 任意

    • ポートフォリオURL 任意

    • その他ご要望 任意

    個人情報の取り扱い」と「利用規約」に同意の上、『同意して登録する』ボタンをクリックして下さい。

プライバシーマーク

レバテック株式会社は「プライバシーマーク」使用許諾事業者として認定されています。
個人情報の秘密は厳守します。ご入力いただいた情報は許可を頂くまで求人企業に公開することはありませんので、ご安心ください。

申し込みに関するご注意
以下の方は弊社の事業基盤、求人動向から、ご提案のご連絡までお時間をいただく可能性があります。ご了承ください。
IT業界、または希望職種が未経験の方
一都三県・大阪・兵庫・京都・愛知・福岡以外の勤務地、また在宅での作業を希望される方

関連記事

人気記事

無料"個別相談会"実施中-平日の夜、土曜も実施しています!-

関西求人特集 みんなの年収UP公開中

九州求人特集 福岡での転職をサポートします!

転職・求人・採用情報を探す

プライバシーマーク

レバテック株式会社は、
「プライバシーマーク」
使用許諾事業者として
認定されています。