JavaScriptおすすめパララックスプラグイン12選｜DAD UNION – エンジニア同盟
パララックス（視差効果）演出といっても上下左右スクロールや回転等様々な演出がありますが、その中でJavaScriptおすすめパララックスプラグイン12選を紹介します。 simpleParallax.js シンプルにパララックス演出を実装できます。 simpleParallax.jsでのパララックス実装！ ScrollMagic.js パララックスとページスクロールと連動したアニメーションを表示できます。 ScrollMagic.jsで実現！パララックスとスクロールアニメーションの組み合わせ技術解説 Rellax.js jQuery不用で簡単にパララックスを実装できます。 Rellax.jsで簡単にパララックス効果を実装する方法 SUPERSCROLLORAMA ページ内のコンテンツをパララックスや色々なエフェクト演出で表示できます。 jquery.superscrollorama.jsで実
おすすめのJavaScriptを使ったDate・日付・日時・カレンダー系処理プラグイン9選｜DAD UNION – エンジニア同盟
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
JavaScriptおすすめスライダー系プラグイン23選｜DAD UNION – エンジニア同盟
Webサイト制作にあたりスライダー系の演出は必須といっても過言ではないです。 そこでおすすめのJavaScriptスライダープラグイン23選をご紹介します。 Slick.js カスタマイズ可能なカルーセル型スライダー。レスポンシブデザインに対応し、多彩なオプションを提供しています。 slick.jsを使った複数画像スライダープラグイン slick.jsを活用してmp4およびYouTube動画を効果的にスライド表示する方法 slick.jsを使って画像を徐々に拡大させながら切替表示する方法【jQuery】 Swiper.js レスポンシブでタッチ対応のスライダー。カルーセル、スライドショー、カード表示など様々なスタイルに対応しています。 Swiper.jsを使ったレスポンシブ対応の複数画像スライダープラグイン Owl Carousel レスポンシブでカスタマイズ可能なカルーセルスライダー。タ
簡単に実装！Glide.jsプラグインで魅力的なスライダー表示をする方法｜DAD UNION – エンジニア同盟
Glide.jsは、シンプルで使いやすいスライダープラグインです。簡単に導入できるので、Webサイトに魅力的なスライダーを追加したい方にはおすすめです。 今回は、Glide.jsプラグインを使ってスライダーを表示する方法を、具体的なコードとともに紹介します。 Glide.jsプラグインとは？ Glide.jsは、依存関係のない軽量なJavaScriptスライダーとカルーセルのライブラリです。シンプルな構造でありながら、多機能でカスタマイズ性に優れているため、多くのプロジェクトで利用されています。 CSS記述 まずは、glide.cssファイルを読み込みます。以下のコードをHTMLのheadセクションに追加してください。 <link rel="stylesheet" href="glide.css"> <style> body { background: #000000; font-size
progressbar.jsを使ってページ表示前にローディング（プログレスバーと数値％カウントアップ）表示の実装方法｜DAD UNION – エンジニア同盟
ウェブサイトのユーザビリティを向上させるためには、ページが完全に読み込まれる前に進捗を示すローディングインディケーターを表示することが重要です。 今回は、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
簡単に表を作成・編集！a-table.jsの使い方ガイド｜DAD UNION – エンジニア同盟
皆さん、表を作成する際に手間取った経験はありませんか？特に複数行・列がある表をゼロから作成するのは結構面倒ですよね。 今回は、そのような煩わしさを解消するためのプラグイン、a-table.jsをご紹介します。 このプラグインを使えば、簡単にtableタグを編集・生成することができ、時間と労力を大幅に節約できます。 a-table.jsの基本的な使い方 まずは、a-table.jsを使用するために必要なCSSファイル fonts/a-table-icon.css a-table.css を読み込みます。その他、「/* table生成用CSS */」記述です。以下のコードをHTMLのheadタグ内に追加してください。 <link rel='stylesheet' href="fonts/a-table-icon.css"> <link rel="stylesheet" href="a-tabl
jQuery.toc.jsを使った目次表示プラグインの紹介｜DAD UNION – エンジニア同盟
本文の見出し（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
dayjs.jsで簡単に日時処理を行う方法｜DAD UNION – エンジニア同盟
今回は、JavaScriptの軽量な日時処理ライブラリであるdayjs.jsを使って、日時を簡単に表示する方法をご紹介します。 以前、「moment.jsを使って日時処理を簡単に表示する方法」を紹介しましたが、dayjs.jsも非常に使いやすいライブラリとして人気があります。 CSS記述 まず、CSSを使用してページのスタイルを設定します。以下のスタイルは必要に応じて調整してください。 <style> body { font-size: 18px; text-align: center; line-height: 1.6em; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0 0 0; } p{ padding-bottom: 20px; } </style> HTML記述 次に、H
jQueryとは？今後将来的にどうなる？必要？｜DAD UNION – エンジニア同盟
jQueryはWeb開発者に非常に人気があり、初心者から上級者まで幅広く使われてきました。 最近ではJavaScriptのネイティブAPIの進化により、jQueryよりもシンプルかつ効率的に処理を行うことが可能になってきています。 そのため、新しいプロジェクトではjQueryよりもモダンなフレームワークやネイティブJavaScriptを検討する傾向が強まっています。 jQueryは将来的にどうなるのかを考えてみました。 jQueryとは？ jQuery（ジェイクエリー）は、2006年にリリースされたJavaScriptのライブラリです。JavaScriptをより簡単に使いやすくし、クロスブラウザの互換性を向上させることを目的としています。jQueryはHTML文書の要素を操作したり、アニメーションを追加したり、Ajaxを利用して非同期通信を行ったりすることができます。 jQueryの特徴
Garlic.jsで簡単にフォーム入力内容をローカルストレージに保存する方法｜DAD UNION – エンジニア同盟
今回は、Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法をご紹介します。 この機能を使用すると、ユーザーが入力した内容を保持し、ページを再表示（ページの更新「F5」または別ページに遷移してフォームに戻る）しても入力内容を失うことがなくなります。 Garlic.jsとは Garlic.jsは、フォーム入力を自動的に保存し、ユーザーがフォームを再度開いたときに入力内容を復元する便利なライブラリです。これにより、ユーザーエクスペリエンスが向上し、誤ってページを閉じたり、インターネット接続が切れたりしても入力内容が失われる心配がなくなります。 CSSの記述 まずは、入力フォームのスタイルを設定しましょう。以下のCSSを使用して、基本的なスタイルを整えます。必要に応じて変更してください。 <style> body { font-size: 18px; text-align
jquery.rwdImageMaps.jsとレスポンシブデザインでクリッカブルマップを作成する方法｜DAD UNION – エンジニア同盟
この記事では、jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応させる方法をご紹介します。 これにより、ユーザーがどのデバイスを使用していても適切なインタラクティブ体験を提供できます。 はじめに ウェブサイトのデザインにおいて、画像の一部をクリック可能にするmapタグを使うことがあります。しかし、デバイスの画面サイズが変わると、従来のmapタグは正確に機能しないことがあります。そこで、jquery.rwdImageMaps.jsを使用して、画像マップをレスポンシブに対応させる方法を説明します。 CSSの設定 まず、mapタグを設定する画像（img[usemap]）のCSSを設定します。必要に応じて以下のスタイルを変更してください。 <style> body { font-size: 18px; text-align: ce
moment.jsで簡単！JavaScript日時処理の方法と実例｜DAD UNION – エンジニア同盟
JavaScriptで日付や時間の操作を行う際に便利なライブラリとして、moment.jsがあります。このライブラリを使うことで、複雑な日時処理が簡単に行えます。 今回は、moment.jsを使って日時を表示する方法について紹介します。 CSSスタイルの設定 まず、日時を表示するためのページのスタイルを設定します。以下のCSSコードを使って、ページの見た目を整えましょう。 <style> body { font-size: 18px; text-align: center; line-height: 1.8em; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } h2{ text-align: center; font-size: 20px; padding-top: 20px
jClocksGMT.jsを活用して世界各国の時間をリアルタイム表示する方法｜DAD UNION – エンジニア同盟
今回は、jClocksGMT.jsを使ってグリニッジ標準時（GMT）から各国の時間を時計で表示する方法を紹介します。 このライブラリを使うと、簡単に複数のタイムゾーンの時計をウェブページに表示できます。分かりやすいように、詳細な手順を解説します。 jClocksGMT.jsとは？ jClocksGMT.jsは、jQueryベースのプラグインで、グリニッジ標準時を基準にして各国の時間をアナログまたはデジタル時計で表示することができます。多くのオプションが用意されており、簡単にカスタマイズ可能です。 ステップ1：CSSの設定 まず、時計表示のエリア（.jcgmt-container）のスタイルを設定します。以下のCSSを追加して、時計の見た目を整えましょう。 <style> body { font-size: 16px; text-align: center; } h1{ text-align
jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法｜DAD UNION – エンジニア同盟
Webサイトやアプリケーションで、動的でインタラクティブなレイアウトを実現するために、ドラッグ＆ドロップ可能なグリッドエリアを利用することがあります。 この記事では、jQueryプラグインのGridster.jsを使って、簡単にドラッグ＆ドロップ可能なグリッドエリアを実装する方法を紹介します。具体的なコード例とともに説明していきます。 Gridster.jsとは？ Gridster.jsは、jQueryプラグインの一つで、ドラッグ＆ドロップ可能なグリッドレイアウトを簡単に作成できるツールです。このプラグインを使うことで、ユーザーはグリッド内のウィジェットを自由に移動させたり、サイズを変更したりすることができます。 CSSでグリッドエリアをスタイリング まずは、グリッドエリアをスタイリングするためのCSSコードを見てみましょう。 jquery.gridster.min.cssファイルを読み込
jquery.bookblock.jsで本のページめくり風に複数画像を表示する方法｜DAD UNION – エンジニア同盟
今回は、「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動画をモーダル表示する方法｜DAD UNION – エンジニア同盟
今回は、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
BootstrapとCandlestick.jsでチェックボックスをスイッチ風にデザイン表示する方法｜DAD UNION – エンジニア同盟
今回は、チェックボックスをより魅力的にするための方法を紹介します。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
Turntable.jsの使い方：スクロールとカーソル移動で複数画像を切り替える方法｜DAD UNION – エンジニア同盟
今回は、画像をスムーズに切り替える方法をご紹介します。使うのは、簡単に使えるJavaScriptライブラリ「turntable.js」です。このライブラリを使うことで、画像をまるでアニメーションのように表示することができます。 この記事では、初心者でも分かりやすいように、具体的なコードと共に説明していきます。ぜひ最後まで読んで、あなたのプロジェクトに役立ててください！ Turntable.jsの魅力 Turntable.jsは、マウスのスクロールやカーソルの移動に応じて画像を切り替えることができるライブラリです。特に以下の点が魅力です： インタラクティブな表現：ユーザーの操作に応じて画像が変化し、視覚的な楽しさを提供します。 簡単な実装：基本的なHTML、CSS、JavaScriptの知識があれば、すぐに導入できます。 柔軟な設定：x軸、y軸、スクロールに対応しているため、さまざまな演出が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tableexport.jsを使ってWebページの表（table）をxlsx、csv、txtファイルでダウンロードする方法｜DAD UNION – エンジニア同盟
Uncaught SyntaxError: “[object Object]” is not valid JSONエラーの回避と解決のアプローチ｜DAD UNION – エンジニア同盟![Uncaught SyntaxError: “[object Object]” is not valid JSONエラーの回避と解決のアプローチ｜DAD UNION – エンジニア同盟](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7256844e21209a2e87bc29ed1cf1d54b69ab444/height=288;version=1;width=512/https%3A%2F%2Fdad-union.com%2Fwp-content%2Fuploads%2F2023%2F06%2Fpic20230629.jpg)
