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コードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で
Lightbox2完全ガイド：画像をポップアップ（モーダル）表示させる簡単ステップ｜DAD UNION – エンジニア同盟
今回は定番中の定番、Lightbox2を使った画像のポップアップ表示について、基本から応用まで幅広く解説していきます。 Lightboxは有名なのでご存じかと思いますが今まで紹介してなかったのでご紹介します。 CSSでの基本設定 まずは、Lightbox2を使うための基本的なCSSを設定します。ここでは、サムネイル画像に適用するスタイルを定義します。ポイントは、見た目の美しさと使いやすさのバランスを取ることです。 lightbox.min.cssファイルを読み込みます。サムネイル（a[data-lightbox] img）のCSS記述です。 <style> body { margin: 20px 10px; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px;
モーダル画面をブラウザ全体に表示する方法【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を使って後ろから前へ回転しながら複数コンテンツエリアを表示する方法をご紹介します。 後ろから前へ回転しながら複数コンテンツエリアを表示するCSSの記述 ※回転表示させるエリア（#vortex）と複数コンテンツエリア（.square-button）のCSS記述です。必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:15px 0 10px 0; line-height:1.4em; } .clWrap{ width:800px; margin:0 auto; } #vortex { width: 350px; hei
約10分で出来るjquery.vaccordion.jsを使って複数コンテンツをアコーディオン表示する方法｜DAD UNION – エンジニア同盟
jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示する方法をご紹介します。 JavaScript、HTML、CSSの知識がある人なら本記事とデモページを参考に約10分位で出来ると思います。 複数コンテンツをアコーディオン表示するCSSの記述 ※style.css、JavaScriptが効かない時用のstyleNoJS.cssファイルを読み込みます。styleNoJS.cssは無くても良いかもしれません。その他は必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } h2
spacegallery.jsを使って奥から前へ整列した複数画像を表示させる方法｜DAD UNION – エンジニア同盟
spacegallery.jsを使って、奥から前へ整列した複数画像を表示させる方法をご紹介します。 奥から前へ整列した複数画像（ギャラリー）を表示します。画像をクリックすると整列した画像が前へ移動します。 奥から前へ整列した複数画像を表示させるCSSの記述 ※複数画像（ギャラリー）エリア.spacegalleryのCSS記述です。必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:2.0em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:left; } .spacegal
JavaScriptでWordファイルを生成・ダウンロード！docx.js活用ガイド｜DAD UNION – エンジニア同盟
JavaScriptを活用して、ユーザーの入力テキストをWordファイルとして生成し、そのファイルをダウンロードする技術についてご紹介します。 これは、ウェブアプリケーションでのレポート生成、フォーム入力結果の文書化、あるいは動的に内容が変わる文書をユーザーに提供する際に役立ちます。 今回は、docx.jsというJavaScriptライブラリを用いる方法を中心に解説します。 はじめに 文書作成の自動化や、ウェブページから直接文書を生成する技術は、多くの業界で需要があります。例えば、オンラインでのアンケート結果をWord文書でダウンロードしたい、またはウェブアプリケーションからレポートを生成し、その場で提供したい場合などです。JavaScriptを用いて、これらのニーズに応える方法を一緒に見ていきましょう。 CSSの基本的な設定 まず、Word文書を生成する前に、ウェブページに必要なスタイリ
easySlider.jsを使って簡単に複数画像のスライド表示を導入する方法｜DAD UNION – エンジニア同盟
easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入する方法をご紹介します。 複数画像を「Prev・Next」「1・2・3…」リンククリックでスライドできます。 easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するJavaScriptの記述 ※jquery.min.js、easySlider1.7.jsファイルを読み込みます。「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）を用意しました。$(スライドするエリア).easySlider({オプション})で設定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery
jquery.corner.jsを使って指定エリアを角丸にする方法｜DAD UNION – エンジニア同盟
jquery.corner.jsを使って指定エリアを角丸にする方法をご紹介します。 角丸はCSS（border-radius）で出来ますが、かなり昔はCSSで角丸が出来ず角丸の画像を使ってやってました。 今回はJavaScriptプラグインのjquery.corner.jsを使ってやってみました。 jquery.corner.jsを使って、指定エリアを角丸にするCSSの記述 ※3パターンのエリア（.clSample1、.clSample2、.clSample3）を用意しました。必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; line-height:1.6em; text-align:center; padding:15px 0; font-weight:
jquery.screwdefaultbuttonsV2.jsを使ってカスタムされたラジオボタンやチェックボックスを表示する方法｜DAD UNION – エンジニア同盟
jquery.screwdefaultbuttonsV2.jsを使って、カスタムされたラジオボタンやチェックボックスを表示する方法をご紹介します。 ラジオボタンやチェックボックスをカスタムしたデザイン画像で表示してみます。 （まぁ、個人的にはデフォルトのものでイイじゃんって常々思うんですが） jquery.screwdefaultbuttonsV2.jsを使ったカスタムされたラジオボタンやチェックボックスを表示するJavaScriptの記述 ※jquery.min.js、jquery.screwdefaultbuttonsV2.jsファイルを読み込みます。カスタム対象を$(ラジオボタン).screwDefaultButtons({画像やサイズ})、$(チェックボックス).screwDefaultButtons({画像やサイズ})で設定します。 <script src="https://aj
ウェブ開発を彩る小技：jquery.pep.jsを用いたドラッグ＆ドロップ機能の実装｜DAD UNION – エンジニア同盟
こんにちは、今回はWeb開発のちょっとした技術、特にjquery.pep.jsを使用したドラッグ＆ドロップ機能の実装方法についてご紹介します。この技術は、ユーザーインターフェースをよりダイナミックで、使いやすくするための素晴らしい方法です。エンジニアだけでなく、これから学ぼうとする初心者にも分かりやすく解説していきたいと思います。 jquery.pep.jsとは？ jquery.pep.jsは、タグや画像といった要素をWebページ内で自由にドラッグ＆ドロップできるようにするJavaScriptライブラリです。このライブラリを利用することで、ウェブページ上の要素をマウスやタッチ操作で移動できるようになり、よりインタラクティブなウェブアプリケーションやゲームの開発が可能になります。 環境設定、JavaScriptの記述 まず始めに、jquery.pep.jsを使用するためには、jQueryも併
jquery.tooltipster.jsマジック：リンクに華やかな吹き出し（ツールチップ）を簡単追加！初心者でも安心のステップバイステップガイド｜DAD UNION – エンジニア同盟
Webサイトのユーザーエクスペリエンスを向上させるために、リンクにツールチップを追加したい場合、jquery.tooltipster.jsを使用する方法があります。 この記事では、jquery.tooltipster.jsを活用して、リンクタグのtitle属性に設定したテキストをマウスオーバー時に吹き出し（ツールチップ）として表示する方法を詳しくご紹介します。 リンクにツールチップを表示するためのCSSファイルの設定 まず最初に、リンクにツールチップを表示するために必要なCSSファイルを設定します。以下のスタイルシートは、tooltipster.cssファイルを読み込むもので、必要に応じてカスタマイズできます。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:cente
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
spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法｜DAD UNION – エンジニア同盟
spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法をご紹介します。 該当箇所の画像やテキストをモザイク・ぼかし効果で表示します。 画像やテキストをモザイク・ぼかし表示するCSSの記述 ※必要に応じて変更して下さい。 <style type="text/css"> <!-- body { margin: 0px; font-size:14px; } h1{ font-size:16px; font-weight:normal; line-height:1.4em; text-align:center; padding:15px 0 10px 0; } h2{ font-size:14px; font-weight:normal; line-height:1.2em; text-align:center; padding:0 0 15px 0; } #idWrap{ wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2【jQueryプラグイン】｜DAD UNION – エンジニア同盟
