Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示する方法｜DAD UNION – エンジニア同盟
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するCSS記述 ※slidebars.cssファイルを読み込みます。サイドバー以外のエリア（canvas=container）とサイドバーのエリア（off-canvas）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="slidebars.css"> <style> html, body { margin: 0; } h1{ text-align: center; font-size: 20px; padding: 20px 0; width: 100%; line-height: 1.4em; } h4{ padding-top: 15px; } [canvas=container], [off-canvas] { padding: 10px 20px; } [
simpleParallax.jsでのパララックス実装！初心者でも分かるステップバイステップガイド｜DAD UNION – エンジニア同盟
パララックスとは、背景と前景が異なる速度でスクロールされることにより、立体的な動きや深みを感じることができる効果のことを言います。特にWebデザインで人気があり、動きがあることでサイト訪問者の注目を引くことができます。 simpleParallax.jsは、このパララックス効果を簡単に実装することができるJavaScriptのライブラリです。この記事では、simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法をステップバイステップでご紹介します。 CSS記述の準備 まず、bodyタグの高さを指定してスクロールできるようにします。こちらの例では「height: 1500px」としていますが、内容に応じて適宜変更してください。 <style> body { padding: 0; height: 1500px; text-align: center; } h1{
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示する方法｜DAD UNION – エンジニア同盟
ScrollMagic.jsを使ってパララックスとページスクロールと連動したアニメーションを表示する方法をご紹介します。 ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するCSS記述 ※normalize.cssファイルを読み込みます。パララックスとスクロールアニメーションエリア（.box1）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="normalize.css" type="text/css"> <style> body { padding: 0; height: 2000px; width: 2200px; } h1{ text-align: left; font-size: 20px; line-height: 1.8em; padding: 15px 50px; } .box1
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法｜DAD UNION – エンジニア同盟
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法をご紹介します。 スライダーが上下左右スワイプ、スクロール、クリックすると左右にスライドします。 itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するCSS記述 ※スライドエリア（#scrolling、ul、li、.itemslide-active）の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; } #scrolling { position:fixed; top:28%; bac
【PHP,JavaScript】簡単に数値を3桁カンマ区切りに表示する方法｜DAD UNION – エンジニア同盟
PHPのnumber_format()、JavaScriptのtoLocaleString()を使って簡単に数値を3桁カンマ区切りに表示する方法をご紹介します。 PHPまたはJavaScriptを使って簡単に数値を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: 20px; } h3{ font-size: 16px; padding-top: 20px; } ul,li{ list-style: none; margin: 0;
jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示する方法｜DAD UNION – エンジニア同盟
Rellax.jsを使って簡単にパララックスを実装し表示するCSS記述 ※パララックス実装エリア（.container、.block、.rellax）のCSS記述です。必要に応じて変更して下さい。 <style> body { font-weight: bold; font-size: 20px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 0 0; line-height: 1.8em; } section{ padding-bottom: 100px; overflow: hidden; } .col { text-align: left; width: 50%; float: left; box-sizing: border-box; } h4{ text-align:
baguetteBox.js実践ガイド: Lightbox風ギャラリーの簡単設置手順｜DAD UNION – エンジニア同盟
baguetteBox.jsは、Lightbox風のギャラリー表示を簡単に実装できるJavaScriptライブラリです。 この記事では、baguetteBox.jsを使用して、魅力的なギャラリーページを手軽に実装する方法について詳しく解説します。 はじめに:baguetteBox.jsとは？ baguetteBox.jsは、レスポンシブでタッチフレンドリーなLightboxギャラリーを簡単に実装できるライブラリです。 オリジナルのLightboxと比較して、軽量でありながら多機能で、モダンなブラウザに対応しています。 CSSの設定:ギャラリーの見た目を整える まず、baguetteBox.jsを適切に表示するためのCSSを設定します。baguetteBox.cssファイルを読み込みます。 ここでは基本的なスタイリングの例として、.gallery クラスをターゲットにしたスタイルを示します。
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
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
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お名前.comで取得した独自ドメインのDNSレコードにさくらのレンタルサーバのA/MX/TXTレコードを設定する方法｜DAD UNION – エンジニア同盟
