BLOG

jQueryに関する記事一覧

JSでスプレッドシートからデータを取得・出力し、動的要素を作成しよう!【html表示】
投稿日:2022年11月30日

担当していた案件でJSでスプレッドシートからデータを取得し、動的要素を作成することになりました。 しかし、調べてみると意外にその方法を一から詳しく紹介している記事が見つかりませんでした。 そこで今回はJSでスプレッドシートからデータを取得し、動的要素を作成する方法について一から詳しく紹介しま ...

JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】
投稿日:2022年9月28日

昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替え ...

jQueryプラグイン「noUiSlider」を使って上限・下限を設定できるレンジスライダーを簡単に実装【デモ付き】
投稿日:2022年8月10日

ECサイトなどで価格の範囲を決めて商品を検索する機能があるとき、音量の調整や明るさの調整をするUIのようなデザインで作成されていることがありますね。 このような入力欄を「レンジスライダー」といいます。 レンジスライダーの実装には、input要素のtype属性「range」を利用す ...

ローディングアニメーション画面をhtmlで実装【初心者でも簡単!】
投稿日:2022年6月7日

ページの読み込み中に数秒間白い画面が続くと、不安になることはありませんか? ローディングアニメーションを実装することにより、ユーザー側に「ページをしっかり読み込んでいる」ことのアピールができます。 また、最近ではアニメーションを設置することも増えたので、ローディングの時点で視覚的に興味を与え ...

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】
投稿日:2022年4月28日

医薬品や化粧品のサイトには診断コンテンツが実装されていることが多いです。 ですが、実際に診断コンテンツを実装しようと思っても、どのように作成して良いか分からないと思います。 「サイトに診断コンテンツをを実装したいが方法が分からない」 「実装にはプラグインが必要なのか」 などと実装 ...

モーダルを簡単に実装しよう!使い方も解説【Micromodal.js・Modaal】
投稿日:2021年12月17日

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダ ...

【jQuery】動きのあるアコーディオンメニュー・開閉ボタンまとめ(コピペ用サンプル付き)
投稿日:2021年11月12日

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに ...

IE11での画像のobject-fitの使用について
投稿日:2021年1月29日

ブログ一覧のサムネイル画像など、画像の枠が決まっている場合があります。 どんな比率の画像が来ても、きれいに画像が表示されるようにしたいです。 そんなときはobject-fitプロパティを使えば解決します。しかしIEで対応してないのですよね…。 まず、object-fitプロパティの ...

【サンプルソース有】ファイルのサムネイル表示からアップロードまでやってみよう
投稿日:2020年12月25日

システム構築の案件で、ユーザーが入力するフォームを作成することがあります。 ファイルアップロードの処理は少し特殊なので、流れをまとめてみました。 今回はWordPressでのSmart Custom Fieldsを利用することを想定しています。 WordPressではなく素のPHP ...

ポップアップ表示のYouTubeでも関連動画を操作したい【Magnific Popup】
投稿日:2020年10月29日

YouTubeの動画をサイト内に埋め込むとき、関連動画を非表示にしたり、同じチャンネルの動画のみを表示させたりしたいといった要望が出てくることも多いですよね。 プラグインを使用してポップアップで表示している場合、そういった関連動画の操作が意外に難しいことがあります。 本記事では、Ma ...

Ajaxを解説!javascriptで非同期通信【画面遷移せずにデータを取得】
投稿日:2020年9月30日

TAKAYA OHTAやOPERAのようにシームレスな画面遷移を実現する場合にAjaxが使われます。 SPA(Single Page Application)などデスクトップアプリのように操作できるのですが、それにもAjaxなどの非同期通信が使われています。具体的なサービスを挙げるとF ...

【スマホアプリ開発】ハイブリッドアプリ開発が楽になる js のみのデータベース【indexedDB + Dexie.js】(動作例付き)
投稿日:2020年7月31日

システム開発にあたってMySQLなどのデータベースを用いることが多いですが、スマホアプリ開発では端末内にいわゆるデータベースを保持できないので、通常はデータベース用のサーバーを用意する必要があります。 もちろん、データベース用サーバーが必須な場合(他ユーザーと連携するようなアプリの場合)も多い ...

slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】
投稿日:2020年1月24日

「スライダーを実装したい!」「でも何を使えばいいの?」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いな ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
投稿日:2019年10月4日

タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix ...

日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】
投稿日:2019年9月25日

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

[jQuery]スクロールに応じてホワッと表示させる効果(スクロールエフェクト)を簡単に実装する
投稿日:2017年6月29日

サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。 そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必 ...

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する
投稿日:2017年6月26日

タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。 js部分だけだと6~7行で記述できてしまいます。 ちなみに、このページのタブ切り替えは自前で作ったjsです。 ...

~2022年・2016年新旧比較~クリスマスのWebデザイン+おまけ[雪を降らせるjQuery]
投稿日:2016年12月20日

みなさんいよいよ年の瀬、いかがお過ごしでしょうか? 今回はクリスマスのイベントやキャンペーンに向けてデザインを作成する際に参考になるサイトを探してみました。 このブログは2016年に公開したBLOGを2022年度バージョンを追加して更新いたしました! 他にもクリスマスのWebサイトを作 ...

星形レーティングプラグイン「RATE YO!」をスマホ対応してみた。
投稿日:2015年6月25日

口コミサイトなどでよく見かける星形レーティング。 RateYo!というプラグインは、動きが軽快で使える関数もなかなかあり満足な動作をしてくれます(ただし、IE9以上)。他のプラグインではあまりない機能として小数点2桁までつけることもできます。 (function ($) { ...

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする
投稿日:2014年10月20日

ホームページにGoogleマップを載せたい時は、 Google → マップ → 設定 → 地図を埋め込む で、埋め込みコードをコピーして貼り付ければできます。 ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。 以前の ...