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.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{
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
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
【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.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示する方法｜DAD UNION – エンジニア同盟
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するCSS記述 ※normalize.cssファイルを読み込みます。パララックスや色々なエフェクト表示エリア（.demo #wrapper、#fly、#scale）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="normalize.css" type="text/css"> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-size: 20px; text-align: center; visibility: hidden; } .demo{ visibility: visible; } .demo #wrapper{ height: 1
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ページを開く
