汎用的スライダー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;
効果的な画像表示で注目を集める！jquery.flipping_gallery.jsによるインタラクティブギャラリーの作り方｜DAD UNION – エンジニア同盟
ウェブサイトやブログで目を引くギャラリー表示を実現する方法として、「jquery.flipping_gallery.js」の活用法をご紹介します。 このライブラリを使えば、複数の画像を簡単に前後にフリップさせながら表示することができ、サイト訪問者に新鮮な視覚体験を提供できます。以下、実装方法からデモページの紹介まで、初心者にもわかりやすく解説していきます。 CSSでの基本設定 まずは、ギャラリー表示を美しく行うための基本的なCSS設定から始めます。この設定は、ギャラリーを適切に表示するための土台となります。 flipping_gallery.cssファイルを読み込みます。ギャラリー表示エリア（.gallery）のるCSS記述です。以下のCSSコードをご参照ください。 <style> <link href="flipping_gallery.css" rel="stylesheet" typ
jquery.qrcode.jsで簡単QRコード作成完全ガイド｜DAD UNION – エンジニア同盟
今回は非常に便利なツール、「jquery.qrcode.js」を使って、簡単にQRコードを生成する方法についてご紹介します。 この記事を読めば、あなたもQRコード生成のプロになれるかもしれませんよ！ はじめに QRコードは、今や私たちの生活に欠かせないものとなりました。店舗の情報、ウェブサイトへのリンク、あるいは個人間での情報共有など、多岐にわたる用途で利用されています。そんなQRコードを自分で生成できたら便利ですよね。今回は、Web開発で広く使われるjQueryのプラグイン「jquery.qrcode.js」を使って、誰でも簡単にQRコードを生成できる方法をご紹介します。 jquery.qrcode.jsとは 「jquery.qrcode.js」は、jQueryを使用してQRコードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で
farbtastic.jsを使ってinput（入力エリア）にカラーピッカーを表示する方法｜DAD UNION – エンジニア同盟
farbtastic.jsを使ってinput（入力エリア）にカラーピッカーを表示する方法をご紹介します。 input（入力エリア）にカラーピッカーを表示するCSSの記述 ※カラーピッカー用の画像（wheel.png、marker.png、mask.png）を.farbtastic .wheel、.farbtastic .overlay、.farbtastic .markerに用意します。必要に応じて変更して下さい。 <style type="text/css"> body{ text-align: center; } h1{ text-align: center; font-size: 22px; padding: 20px 0; line-height: 2em; } .cbox{ width: 250px; margin: 0 auto; } .farbtastic { positio
モーダル画面をブラウザ全体に表示する方法【fullmod.js】｜DAD UNION – エンジニア同盟
モーダル画面をブラウザフルで表示するCSSの記述 ※fullmod.min.cssファイルを読み込みます。ブラウザフルで表示されるモーダル画面（.fullmod）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="fullmod.min.css"> <style type="text/css"> body{ text-align: center; } h1{ text-align: center; font-size: 22px; padding: 20px 0; line-height: 1.4em; } button{ padding: 10px; font-size: 16px; } .fullmod{ color: #ffffff; background-color: #cccccc; } </style> モーダル画面をブラウ
FullscreenBookBlock：ページめくりを導入する方法｜DAD UNION – エンジニア同盟
過去にページめくり系プラグイン 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 ページめくりを導入するための読み込むCSSファイル ※jquery.jscrollpane.custom.css、bookblock.css、custom.cssファイルを読み込みます。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /
pagePiling.js入門：マウススクロールでスムーズなページ切り替えを実現する方法｜DAD UNION – エンジニア同盟
pagePiling.jsを使ってマウススクロールでページを切り替える方法を紹介します。 このライブラリを使用すると、フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの矢印キーでページを切り替えることができます。 pCSSの記述 まず、必要なCSSファイルjquery.pagepiling.cssフを読み込みます。次に、メニュー切り替えボタンやページセクション（#section1～4）のスタイルを定義します。必要に応じてこれらのスタイルをカスタマイズしてください。 <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" /> <style> p{ font-size: 2em; } .section{ text-align: center; } /* menu * --------
JavaScriptアニメーションライブラリTweenMaxを使ってタグ要素を移動する方法｜DAD UNION – エンジニア同盟
JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。 アニメーション移動するタグ要素のCSS記述 ※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:
slick.jsを使った複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
slick.jsは広く使用されているjQueryベースのスライダープラグインで、ウェブページに洗練されたスライダーやカルーセルを簡単かつ効率的に実装することができます。様々なオプションと機能を提供しているため、開発者は様々な要件に合わせたスライダーを作成することが可能です。 「複数画像スライダープラグイン【Swiper.js】」に続き、slick.jsを使ってレスポンシブやスマホ・タブレットのスワイプに対応した複数画像スライダープラグインをご紹介します。 slick.jsを使った複数画像スライダープラグインのCSS記述 ※slick.css、slick-theme.cssファイルを読み込みます。その他、必要に応じて書き換えてください。 <link rel="stylesheet" type="text/css" href="./slick/slick.css"> <link rel="st
後ろから前へ回転しながら複数コンテンツエリアを表示【jquery.vortex.js】｜DAD UNION – エンジニア同盟
今回は「jquery.vortex.js」を使って、コンテンツエリアを後ろから前へ回転させながら表示する方法を詳しく解説します。この技術を使えば、Webサイトにダイナミックな演出を加え、訪問者の目を引くことができます。丁寧に説明しますので、ぜひ最後までご覧ください。 jquery.vortex.jsとは 「jquery.vortex.js」は、jQueryをベースにしたプラグインで、要素を3D回転させながら表示することができるツールです。通常のスライドショーやフェードイン・アウトのエフェクトとは一線を画し、回転を使ったインパクトのある演出を実現します。特に、デザイン性が求められるWebサイトや、視覚的なエフェクトを多用したい場合に役立つツールです。 このプラグインの魅力は、簡単に使える点と、さまざまなオプションで細かく設定できる点です。たとえば、回転速度や深度、初期位置などを細かく調整でき
約10分で出来るjquery.vaccordion.jsを使って複数コンテンツをアコーディオン表示する方法｜DAD UNION – エンジニア同盟
この記事では、jquery.vaccordion.jsを使用して複数のコンテンツエリアをアコーディオン風に表示する方法を詳しく紹介します。JavaScript、HTML、CSSの基礎的な知識がある方なら、この記事を読みながらデモページを参考にすることで、約10分程度で実装できるようになります。 アコーディオンメニューは、限られたスペースで情報を整理して表示するのに便利な方法です。各コンテンツエリアがクリックされると、対応する部分が拡大表示され、他の部分が縮小される仕組みです。ぜひ最後までお読みいただき、実際に試してみてください。 jquery.vaccordion.jsとは jquery.vaccordion.jsは、jQueryプラグインの一つで、複数のコンテンツを縦方向にアコーディオン風に表示できる機能を提供します。このプラグインを使うと、ユーザーがクリックやホバーすることで、スムーズ
spacegallery.jsを使って奥から前へ整列した複数画像を表示させる方法｜DAD UNION – エンジニア同盟
spacegallery.jsを使った画像ギャラリーの表示方法を紹介します。このプラグインを使うことで、奥から前に向かって整列した複数の画像を表示し、クリックで画像を移動させることができます。 はじめに spacegallery.jsを活用し、奥から前へ整列した複数画像を表示する方法について解説します。ユーザーが画像をクリックすると、画像が前に移動するエフェクトを簡単に実現できます。 spacegallery.jsとは spacegallery.jsは、jQueryプラグインの一つで、複数の画像を3D効果で表示するギャラリーを作成するためのものです。画像が奥行き感を持って整列し、ユーザーの操作でダイナミックに動きます。 奥から前へ整列した複数画像を表示させるCSSの記述 以下は、spacegallery.jsを使用して画像を表示するための基本的なCSSスタイルです。 複数画像（ギャラリー）
JavaScriptでWordファイルを生成・ダウンロード！docx.js活用ガイド｜DAD UNION – エンジニア同盟
JavaScriptを活用して、ユーザーの入力テキストをWordファイルとして生成し、そのファイルをダウンロードする技術についてご紹介します。 これは、ウェブアプリケーションでのレポート生成、フォーム入力結果の文書化、あるいは動的に内容が変わる文書をユーザーに提供する際に役立ちます。 今回は、docx.jsというJavaScriptライブラリを用いる方法を中心に解説します。 はじめに 文書作成の自動化や、ウェブページから直接文書を生成する技術は、多くの業界で需要があります。例えば、オンラインでのアンケート結果をWord文書でダウンロードしたい、またはウェブアプリケーションからレポートを生成し、その場で提供したい場合などです。JavaScriptを用いて、これらのニーズに応える方法を一緒に見ていきましょう。 CSSの基本的な設定 まず、Word文書を生成する前に、ウェブページに必要なスタイリ
easySlider.jsを使って簡単に複数画像のスライド表示を導入する方法｜DAD UNION – エンジニア同盟
Webサイトを訪れるユーザーにとって、視覚的に魅力的なデザインは非常に重要です。その中でも、画像スライダーは多くのWebサイトで利用されている人気のある要素です。 この記事では、jQueryプラグインであるeasySlider1.7.jsを使って、簡単に画像スライドショーを作成する方法を紹介します。これにより、複数の画像を「Prev・Next」ボタンや数字リンクでスライドさせることができます。 easySlider1.7.jsとは easySlider1.7.jsは、簡単に画像スライドショーを作成できる軽量なjQueryプラグインです。このプラグインを使えば、コーディングの知識がそれほどなくても、簡単に美しいスライダーを作成することができます。特徴としては、次のような点があります： シンプルな設定: 基本的な機能を簡単に設定できます。 多様なオプション: 自動再生、無限ループ、ナビゲーショ
jquery.corner.jsを使って指定エリアを角丸にする方法｜DAD UNION – エンジニア同盟
ウェブデザインの世界では、要素の角を丸める「角丸」は見た目の柔らかさを演出するのに非常に有効です。最近ではCSSのborder-radiusプロパティを使って簡単に実現できますが、過去にはこの機能を実現するためのさまざまなテクニックが必要でした。 今回は、JavaScriptライブラリの一つであるjquery.corner.jsを使用して、指定したエリアを角丸にする方法をご紹介します。このプラグインは古いブラウザでも動作するため、特に互換性を重視するプロジェクトで役立ちます。 jquery.corner.jsとは jquery.corner.jsは、jQueryプラグインの一つで、HTML要素に角丸の効果を簡単に追加するためのものです。現代のブラウザではCSSだけで十分ですが、古いブラウザや、JavaScriptで動的に角丸を変更したい場合には、このプラグインが便利です。 特徴 シンプルな
ウェブ開発を彩る小技：jquery.pep.jsを用いたドラッグ＆ドロップ機能の実装｜DAD UNION – エンジニア同盟
こんにちは、今回はWeb開発のちょっとした技術、特にjquery.pep.jsを使用したドラッグ＆ドロップ機能の実装方法についてご紹介します。この技術は、ユーザーインターフェースをよりダイナミックで、使いやすくするための素晴らしい方法です。エンジニアだけでなく、これから学ぼうとする初心者にも分かりやすく解説していきたいと思います。 jquery.pep.jsとは？ jquery.pep.jsは、タグや画像といった要素をWebページ内で自由にドラッグ＆ドロップできるようにするJavaScriptライブラリです。このライブラリを利用することで、ウェブページ上の要素をマウスやタッチ操作で移動できるようになり、よりインタラクティブなウェブアプリケーションやゲームの開発が可能になります。 環境設定、JavaScriptの記述 まず始めに、jquery.pep.jsを使用するためには、jQueryも併
jquery.imagecube.jsを使って複数画像を組合せてサイコロの様に回転表示する方法｜DAD UNION – エンジニア同盟
jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示する方法をご紹介します。 複数画像を組合せてサイコロの様に回転表示するCSSの記述 ※サイコロの様に回転表示するエリア（#idCube）と画像のCSSです。必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:1.6em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:center; } #idCube{ width:300px; height:300px; margin:0 auto;
jquery.galleryview.jsを使って複数画像をギャラリー＆スライダー表示する方法｜DAD UNION – エンジニア同盟
jquery.galleryview.jsを使って複数の画像をギャラリー＆スライダー表示する方法をご紹介します。 jquery.galleryview.jsを使って複数の画像をギャラリー＆スライダー表示するCSSの記述 ※jquery.galleryview-3.0-dev.cssファイルを読み込みます。その他必要に応じて変更して下さい。 <link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" /> <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery.screwdefaultbuttonsV2.jsを使ってカスタムされたラジオボタンやチェックボックスを表示する方法｜DAD UNION – エンジニア同盟
jquery.tooltipster.jsマジック：リンクに華やかな吹き出し（ツールチップ）を簡単追加！初心者でも安心のステップバイステップガイド｜DAD UNION – エンジニア同盟
