baguetteBox.js実践ガイド: Lightbox風ギャラリーの簡単設置手順｜DAD UNION – エンジニア同盟
baguetteBox.jsは、Lightbox風のギャラリー表示を簡単に実装できるJavaScriptライブラリです。 この記事では、baguetteBox.jsを使用して、魅力的なギャラリーページを手軽に実装する方法について詳しく解説します。 はじめに:baguetteBox.jsとは？ baguetteBox.jsは、レスポンシブでタッチフレンドリーなLightboxギャラリーを簡単に実装できるライブラリです。 オリジナルのLightboxと比較して、軽量でありながら多機能で、モダンなブラウザに対応しています。 CSSの設定:ギャラリーの見た目を整える まず、baguetteBox.jsを適切に表示するためのCSSを設定します。baguetteBox.cssファイルを読み込みます。 ここでは基本的なスタイリングの例として、.gallery クラスをターゲットにしたスタイルを示します。
jquery.superscrollorama.jsで実現するパララックスエフェクトとアニメーション｜DAD UNION – エンジニア同盟
Webページのエフェクトとして注目を集めるパララックスやアニメーションですが、jquery.superscrollorama.jsを使ってこれらのエフェクトを簡単に実装する方法をご紹介します。 この記事では、ページのスクロールに合わせてコンテンツが視覚的なエフェクトを持って表示される方法を解説します。jquery.superscrollorama.jsは、スクロールとともにページ内の要素を操作するためのJavaScriptライブラリです。 CSSの記述 まず、エフェクト表示を実装するためのCSSスタイルを準備しましょう。次に記述するCSSは、normalize.cssファイルを先に読み込んでから、パララックスやアニメーション効果を適用したい要素に適用するCSS記述例です。 パララックスや色々なエフェクト表示エリア（.demo #wrapper、#fly、#scale）のCSS記述です。 <
BeerSlider.jsの完全ガイド：ビフォー・アフター画像の差分表示手法｜DAD UNION – エンジニア同盟
BeerSlider.jsは、2枚の画像をスライダーで比較できるシンプルなJavaScriptライブラリです。 この記事では、BeerSlider.jsを使用してビフォー・アフター画像を重ねて表示する方法をステップバイステップで解説します。 なぜBeerSlider.jsを使うのか？ ビフォー・アフター画像を表示する方法は多数ありますが、BeerSlider.jsは以下のメリットがあります。 軽量で高速 カスタマイズが容易 レスポンシブ対応 クロスブラウザ対応 必要なCSSの設定 まず、BeerSlider.cssファイルを読み込むことで、スライダーの基本的なスタイルを適用します。以下のコードをコピーして、あなたのHTMLファイルのヘッダ部分に貼り付けてください。デザインに合わせてスタイルをカスタマイズすることもできます。 <link rel="stylesheet" href="Beer
完全ガイド：particles.jsでウェブページに幾何学模様のアニメーションを追加する方法｜DAD UNION – エンジニア同盟
ウェブ開発の世界には、ユーザーの注目を引き、サイトに動きを加える多くのツールがありますが、その中でも特に魅力的なのが「particles.js」です。このJavaScriptライブラリを利用することで、サイト全体に幾何学模様の美しいアニメーションを簡単に追加することができます。 本記事では、初心者でもステップバイステップでこの魅力的なエフェクトを実装できるように解説します。 particles.jsの基本 particles.jsは、軽量ながらパワフルなJavaScriptライブラリで、ウェブページに動的なパーティクルシステム（粒子システム）を実装することができます。粒子とは、小さな点やアイコンなどが画面上で動く様子を指し、これが集まって複雑な動きや模様を作り出します。 particles.jsを使ってページ全体に幾何学模様のアニメーション表示するCSS記述 アニメーションを表示するための
vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装する方法｜DAD UNION – エンジニア同盟
ウェブデザインにおいて目を引く視差効果を簡単に実装する方法を、JavaScriptライブラリ「vanilla-tilt.js」を使って解説していきます。 このライブラリは、特にマウスの動きに反応して要素が傾くインタラクティブなエフェクトを加えることができ、ウェブサイトに斬新な動きをプラスすることが可能です。 その他のパララックス系プラグインは縦または横スクロールに合わせてパララックス（視差効果）するのが多く見られますが、vanilla-tilt.jsはマウス操作に合わせたパララックスを行います。 はじめに パララックス効果とは、スクロールやデバイスの傾き、マウスの動きに応じて背景と前景が異なる速度で動くことで立体感を出す技術です。多くのウェブサイトで利用されていますが、今回はマウスの動きに合わせて要素が動くタイプのパララックス効果に焦点を当てます。 vanilla-tilt.jsとは？ v
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
JavaScriptで0埋め：slice()による数値フォーマット完全ガイド｜DAD UNION – エンジニア同盟
JavaScriptのslice()メソッドを使用して、数値を指定した桁数でゼロ埋め表示する方法を簡単に解説します。このテクニックは、フォーム入力や表示の整形において非常に便利です。 ゼロ埋めとは？ ゼロ埋めとは、数値を特定のフォーマットに合わせるために、数字の前にゼロを追加することを指します。例えば、日付や時間、順序番号などを整形する際によく使用されます。 CSSでのスタイリング 表示エリアには、クリアで読みやすいスタイルを適用することが重要です。以下は、ゼロ埋めされた数値の出力エリア（#output）をスタイリングするためのCSSの例です。 <style> body { margin: 0; padding: 0; font-size: 20px; line-height: 1.8em; text-align: center; } h1{ text-align: center; fon
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
HTML5 Boilerplateで作る最適なHTML5ウェブサイトテンプレート｜DAD UNION – エンジニア同盟
ウェブ開発の世界は日々進化しています。そんな中で、「HTML5 Boilerplate」は、ウェブ開発者たちにとって必須のツールです。 この記事では、HTML5 Boilerplateの基本的な概念から、その使い方までを分かりやすく解説します。 HTML5 Boilerplateとは何か？ HTML5 Boilerplateは、HTML5をベースにしたウェブサイト構築のためのテンプレートです。このツールは、HTML、CSS、JavaScriptのコードが含まれており、ブラウザ間の互換性に優れたサイト作成を可能にします。これにより、開発者は各ブラウザでの動作確認に費やす時間を減らし、より創造的な作業に集中できるようになります。 主要機能とその利点 HTML5 Boilerplateには、以下のような特徴があります。 基本構造:doctype宣言から始まり、HTMLの基本的な枠組みを提供します
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
JavaScriptで実装する！フォーム送信の確認ダイアログ：Confirmメソッドの簡単ガイド｜DAD UNION – エンジニア同盟
ウェブ開発において、フォームの内容を送信する前にユーザーの確認を得ることは非常に重要です。 この記事では、JavaScriptのconfirmメソッドを使って、フォーム送信前に「送信する」「送信しない」という選択をユーザーに求める方法を分かりやすく解説します。 CSSによるフォームのスタイリング まず、フォームとその要素にスタイルを適用するためのCSSを見てみましょう。 ここでは、テキストボックス（.txt1）と送信ボタン（.btn1）のデザインを設定しています。これらのスタイルは、フォームの見た目を整えるのに役立ちます。 <style> * { padding: 0; margin: 0; } body { font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 24px; padding: 20
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;
Splide.jsで実現するスマートなスライダー：初心者から上級者まで使える完全ガイド｜DAD UNION – エンジニア同盟
今回はWebデザインの世界で話題のSplide.jsについて、その魅力と使い方をわかりやすく解説します。Splide.jsは、スワイプやタップに対応したスライダーを簡単に実装できる、使い勝手の良いJavaScriptライブラリです。これからご紹介する手順に沿って、あなたのウェブサイトも一層魅力的なものに変身させましょう。 Splide.jsの基本となるCSSの設定 まず最初に、Splide.jsを使うための土台となるCSSの設定から始めましょう。以下のコードをウェブサイトの適切な場所に追加してください。 splide.min.cssファイルの読み込み：このスタイルシートがSplide.jsの見た目を整えます。 カスタムスタイルの追加：ウェブサイトのデザインに合わせて、基本のスタイルを調整します。 <link rel="stylesheet" href="css/splide.min.css
jquery.rippleria.jsを使ってクリックするとおしゃれな波紋が広がるエフェクトを表示する方法｜DAD UNION – エンジニア同盟
jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示する方法をご紹介します。 jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するCSS記述 ※jquery.rippleria.min.cssファイルを読み込みます。ボタン（.btn）と画像エリア（aタグ）のCSS記述です。 <link rel="stylesheet" href="jquery.rippleria.min.css"> <style> body { font-size: 14px; text-align: center; line-height: 2em; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
