初心者でもできる！CSS矢印アニメーションとjQuery slideToggle/toggleClassで作るFAQセクション｜DAD UNION – エンジニア同盟
Webデザインの世界では、ユーザーの注意を引きつけ、同時に情報を整理する方法が常に求められています。FAQセクションは、その素晴らしい例です。 この記事では、CSS（矢印）とjQuery（slideToggle、toggleClass）を使用して、質問と回答が綺麗に整理され、かつインタラクティブに表示されるFAQセクションを作成する方法を紹介します。 CSSで矢印アイコンをデザイン まずは、ユーザーが視覚的にFAQセクションを理解できるように、CSSを使って矢印アイコンをデザインしましょう。ここでは、矢印が質問の横に表示され、クリックすると回答が表示されるようにします。矢印のデザインとその挙動の変化がユーザーの興味を引きます。 下矢印（.qa .arrow::before）と上矢印（.qa .arrow.active::before）、質問エリア（.qa ul li）に対する回答エリア（.
JavaScriptおすすめパララックスプラグイン11選｜DAD UNION – エンジニア同盟
パララックス（視差効果）演出といっても上下左右スクロールや回転等様々な演出がありますが、その中でJavaScriptおすすめパララックスプラグイン11選を紹介します。 simpleParallax.js シンプルにパララックス演出を実装できます。 simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法 ScrollMagic.js パララックスとページスクロールと連動したアニメーションを表示できます。 ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示する方法 Rellax.js jQuery不用で簡単にパララックスを実装できます。 jQuery不使用のRellax.jsを使って簡単にパララックスを実装し表示する方法 SUPERSCROLLORAMA ページ内のコンテンツをパララックスや色々なエフェクト演出で表示できます
おすすめのJavaScriptを使ったDate・日付・日時・カレンダー系処理プラグイン9選｜DAD UNION – エンジニア同盟
JavaScriptを使ってるとDate・日付・日時・カレンダー系処理は必ずやることになります。 今回はおすすめのJavaScriptを使ったDate・日付・日時・カレンダー系処理プラグイン9選をご紹介します。 exdate.js Dateオブジェクトを拡張し、日時（年月日時分秒）を指定フォーマットに表示します。 exdate.jsを使ってDateオブジェクトの日時を指定フォーマットに表示 dateformat.js 日時や日付を指定のフォーマット（ゼロ埋め等）表示できます。 【dateformat.js】日時、日付を指定フォーマットで表示する方法 Day.js JavaScriptのDateの機能を使わずに日時処理を簡単に表示できます。 dayjs.jsを使った日時処理 Moment.js Day.js同様JavaScriptのDateの機能を使わずにmoment.jsを使って日時処理を
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; position: relative; } .wrap{ position: fixed; z-index: 999; width: 100%; height: 10
jquery.toc.jsを使って本文の見出しを目次表示するプラグイン｜DAD UNION – エンジニア同盟
jquery.toc.jsを使って本文の見出し（h2～h4）を目次にして表示するプラグインをご紹介します。 ブログサイトで使えそうなjsプラグインです。 jquery.toc.jsを使って本文の見出しを目次表示する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: 20px; } #toc { background: #fefefe; width: 240px; position: fixed; border: 1px solid #ddd; c
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」または別ページに遷移してフォームに戻る）しても入力内容を保持します。 入力フォームの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; } .fb{ font-weight: bold; } </style> Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するHTMLの記述
jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応する方法｜DAD UNION – エンジニア同盟
jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するCSS記述 ※mapタグを設定する画像（img[usemap]）の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; } p{ padding-bottom: 10px; } img[usemap] { border: none; height: auto; max-width: 100%; width: auto; } </style> jquery.rwdImageMaps
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示する方法｜DAD UNION – エンジニア同盟
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するCSS記述 ※時間を時計で表示するエリア（.jcgmt-container）のCSS記述です。必要に応じて変更して下さい。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{ padding-bottom: 20px; } .clockarea{ width: 230px; margin: 0 auto; } .jcgmt-container { float:left; padding: 3px; } .jcgmt-container .jcgmt-lbl { font-size:10px;
jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示する方法｜DAD UNION – エンジニア同盟
jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法をご紹介します。 jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するCSS記述 ※jquery.gridster.min.cssファイルを読み込みます。複数のグリッドエリア（.gridster）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="jquery.gridster.min.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法｜DAD UNION – エンジニア同盟
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法をご紹介します。 過去にページめくり系プラグイン、 「FullscreenBookBlock：ページめくりを導入する方法」 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するCSS記述 ※bookblock.cssファイルを読み込みます。画像切替りエリア（.bb-bookblock）とナビゲーションリンク（.bb-custom-wrapper nav a）等のCSS記述です。必要に応じて変更して下さい。 <link
modaal.jsを使って複数のYouTube動画をモーダル表示する方法｜DAD UNION – エンジニア同盟
modaal.jsを使って複数のYouTube動画をモーダル表示する方法をご紹介します。 リンククリックでYouTubeの埋め込み動画（iframe）をモーダル表示します。 modaal.jsを使って複数のYouTube動画をモーダル表示するCSS記述 ※modaal.min.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: center; } h1{ text-align: center; font-size:
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法｜DAD UNION – エンジニア同盟
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法をご紹介します。 candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するCSS記述 ※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-awesome.min.css" rel="stylesheet"> <link href="candlestick.css" rel="style
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法｜DAD UNION – エンジニア同盟
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法をご紹介します。 複数枚のコマ送り画像を用意して切替表示するとアニメーションみたいに出来ます。回転する3D画像を用意しても良いですね。 turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するCSS記述 ※複数画像を切替表示するエリア（.turntable、.turntable ul、.turntable ul li）のCSS記述です。必要に応じて変更して下さい。 <style> body{ padding: 0; margin: 0; text-align: center; font-size: 16px; } h1{ font-size:20px; line-height:1.6em; text-align:center; padding: 15px 0
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
【Laravel】非同期通信でテーブルデータを検索し取得表示する方法【ajax、response()->json】｜DAD UNION – エンジニア同盟
usersテーブルのテーブルデータ用Modelの記述 ※User.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class User extends Model { } ?> 非同期通信でテーブルデータを検索し取得表示するID検索ページのviewの記述 ※users.blade.phpファイルを用意します。IDを検索し検索結果として名前を出力表示するページです。 入力フォーム箇所の記述 ※ID検索テキストボックス（user_id）と検索結果（名前）テキストボックス（user_name）を用意します。 <div> <label for="user_id">ID検索</label> <input type="text" id="user_id" name="user_id" value="
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; } [
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;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
