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
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
jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法｜DAD UNION – エンジニア同盟
Webサイトやアプリケーションで、動的でインタラクティブなレイアウトを実現するために、ドラッグ＆ドロップ可能なグリッドエリアを利用することがあります。 この記事では、jQueryプラグインのGridster.jsを使って、簡単にドラッグ＆ドロップ可能なグリッドエリアを実装する方法を紹介します。具体的なコード例とともに説明していきます。 Gridster.jsとは？ Gridster.jsは、jQueryプラグインの一つで、ドラッグ＆ドロップ可能なグリッドレイアウトを簡単に作成できるツールです。このプラグインを使うことで、ユーザーはグリッド内のウィジェットを自由に移動させたり、サイズを変更したりすることができます。 CSSでグリッドエリアをスタイリング まずは、グリッドエリアをスタイリングするためのCSSコードを見てみましょう。 jquery.gridster.min.cssファイルを読み込
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軸、スクロールに対応しているため、さまざまな演出が
JavaScript:テキスト値の変更後にon(‘change’)イベントを自動的に起動する実践ガイド｜DAD UNION – エンジニア同盟
現代の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
Slidebars.jsを使って簡単にサイドバーとプッシュメニューを実装する方法【初心者ガイド】｜DAD UNION – エンジニア同盟
Webサイトのナビゲーションやメニュー表示に欠かせないサイドバー。この記事では、シンプルで柔軟なjQueryプラグイン「Slidebars.js」を使って、サイドバーやプッシュメニューエリアを簡単に実装する方法を紹介します。初心者の方でもわかりやすく解説しますので、ぜひチャレンジしてみてください！ Slidebars.jsとは？ Slidebars.jsは、レスポンシブ対応のサイドバーメニューを手軽に実装できる軽量なjQueryプラグインです。左右や上下にスライドするメニューを簡単に作成でき、ユーザーに快適なナビゲーション体験を提供します。 必要なファイルを準備 まずは、Slidebars.jsを使用するために必要なファイルを用意しましょう。必要なファイルは以下の通りです。 slidebars.css jquery.min.js (v1.12.2) slidebars.js これらのファイ
ScrollMagic.jsで実現！パララックスとスクロールアニメーションの組み合わせ技術解説｜DAD UNION – エンジニア同盟
ScrollMagic.jsを使ったウェブページでの魅力的なパララックス効果とスクロールアニメーションの導入方法について、実践的なガイドを提供します。 このテクノロジーは、訪問者にインタラクティブな体験を提供することで、ウェブサイトのエンゲージメントを高めることができます。初心者でもステップバイステップで理解しやすく、経験豊富な開発者にも役立つ内容を心がけています。 ScrollMagic.jsとは？ ScrollMagic.jsは、ウェブサイトにおけるスクロール操作をトリガーとしたインタラクティブなアニメーションを簡単に実装することができる強力なJavaScriptライブラリです。このライブラリを使うことで、ページ内要素の動きをスクロール位置に応じて制御することが可能になります。特に、パララックス効果の実現には非常に有効です。 環境設定 ScrollMagic.jsを利用する前に、いくつ
PHPとJavaScriptで数値を3桁カンマ区切りに表示する簡単な方法｜DAD UNION – エンジニア同盟
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
jquery.superscrollorama.jsで実現するパララックスエフェクトとアニメーション｜DAD UNION – エンジニア同盟
Webページのエフェクトとして注目を集めるパララックスやアニメーションですが、jquery.superscrollorama.jsを使ってこれらのエフェクトを簡単に実装する方法をご紹介します。 この記事では、ページのスクロールに合わせてコンテンツが視覚的なエフェクトを持って表示される方法を解説します。jquery.superscrollorama.jsは、スクロールとともにページ内の要素を操作するためのJavaScriptライブラリです。 CSSの記述 まず、エフェクト表示を実装するためのCSSスタイルを準備しましょう。次に記述するCSSは、normalize.cssファイルを先に読み込んでから、パララックスやアニメーション効果を適用したい要素に適用するCSS記述例です。 パララックスや色々なエフェクト表示エリア（.demo #wrapper、#fly、#scale）のCSS記述です。 <
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にする方法｜DAD UNION – エンジニア同盟
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にし、あわせてliタグのdata-id値をjson形式で出力するをご紹介します。 jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするCSS記述 ※liタグ一覧エリア（.nestable-lists）、json形式の出力エリア（#nestable-output）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 0; padding: 0; font-size: 20px; line-height: 1.8em; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.8em; padding: 15p
jquery.flip-quote.jsでウェブサイトの引用文をハイライト表示する簡単ガイド｜DAD UNION – エンジニア同盟
ウェブサイト上で引用文を目立たせたいですか？ jquery.flip-quote.jsを使用することで、引用符（“”）内のテキストをハイライトし、インタラクティブな演出を加える方法をご紹介します。このツールを使えば、ユーザーがページをスクロールすると引用文が効果的に表示され、クリックすることで色が変わります。この記事では、CSS、HTML、JavaScriptの各部分にわたって、このスクリプトを実装する方法を詳しく解説します。 CSSで魅力的な引用文のスタイルを作成 まずは、jquery.flip-quote.cssをウェブページに組み込み、基本的なスタイリングを行います。 ここでは、フォントサイズや行間、余白などの基本的なスタイルを設定し、引用文が際立つようにします。 <link href="jquery.flip-quote.css" rel="stylesheet"/> <style
jQueryを使った動的ウェブデザイン：スクロールでコンテンツエリアをビジュアルエリアにオーバーレイ表示する方法｜DAD UNION – エンジニア同盟
ウェブデザインとフロントエンド開発の世界は常に進化しています。今回は、ブラウザサイズに応じて動的に変化するビジュアルエリアを作成し、ユーザー体験を向上させる方法をご紹介します。jQueryを使ったシンプルなテクニックで、サイトの見た目と機能性を格段に向上させましょう。 CSSによるビジュアルエリアとコンテンツエリアのスタイリング このセクションでは、.headArea（ビジュアルエリア）と.contentsArea（コンテンツエリア）のCSSスタイリングについて詳しく解説します。 自分のプロジェクトに合わせてカスタマイズできるように、基本的なスタイル指南と実用的なヒントを提供します。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; paddi
汎用的スライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法｜DAD UNION – エンジニア同盟
ページャーやコントローラー、ループ、スマホ対応 等に対応した汎用的なスライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法をご紹介します。 スライダー系って色々種類あって各々オプションを覚えるのに時間掛かります。 jquery.bxslider.jsを使って複数画像スライダーを表示するCSS記述 ※jquery.bxslider.cssファイルを読み込みます。スライドエリア（.wrap）のCSS記述です。必要に応じて変更して下さい。 <link href="jquery.bxslider.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px;
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像スライドギャラリーを表示する方法｜DAD UNION – エンジニア同盟
軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示する方法をご紹介します。スライダー系プラグインは色々あるので決め手は軽量でシンプルなものにした方が良いかもしれないです。 軽量スライダーlightslider.jsを使ってスワイプに対応した複数画像をスライドギャラリー表示するCSS記述 ※lightslider.cssファイルを読み込みます。スライドエリア内（.demo）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="lightslider.css"/> <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; } h1
表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示する方法｜DAD UNION – エンジニア同盟
jquery.fixedTblHdrLftCol.jsを使って、表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示する方法をご紹介します。 HTMLページでも表（table）が縦長or横長になると先頭行が見えなくなるので、そんな時に使えます。 表（table）をエクセルの「ウィンドウ枠の固定」の様に表示するCSS記述 ※表（table）と「ウィンドウ枠の固定」後のエリア（div.fTHLC-xxxxx）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0 2
JavaScriptでthisを理解する：関数へのパラメータ渡しと実用的な使い方ガイド｜DAD UNION – エンジニア同盟
JavaScript開発者なら誰しもが一度は悩まされるthisキーワード。今日は、thisをより深く理解し、実際のコーディングに活かすための一例をご紹介します。具体的には、クリックしたボタンの兄弟要素のテキストをalertメッセージで表示するシンプルながらも実践的な使用法を見ていきましょう。 スタイル設定:見た目も大切に まずは基本的なCSSで、ボタンエリア（.clkarea）の見た目を整えます。この部分はご自身のサイトデザインに合わせて調整してください。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0; } .clkarea{ curs
slick.jsを使ってmp4とYouTube動画をスライド表示する方法｜DAD UNION – エンジニア同盟
slick.jsを使ってmp4とYouTube動画をスライド表示する方法をご紹介します。 mp4とYouTube動画なのでスマホにも対応出来ますが、iPhoneのsafariは動画の自動再生はされないです。 slick.jsを使ってmp4とYouTube動画をスライド表示するCSS記述 ※CDNのslick.css、slick-theme.cssファイルを読み込みます。スライドエリア（.slider）とドットインジケーター（.slick-dots）等のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.ne
videoタグの動画（mp4、webm）を背景に表示する方法【covervid.js】｜DAD UNION – エンジニア同盟
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示する方法をご紹介します。 videoタグの動画（mp4、webm）を背景に表示するCSS記述 ※vieoタグを囲むエリア（.treewrap）のCSS記述です。必要に応じて変更して下さい。 <style> html, body { margin: 0; font-size: 16px; text-align: center; } .treewrap{ position: relative; min-width: 720px; } h1{ text-align: center; font-size: 40px; padding: 50px 0 0 0; position: absolute; width: 100%; color: #ffffff; } .content{ font-size: 40px; pa
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法｜DAD UNION – エンジニア同盟
モーダル表示にも色々ありますが、今回はanimatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法をご紹介します。 animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するCSS記述 ※animate.min.cssファイルを読み込みます。モーダルエリアの閉じるボタン（#btn-close-modal）のCSS記述です。その他、必要に応じて変更して下さい。 <link rel="stylesheet" href="animate.min.css"> <style> * { padding: 0; margin: 0; } body { font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 24px; padding: 20px 0 40px 0;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
