BeerSlider.jsの完全ガイド：ビフォー・アフター画像の差分表示手法｜DAD UNION – エンジニア同盟
BeerSlider.jsは、2枚の画像をスライダーで比較できるシンプルなJavaScriptライブラリです。 この記事では、BeerSlider.jsを使用してビフォー・アフター画像を重ねて表示する方法をステップバイステップで解説します。 なぜBeerSlider.jsを使うのか？ ビフォー・アフター画像を表示する方法は多数ありますが、BeerSlider.jsは以下のメリットがあります。 軽量で高速 カスタマイズが容易 レスポンシブ対応 クロスブラウザ対応 必要なCSSの設定 まず、BeerSlider.cssファイルを読み込むことで、スライダーの基本的なスタイルを適用します。以下のコードをコピーして、あなたのHTMLファイルのヘッダ部分に貼り付けてください。デザインに合わせてスタイルをカスタマイズすることもできます。 <link rel="stylesheet" href="Beer
intense.jsを活用した画像拡大・スクロール表示の実践ガイド｜DAD UNION – エンジニア同盟
intense.jsは、クリックした画像をビューアとして拡大表示するための非常にシンプルで効果的なJavaScriptライブラリです。 この記事では、intense.jsを使用して画像を拡大表示し、拡大画像を上下左右にスクロール表示する方法を解説します。 前提となるCSSの設定 まずは、拡大表示する画像のサムネイルエリアを定義するためのCSSを設定します。このサムネイルエリアは .demo クラスとして定義されます。 このエリアは、マウスカーソルを上に乗せると拡大マークが表示され、クリックすることで画像が拡大されるようになっています。 <style> * { padding: 0; margin: 0; } body { font-size: 14px; text-align: center; } .ttl{ text-align: center; font-size: 20px; pad
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定する方法｜DAD UNION – エンジニア同盟
animation-fill-modeを使ってCSSアニメーションの実行前後のスタイルを指定する方法をご紹介します。 animation-fill-modeは4つ指定可能 none（デフォルト） アニメーション実行前後のスタイルは指定されない。デフォルトのスタイルが適用される。 backwards アニメーション開始待ち時間「animation-delay」、「@keyframes」の開始「0%」の状態が適用される。 アニメーション終了時「@keyframes」は適用されない。 forwards アニメーション開始待ち時間「animation-delay」、「@keyframes」は適用されない。 アニメーション終了時、「@keyframes」の終了「100%」の状態が適用される。繰り返しアニメーションの場合はアニメーション終了時の状態が適用される。 both アニメーション開始待ち時間「
particles.jsを使ってページ全体に幾何学模様のアニメーション表示する方法｜DAD UNION – エンジニア同盟
particles.jsを使ってページ全体に幾何学模様のアニメーション表示するCSS記述 ※ページ全体に幾何学模様のアニメーション表示するエリア（#particles-js）のCSS記述です。必要に応じて変更して下さい。 <style> * { padding: 0; margin: 0; } body { font-size: 18px; text-align: center; } h1{ width: 100%; text-align: center; font-size: 24px; padding: 20px 0 40px 0; line-height: 1.8em; position: absolute; color: #ffffff; } #particles-js{ width: 100%; height: 100%; background-color: #000; back
【Laravel】登録・更新時のDBデータ重複チェック方法（Validator＋unique、DB::table＋whereRaw）｜DAD UNION – エンジニア同盟
Validatorとuniqueを使ってメールアドレスの重複チェック Validatorとuniqueを使った登録処理重複チェックのControllerの記述 ※UsersController内の登録処理entry()内のバリデーションチェック時にメールアドレスに対して重複チェックを行います。 「’email’ => ‘required|unique:users,email」の記述より、「unique:users,email」にてusersテーブルのemailカラムに重複したメールアドレスが登録されて無いかチェックします。 public function entry(Request $request) { //バリデーション $validator = Validator::make($request->all(), [ 'name' => 'required', 'email' => 'r
jQueryでのフォーム送信前の確認ダイヤログ実装方法｜DAD UNION – エンジニア同盟
Webページのフォームを送信する前に、ユーザーへの確認ダイヤログを表示するのは良いUXの一部です。特に重要な操作、例えばデータの削除や変更の際に確認を求めることで、誤操作を防ぐ助けになります。今回は、この実装方法を紹介します。 基本的なスタイルの設定 まず、確認ボタン（.btn1）のデザインを調整します。以下はその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; line-height: 1.8em; } .btn1{ padding: 6px; } </style> HTM
下スクロール時の背景パララックス実装ガイド: jarallax.jsを活用した方法｜DAD UNION – エンジニア同盟
Webデザインのトレンドとして人気のあるパララックススクロール。この記事では、jarallax.jsを使用してページ背景にパララックス効果を簡単に実装する方法をご紹介します。さらに、背景にYouTube動画を設定する方法も取り上げます。実際に作成したデモページも公開しているので、ぜひチェックしてみてください。 CSSを用意する まずは、パララックスエフェクトを適用するエリアのスタイリングを行います。以下は.jarallaxクラスを持つエリアの基本的なCSSです。このCSSはカスタマイズ可能なので、デザインに合わせて変更してください。 <style> *, :after, :before { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装する方法｜DAD UNION – エンジニア同盟
vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装する方法をご紹介します。 その他のパララックス系プラグインは縦または横スクロールに合わせてパララックス（視差効果）するのが多く見られますが、vanilla-tilt.jsはマウス操作に合わせたパララックスを行います。 vanilla-tilt.jsを使って要素にパララックスを実装するCSS記述 ※パララックスする要素8パターン（.example .box）のCSS記述です。必要に応じて変更して下さい。 <style> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; font-size: 22px; color: #333333; } body { display: -webkit-box; display: -ms-flexbox;
lax.jsを活用してプロレベルのパララックス効果を実装する手順｜DAD UNION – エンジニア同盟
パララックス効果をウェブデザインに取り入れることは、訪問者にとって魅力的なインタラクティブ体験を作り出し、ウェブサイトに深みを与える素晴らしい方法です。JavaScriptライブラリの一つであるlax.jsを用いて、簡単に美しいパララックスページを作成する手順をご紹介します。このライブラリを使用すると、スクロールに応じて動きが変わる、生き生きとしたページを実現できます。 lax.jsとは？ lax.jsは、開発者Alex Foxによって作られた、軽量でパワフルなJavaScriptライブラリです。スクロールやマウスの動き、さらにはジャイロスコープセンサーに応じたアニメーションをページに組み込むことができ、リッチなビジュアルエクスペリエンスを提供します。GitHubで無料で利用でき、カスタムアニメーションの作成も可能です。 パララックス効果を実装する前の準備 パララックス効果を実装する前に、
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
jquery.onebook3d.jsを使って画像を本をめくる様に表示する方法｜DAD UNION – エンジニア同盟
jquery.onebook3d.jsを使って画像を本をめくる様に表示演出する方法をご紹介します。WordPressのプラグインとしても利用出来るみたいです。 本のめくり演出するって自分でゼロからJavaScript作ろうとすると結構難しいですよね。 画像を本をめくる様に表示するCSS記述 ※必要に応じて変更して下さい。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; background-color: #000; color: #fff; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0 0 0; } </sty
表（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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お名前.comで取得した独自ドメインのDNSレコードにさくらのレンタルサーバのA/MX/TXTレコードを設定する方法｜DAD UNION – エンジニア同盟
