Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
背景 高機能なスライダー（スライドショー）を簡単に実装できるライブラリはある。 しかし、自分が実装したい機能はシンプルで、レイアウトや機能をいろいろ独自に作りたかったので、ライブラリを使わずにjqueryで自作する事にした。 参考にしたサイト 1．APOC jQueryを使ったスライダーの作り方とその仕組み ２．Qiita スマホのスワイプ検知 上記の2つのサイトに乗っているコードを合体させて、独自に編集した。 コード <style type="text/css"> .slider .slide { width: 198px; height: 198px; border: 1px solid #f00; float: left; } .slider .slideSet { position: absolute; } .slider { width: 200px; height: 200px
2016年2月29日 jQueryの基礎が理解出来てきた方は、他人が作ったプラグインを使用せずに自作したくなってくるかと思います。 そんな初級から中級へステップアップしたい人へ向けた、jQueryでスライドショーを自作する時の作り方と考え方をわかりやすく解説します。理解しやすくする為にできるだけシンプルにし、変数はあまり使いませんので必要な場合は、適宜変数化してください。 ちなみに今回解説するスライドショーは「スライドするイメージの数がいくつであっても、自動的に判別してくれるタイプ」です。 まずはHTML側のイメージ <div id="slide"> <img src="mainImg01.jpg"> <img src="mainImg02.jpg"> <img src="mainImg03.jpg"> </div> 簡単ですね、イメージファイル３つをdivで囲っただけのシンプルな構造です
1.6.0 (Updated on Jan 05, 2018) new data-iziModal-preventClose - Implemented new startProgress, pauseProgress, resumeProgress and resetProgress methods - Implemented new Open multiple Modals - Implemented new arrowKeys option to enable/disable - Implemented new 'border-box' as default - Implemented bug Scrolling the page when the hash changes - Fixed bug Issue #155 - Fixed 1.5.1 new appendToOverla
境界線の守り方 ―― JWT認証とセッション管理で実現する「ガチ」の防衛術 前回の記事では、外部サーバを使って「30秒の壁」を突破する方法を紹介しました。 しかし、システムを外部と繋ぐ以上、いかに「正当なアクセス」を担保するかが極めて重要になります。今回は、システム開発案件に求められる高水準のセキュリティ要求に対し... SPIRAL 2026年06月09日 SPIRAL®の「30秒の壁」を突破せよ！ 外部サーバ連携による大量データ処理の最適化 「SaaSは便利だけど、自由度が低くてかゆいところに手が届かない......」 そんな経験はありませんか？ 今回のプロジェクトでは、自治体向けのWeb申請システムを構築するにあたり、堅牢なPaaS基盤である「SPIRAL®」を採用しました。... SPIRAL 2026年06月09日 自治体・企業向け「ウェブアクセシビリティ診断」対応実績と診断サー
https (保護された通信) だと、jQuery などが動作しないことがあります。 記述をチェックしてみてください。 例：<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script> で記述していた場合、https 通信下では jQuery 本体がブロックされて反映されません。 上記は jQuery ですが、同じ状況かつ記述だと CSS も反映されません。 [ 対処法 ] <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script> と、// から記述すれば解決します。 ちなみに、 ◪ src=”https〜” で記述した場合 http、https、のページのどちらとも
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
CMSを組み込んだホームページの制作をしているときによくある、要素が横並びのレイアウト。 コーディング前のデザインだと綺麗に整列してるけど、実際にコーディングしてみると要素内テキストの長さの可変が前提になってない…。なんてこと、よくありますよね。 そんなとき、同じ段に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。 CSS3のFlexboxでも対応できますが、jQueryのほうが慣れてるし。。という方にはおすすめです。 実際の動きはデモサイトを見てもらえればわかりますが、要素内テキストの行数が異なっていても、横並びの要素同士ならうまい具合に高さを一緒にしてくれます。 実際に使ってみよう使い方はとっても簡単です。 jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQu
クリスマスシーズンにブログに雪を降らせてみませんか？ 本記事では以下の WordPress プラグインをご紹介しています。 WP Snow（2025 年 10 月 4 日にダウンロード停止） Weather Effect Christmasify! 番外編として、CSS のみで雪を演出するサンプルコードも載せています（本ページ上部で使っているコードです）。 雪を降らせる WordPress プラグイン 以下の環境で検証しました。 WordPress 6.9.4 テーマ：Twenty Seventeen WP Snow WP Snow – Best Snow Effect Plugin 「WP Snow」は、有効化しただけでサイト全体に雪を降らせてくれるシンプルなプラグイン。 ［設定］>［WP Snow］で雪の大きさや色、適用したいページの指定ができます。 Font Awesome アイコン
初心者には「jQuery最高の教科書」がおすすめ 基礎をおさえた人には「jQueryデザインブック」がおすすめ より実践的な知識を学ぶなら「jQueryクックブック」がおすすめ jQueryの学習書籍を手に取ることで、プログラミングスキルを着実に向上させることができます。しかし、スキルを活かして収入を得るためには、さらに実践的な知識と経験が必要です。特に、生成AIとWeb制作を組み合わせて効率的に稼ぐ方法を学べば、将来の不安を解消し、自由な働き方を実現する一歩となるでしょう。 本セミナーでは、机上の空論ではなく、すぐに使える具体的なノウハウを提供します。AIを活用したWeb制作の可能性を体験し、収益化の具体的な流れを学ぶことで、あなたのキャリアに新たな選択肢を加えてみませんか？まずはセミナーの詳細を確認して、自分に合った学びの機会を見つけてください。 jQueryを本で効率よく学ぶには j
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
HTML5やAjaxと言った新しいテクノロジーの出現によって、Webデザインの世界も大きく変わってきました。とくに近年では「jQuery」を利用した動きのあるWebデザインが主流となっています。 そのため、これまでHTMLのコーディングやJavascriptのプログラムとは無縁であったデザイナーの人たちも、サイトの構成やデザインを考えるにあたって、jQueryがどのような動きを実現し、どのような役割をするのかを知っておく必要が出てきました。 そこで、本講座では主にコーディングの初心者やデザイナーの方たちに向けて、「jQueryとは何か？」から始め、役に立つプラグインの紹介や使い方の解説を行いたいと思います。 プログラム知識がなくとも、jQueryを使うことによって、どんなことができるのかを知ることで、デザインの幅が大きく広がります。 今回は、本のようにページをめくる効果を持ったjQuery
「jQueryの基礎を理解する全6回」の最終回です。 前回の授業(クリックするとポップアップするjQueryプラグインをカスタマイズする)まででjQueryプラグイン2つをhtmlに設置し、ブラッシュアップしていきました。今回は総復習と質疑応答回です。 本日完了したwebページを提出して下さい。来週の「HTMLとCSSを使って、150分で簡単なWEBサイト制作」最終回にて、優秀作品の発表がありますので、巧く行かない点や疑問点をクリアーにしましょう。 jQueryに触れた事の無い方は、下記の授業で勉強しましょう。 ■レスポンシブなサイトにあっという間にjQueryを実装する ■挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】 ■挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】 途中からで
Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。最終回はフォームで入力漏れがあった場合に送信できない仕組みをjQueryで実装していきます。 ■ jQueryとは 皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。 jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。 ■ 事前準備
この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。 CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。 「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」 「jQueryの実装の仕組みがいまいちよくわからない」 今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。 最後の授業では、切り替えタブの実装を学習していきます。情報量の多いサイトではよく用いられる手法です。この実装を学習するとよりモバイルアプリケーションライクなWebサイトを作成することができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
