パララックス（視差効果）演出といっても上下左右スクロールや回転等様々な演出がありますが、その中でJavaScriptおすすめパララックスプラグイン12選を紹介します。 simpleParallax.js シンプルにパララックス演出を実装できます。 simpleParallax.jsでのパララックス実装！ ScrollMagic.js パララックスとページスクロールと連動したアニメーションを表示できます。 ScrollMagic.jsで実現！パララックスとスクロールアニメーションの組み合わせ技術解説 Rellax.js jQuery不用で簡単にパララックスを実装できます。 Rellax.jsで簡単にパララックス効果を実装する方法 SUPERSCROLLORAMA ページ内のコンテンツをパララックスや色々なエフェクト演出で表示できます。 jquery.superscrollorama.jsで実
JavaScriptを使ってるとDate・日付・日時・カレンダー系処理は必ずやることになります。 今回はおすすめのJavaScriptを使ったDate・日付・日時・カレンダー系処理プラグイン9選をご紹介します。 exdate.js Dateオブジェクトを拡張し、日時（年月日時分秒）を指定フォーマットに表示します。 exdate.jsによる日時フォーマット表示の完全ガイド dateformat.js 日時や日付を指定のフォーマット（ゼロ埋め等）表示できます。 JavaScriptでの日付フォーマット: dateformat.jsを使った実践的な表示方法ガイド Day.js JavaScriptのDateの機能を使わずに日時処理を簡単に表示できます。 dayjs.jsで簡単に日時処理を行う方法 Moment.js Day.js同様JavaScriptのDateの機能を使わずにmoment.js
ウェブサイトのユーザビリティを向上させるためには、ページが完全に読み込まれる前に進捗を示すローディングインディケーターを表示することが重要です。 今回は、progressbar.jsを使用して、ページ表示前にプログレスバーと数値％カウントアップを表示する方法をご紹介します。 ローディング（プログレスバーと数値％カウントアップ）表示するCSS記述 まずは、ページ初期表示時のページ全体（.wrap）とローディング（#container）のCSSを定義します。必要に応じてスタイルを変更してください。 body { font-size: 16px; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; position: relative; } p{ text-align: center; p
本文の見出し（h2～h4）を目次にして表示するプラグインjQuery.toc.jsを紹介します。 このプラグインを使えば、ブログやウェブサイトの本文中の見出し（h2～h4）を自動的に目次として表示することができます。これにより、読者がコンテンツを簡単にナビゲートできるようになります。この記事では、具体的な使い方を詳しく説明します。 CSS記述 まずは目次「#toc」と本文エリア「class=”container”」のCSS設定から始めましょう。 目次は固定位置に表示され、読みやすくスタイリッシュなデザインに仕上げることが重要です。 <style> body { font-size: 16px; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{ padding-bottom
jQueryはWeb開発者に非常に人気があり、初心者から上級者まで幅広く使われてきました。 最近ではJavaScriptのネイティブAPIの進化により、jQueryよりもシンプルかつ効率的に処理を行うことが可能になってきています。 そのため、新しいプロジェクトではjQueryよりもモダンなフレームワークやネイティブJavaScriptを検討する傾向が強まっています。 jQueryは将来的にどうなるのかを考えてみました。 jQueryとは？ jQuery（ジェイクエリー）は、2006年にリリースされたJavaScriptのライブラリです。JavaScriptをより簡単に使いやすくし、クロスブラウザの互換性を向上させることを目的としています。jQueryはHTML文書の要素を操作したり、アニメーションを追加したり、Ajaxを利用して非同期通信を行ったりすることができます。 jQueryの特徴
今回は、Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法をご紹介します。 この機能を使用すると、ユーザーが入力した内容を保持し、ページを再表示（ページの更新「F5」または別ページに遷移してフォームに戻る）しても入力内容を失うことがなくなります。 Garlic.jsとは Garlic.jsは、フォーム入力を自動的に保存し、ユーザーがフォームを再度開いたときに入力内容を復元する便利なライブラリです。これにより、ユーザーエクスペリエンスが向上し、誤ってページを閉じたり、インターネット接続が切れたりしても入力内容が失われる心配がなくなります。 CSSの記述 まずは、入力フォームのスタイルを設定しましょう。以下のCSSを使用して、基本的なスタイルを整えます。必要に応じて変更してください。 <style> body { font-size: 18px; text-align
この記事では、jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応させる方法をご紹介します。 これにより、ユーザーがどのデバイスを使用していても適切なインタラクティブ体験を提供できます。 はじめに ウェブサイトのデザインにおいて、画像の一部をクリック可能にするmapタグを使うことがあります。しかし、デバイスの画面サイズが変わると、従来のmapタグは正確に機能しないことがあります。そこで、jquery.rwdImageMaps.jsを使用して、画像マップをレスポンシブに対応させる方法を説明します。 CSSの設定 まず、mapタグを設定する画像（img[usemap]）のCSSを設定します。必要に応じて以下のスタイルを変更してください。 <style> body { font-size: 18px; text-align: ce
今回は、jClocksGMT.jsを使ってグリニッジ標準時（GMT）から各国の時間を時計で表示する方法を紹介します。 このライブラリを使うと、簡単に複数のタイムゾーンの時計をウェブページに表示できます。分かりやすいように、詳細な手順を解説します。 jClocksGMT.jsとは？ jClocksGMT.jsは、jQueryベースのプラグインで、グリニッジ標準時を基準にして各国の時間をアナログまたはデジタル時計で表示することができます。多くのオプションが用意されており、簡単にカスタマイズ可能です。 ステップ1：CSSの設定 まず、時計表示のエリア（.jcgmt-container）のスタイルを設定します。以下のCSSを追加して、時計の見た目を整えましょう。 <style> body { font-size: 16px; text-align: center; } h1{ text-align
Webサイトやアプリケーションで、動的でインタラクティブなレイアウトを実現するために、ドラッグ＆ドロップ可能なグリッドエリアを利用することがあります。 この記事では、jQueryプラグインのGridster.jsを使って、簡単にドラッグ＆ドロップ可能なグリッドエリアを実装する方法を紹介します。具体的なコード例とともに説明していきます。 Gridster.jsとは？ Gridster.jsは、jQueryプラグインの一つで、ドラッグ＆ドロップ可能なグリッドレイアウトを簡単に作成できるツールです。このプラグインを使うことで、ユーザーはグリッド内のウィジェットを自由に移動させたり、サイズを変更したりすることができます。 CSSでグリッドエリアをスタイリング まずは、グリッドエリアをスタイリングするためのCSSコードを見てみましょう。 jquery.gridster.min.cssファイルを読み込
今回は、「jquery.bookblock.js」を使用して、複数の画像を本のページをめくるような切替りで表示する方法をご紹介します。 以前ご紹介したページめくり系プラグインとしては、 「FullscreenBookBlock：ページめくりを導入する方法」 「pageflip.jsを使って本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 がありますが、今回はこれらとは異なる新しい方法を解説します。 必要な準備 まずは、必要なファイルを準備します。 modernizr.custom.js jquery.min.js（バージョン1.9.1） jquerypp.custom.js jquery.bookblock.js bookblock.css これらのファイルをダウンロードして、適切な場所に配置
今回は、modaal.jsを使用して複数のYouTube動画をモーダルウィンドウで表示する方法をご紹介します。モーダルウィンドウとは、クリックすると画面上にポップアップで表示されるウィンドウのことです。以下では、CSS、HTML、JavaScriptのコードを順に解説しながら実装方法を詳しく説明します。 CSSの記述 まず、modaal.jsのスタイルシートを読み込み、モーダルウィンドウの見た目を調整するCSSを設定します。 モーダルエリア（#modalarea）とモーダル表示時（.modaal-container）幅やcloseボタン（.modaal-close）のCSS記述です。 <link rel="stylesheet" type="text/css" href="modaal.min.css"> <style> body { font-size: 16px; text-align
今回は、チェックボックスをより魅力的にするための方法を紹介します。JavaScriptのライブラリcandlestick.jsとCSSフレームワークBootstrapを使って、チェックボックスをスイッチ風にデザインする方法を学びましょう。この手法を使えば、UIが一段と洗練されたものになります。それでは、始めましょう！ CSSの記述 まず最初に、必要なCSSファイルとJavaScriptファイルを読み込みます。 これには、bootstrap.min.css、font-awesome.min.css、candlestick.cssが含まれます。 <link href="bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-aweso
今回は、画像をスムーズに切り替える方法をご紹介します。使うのは、簡単に使えるJavaScriptライブラリ「turntable.js」です。このライブラリを使うことで、画像をまるでアニメーションのように表示することができます。 この記事では、初心者でも分かりやすいように、具体的なコードと共に説明していきます。ぜひ最後まで読んで、あなたのプロジェクトに役立ててください！ Turntable.jsの魅力 Turntable.jsは、マウスのスクロールやカーソルの移動に応じて画像を切り替えることができるライブラリです。特に以下の点が魅力です： インタラクティブな表現：ユーザーの操作に応じて画像が変化し、視覚的な楽しさを提供します。 簡単な実装：基本的なHTML、CSS、JavaScriptの知識があれば、すぐに導入できます。 柔軟な設定：x軸、y軸、スクロールに対応しているため、さまざまな演出が
現代のWeb開発において、JavaScriptは中心的な役割を果たしています。 この記事では、特定のテキストエリアの値をJavaScriptを使用して変更した後、on(‘change’)イベントを自動的にトリガする方法を詳しく解説します。 具体的には、テキスト入力エリアとボタンを用意し、ボタンをクリックすることでテキストが変更された時にアラートメッセージを表示する方法を学びます。 CSSのセットアップ まずは、ユーザーインターフェースを整えるための基本的なCSSスタイリングを行います。以下はそのための基本的なCSSコードです。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; } h1{ text-align: cen
usersテーブルのテーブルデータ用Modelの記述 ※User.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class User extends Model { } ?> 非同期通信でテーブルデータを検索し取得表示するID検索ページのviewの記述 ※users.blade.phpファイルを用意します。IDを検索し検索結果として名前を出力表示するページです。 入力フォーム箇所の記述 ※ID検索テキストボックス（user_id）と検索結果（名前）テキストボックス（user_name）を用意します。 <div> <label for="user_id">ID検索</label> <input type="text" id="user_id" name="user_id" value="
Webサイトのナビゲーションやメニュー表示に欠かせないサイドバー。この記事では、シンプルで柔軟なjQueryプラグイン「Slidebars.js」を使って、サイドバーやプッシュメニューエリアを簡単に実装する方法を紹介します。初心者の方でもわかりやすく解説しますので、ぜひチャレンジしてみてください！ Slidebars.jsとは？ Slidebars.jsは、レスポンシブ対応のサイドバーメニューを手軽に実装できる軽量なjQueryプラグインです。左右や上下にスライドするメニューを簡単に作成でき、ユーザーに快適なナビゲーション体験を提供します。 必要なファイルを準備 まずは、Slidebars.jsを使用するために必要なファイルを用意しましょう。必要なファイルは以下の通りです。 slidebars.css jquery.min.js (v1.12.2) slidebars.js これらのファイ
ScrollMagic.jsを使ったウェブページでの魅力的なパララックス効果とスクロールアニメーションの導入方法について、実践的なガイドを提供します。 このテクノロジーは、訪問者にインタラクティブな体験を提供することで、ウェブサイトのエンゲージメントを高めることができます。初心者でもステップバイステップで理解しやすく、経験豊富な開発者にも役立つ内容を心がけています。 ScrollMagic.jsとは？ ScrollMagic.jsは、ウェブサイトにおけるスクロール操作をトリガーとしたインタラクティブなアニメーションを簡単に実装することができる強力なJavaScriptライブラリです。このライブラリを使うことで、ページ内要素の動きをスクロール位置に応じて制御することが可能になります。特に、パララックス効果の実現には非常に有効です。 環境設定 ScrollMagic.jsを利用する前に、いくつ
itemslide.jsは、ウェブサイトやアプリケーションにおけるインタラクティブなユーザー体験を実現するための強力なツールです。 この記事では、itemslide.jsを使ってモバイルフレンドリーなスライダーを実装する方法について詳しく解説します。エンジニア初心者から上級者まで、この記事が役立つ内容となっていますので、ぜひ参考にしてください。 itemslide.jsの概要 itemslide.jsは、タッチ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリです。特に、スマートフォンやタブレットなどのモバイルデバイスでの使用に最適化されており、上下左右のスワイプ、スクロール、クリックによるスライド操作をサポートします。 スライダーのCSS設定 スライダーを表示するためのCSSは、視覚的な美しさと操作性を兼ね備えることが重要です。以下は、itemslide.jsを使っ
Web開発において、数値を見やすく表示することは重要です。そのために、特に大きな数値に3桁ごとにカンマを入れるのは一般的です。 本記事では、PHPのnumber_format()とJavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示する方法を解説します。 数値を3桁カンマ区切りにするスタイル 数値の表示に際し、適切なフォントサイズや見た目も重要です。以下は数値を表示する際に参考になるCSSの記述です。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 0 0; line-height: 1.8em; } h2{ font-size: 18px; padding-top: 20p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
