下スクロール時の背景パララックス実装ガイド: 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,
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コードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で
JavaScriptを使った月・週・時間別表示に対応したカレンダープラグインFullCalendar｜DAD UNION – エンジニア同盟
FullCalendarを使ってJavaScriptを使った月・週・時間別表示に対応したカレンダープラグインをご紹介します。Googleカレンダーにも対応してる様ですが今回はGoogleカレンダーを使用せず月別カレンダー表示の方法をご紹介します。 FullCalendarを使った月・週・時間別表示に対応したカレンダーのCSS記述※main.cssファイルを読み込みます。必要に応じて変更して下さい。 <link href='main.css' rel='stylesheet' /> <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } #calendar { max-width: 1100px; margin: 0 auto; } h1{ text-align: center;
モーダル画面をブラウザ全体に表示する方法【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:
投稿ページの目次を自動で生成・表示するRich Table of Contents【WordPressプラグイン】｜DAD UNION – エンジニア同盟
Rich Table of Contentsは記事ページの見出しタグを元に投稿ページの目次を自動で生成・表示するプラグインです。 以下の様な目次が表示されます。 Rich Table of Contentsプラグイン以下がプラグイン提供元になります。 Rich Table of Contents Rich Table of ContentsのインストールWordPress管理画面より「プラグイン」→「新規追加」→「検索キーワード」に「Rich Table of Contents」を入力すると、以下の赤枠「Rich Table of Contents」が表示されます。 「今すぐインストール」をクリックして、「有効化」します。 Rich Table of Contents目次の表示設定画面プラグインをインストールし有効化しただけでは投稿ページの目次は表示されないので、目次の表示設定を行います。
Drawerでレスポンシブ対応のドロワーメニューを簡単に実装する方法【jQueryプラグイン】｜DAD UNION – エンジニア同盟
jQueryプラグインのDrawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する方法をご紹介します。 Drawerはレスポンシブ対応サイトのスマホでドロワーメニューを簡単に実装できるプラグインです。 Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する読込CSSファイル ※sandbox.css、drawer.min.cssファイルを読み込みます。 <link href="sandbox.css" rel="stylesheet"> <link href="./dist/css/drawer.min.css" rel="stylesheet"> Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装するHTMLの記述 ※今回左からドロワーメニューを表示させますが、上・右からメニュー表示も可能です。 <body class="drawer draw
ビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン【TwentyTwenty】｜DAD UNION – エンジニア同盟
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）をご紹介します。 「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。 2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のCSSファイル読込 ※foundation.css、twentytwenty-no-compass.cssファイルを読み込みます。 <link href="css/foundation.css" rel="stylesheet" type="text/css" /> <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" /> 2枚のビフォー・アフター画像をわかりやすく比較するJav
WordPressカテゴリーの並び替え：プラグインで表示順をカスタマイズする完全ガイド｜DAD UNION – エンジニア同盟
WordPressを使ったブログ運営では、整理整頓が成功の鍵を握ります。カテゴリーを上手に管理することで、訪問者にとって探しやすい、使いやすいサイト構造を作り出すことができます。 しかし、WordPressのデフォルト機能だけでは、カテゴリーの並び順を自由に変更することが難しいです。 そこで本記事では、カテゴリーの一覧表示をカスタマイズし、より効率的なサイト運営を実現する方法をご紹介します。 前回「カテゴリー毎の最新投稿記事一覧を取得する方法【WordPressプラグイン無し】」で表示させた「カテゴリー毎の最新記事一覧」ページを使って並び順が変更できるか試してみました。 「Category Order and Taxonomy Terms Order」プラグインとは このプラグインは、カテゴリーやタクソノミーの順序を簡単に変更できるようにするものです。WordPressのプラグインディレク
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
Swiper.jsを使ったレスポンシブ対応の複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
Swiper.jsは、現在最もポピュラーで使いやすいタッチスライダーの1つです。モダンなサイト制作において、スライドショーはユーザーエクスペリエンスを向上させる重要な要素であり、特にレスポンシブデザインとの組み合わせによって、あらゆるデバイスサイズでコンテンツを効果的に表示することができます。Swiper.jsは、その多機能性と高いカスタマイズ可能性から多くの開発者に利用されています。 今回はそのSwiper.jsを使ったレスポンシブやスマホ・タブレットのスワイプに対応したスライダー方法をご紹介します。 Swiper.jsの特徴 レスポンシブデザイン: Swiperはフルレスポンシブで、デバイスサイズを自動的に認識し、表示を最適化します。 タッチ操作に対応: スワイプジェスチャーを使用してコンテンツを操作できるので、タッチデバイスに最適です。 マルチプラットフォーム対応: Swiperはi
reflection.jsで画像に魅力的な半透明の反射影を追加する方法｜DAD UNION – エンジニア同盟
昨今のWeb開発では、ユーザーの注目を集め、サイトに長く留まってもらうために、ビジュアル要素の魅力が非常に重要になっています。そんな中、画像に美しい影を加えることで、サイトの見た目を格段に向上させることができます。 この記事では、JavaScriptのライブラリであるreflection.jsを使用して、画像に半透明の反転した影を表示させる方法を紹介します。 CSSでの準備 まず初めに、画像を美しく表示させるための基本的なCSSを設定しましょう。ここでは、サイト全体のマージンやパディングを0に設定し、見出しや画像を中央揃えにします。特に、clWrapクラスを使って画像を中央に配置する方法を紹介します。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; fo
bespoke.jsを使ってプレゼン用パネルイメージを表示｜DAD UNION – エンジニア同盟
画像のスライド系みたいに、bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させる方法をご紹介します。 プレゼン用パネルイメージを表示するCSSの記述例 ※必要に応じて変更して下さい。 <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; } h1{ font-size:55px; line-height:1.4em; text-align:center; font-weight:normal; } section{ font-size:60px; text-align:center; padding-top:25px; color
後ろから前へ回転しながら複数コンテンツエリアを表示【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
PHPでPDFを生成する完全ガイド：FPDFライブラリを使った日本語文字出力方法｜DAD UNION – エンジニア同盟
PHPを使ってPDFファイルを生成する方法は、特にビジネスシーンでの文書処理やデータのレポート作成に役立ちます。 今回は、PHPでPDFを生成する際に広く使用されているライブラリ「FPDF」の使用方法について、初心者の方でも理解しやすいように詳しく解説します。 本記事では、日本語の文字にも対応しているFPDFの基本的な使い方から、簡単なPDFの生成方法までをご紹介します。 FPDFとは FPDFは、PHPスクリプトでPDF文書を生成するためのクラスライブラリです。外部のPDFライブラリを必要とせず、PHPだけでPDFを生成できるため、導入が非常に簡単です。また、FPDFは無料で使用することができ、多くの機能が用意されているため、さまざまなPDF文書をカスタマイズして生成することが可能です。 FPDFと日本語文字対応ライブラリをダウンロード まずは、FPDF本体と日本語に対応するための追加ラ
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文書を生成する前に、ウェブページに必要なスタイリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
