軽量スライダー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
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
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
検索サイトに代わる新たな技術、ChatGPTの登録方法と始め方を徹底解説｜DAD UNION – エンジニア同盟
最近、検索サイトの代替として注目されているChatGPTについて、その登録方法から始め方までを分かりやすく解説します。 ChatGPTは、OpenAIが開発した会話型AIで、さまざまな質問に対して人間のように答えてくれる技術です。 OpenAI APIでアカウント登録 OpenAI APIにアクセスし右上の「SIGN UP」ボタンからアカウント登録します。 メールアドレス、パスワード、名前、組織名、電話番号を登録 メールアドレスを入力します。 パスワードを入力します。 以下の内容が登録したメールアドレス宛てに届くので「Verify email address」をクリックします。 名前、組織名を入力します。 電話番号を入力します。入力した電話番号宛てにショートメッセージが届きます。 入力した電話番号宛てに届いたショートメッセージのcodeを入力します。 OpenAIの利用目的を選択します。
JavaScriptで実装する！フォーム送信の確認ダイアログ：Confirmメソッドの簡単ガイド｜DAD UNION – エンジニア同盟
ウェブ開発において、フォームの内容を送信する前にユーザーの確認を得ることは非常に重要です。 この記事では、JavaScriptのconfirmメソッドを使って、フォーム送信前に「送信する」「送信しない」という選択をユーザーに求める方法を分かりやすく解説します。 CSSによるフォームのスタイリング まず、フォームとその要素にスタイルを適用するためのCSSを見てみましょう。 ここでは、テキストボックス（.txt1）と送信ボタン（.btn1）のデザインを設定しています。これらのスタイルは、フォームの見た目を整えるのに役立ちます。 <style> * { padding: 0; margin: 0; } body { font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 24px; padding: 20
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;
YouTube動画をページ背景で再生表示する方法【YouTube API】｜DAD UNION – エンジニア同盟
YouTube動画をページ背景で再生表示するCSS記述 ※背景にYouTube動画を表示するエリア（#youtube-area）、Loading表示エリア（#loading）、ヘッダーエリア（#header）背景にローディング画像（loading.jpg）を設定 等のCSS記述です。必要に応じて変更して下さい。 <style> * { padding: 0; margin: 0; } body { font-size: 14px; text-align: center; line-height: 2em; } #header{ position: relative; height: 100vh; text-align: center; color: #fff; background: url("loading.jpg") no-repeat; background-size: cover;
Splide.jsで実現するスマートなスライダー：初心者から上級者まで使える完全ガイド｜DAD UNION – エンジニア同盟
今回はWebデザインの世界で話題のSplide.jsについて、その魅力と使い方をわかりやすく解説します。Splide.jsは、スワイプやタップに対応したスライダーを簡単に実装できる、使い勝手の良いJavaScriptライブラリです。これからご紹介する手順に沿って、あなたのウェブサイトも一層魅力的なものに変身させましょう。 Splide.jsの基本となるCSSの設定 まず最初に、Splide.jsを使うための土台となるCSSの設定から始めましょう。以下のコードをウェブサイトの適切な場所に追加してください。 splide.min.cssファイルの読み込み：このスタイルシートがSplide.jsの見た目を整えます。 カスタムスタイルの追加：ウェブサイトのデザインに合わせて、基本のスタイルを調整します。 <link rel="stylesheet" href="css/splide.min.css
jquery.rippleria.jsを使ってクリックするとおしゃれな波紋が広がるエフェクトを表示する方法｜DAD UNION – エンジニア同盟
jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示する方法をご紹介します。 jquery.rippleria.jsを使ってボタンまたは画像をクリックするとおしゃれな波紋が広がるエフェクトを表示するCSS記述 ※jquery.rippleria.min.cssファイルを読み込みます。ボタン（.btn）と画像エリア（aタグ）のCSS記述です。 <link rel="stylesheet" href="jquery.rippleria.min.css"> <style> body { font-size: 14px; text-align: center; line-height: 2em; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding:
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示する方法｜DAD UNION – エンジニア同盟
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示する方法をご紹介します。 四捨五入はMath.round()、切り捨てはMath.floor()、切り上げはMath.ceil()関数を使います。 小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するCSS記述 ※四捨五入・切り捨て・切り上げした出力先（div）のCSS記述です。必要に応じて変更して下さい。 <style> body { font-size: 14px; text-align: center; line-height: 2em; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding: 15px 0 40px 0; } div{ font-size: 20px; font-weight: bold; pa
PHPのstrtotime関数で達人になろう：前月末から翌月末までの日付操作の極意｜DAD UNION – エンジニア同盟
PHPの日付操作に関する小技をご紹介します。今回は「strtotime関数」を使った、ちょっとした日付マジックを伝授します。初心者から中級者まで、PHPの日付操作の理解を深めていただける内容です。 PHPで1か月前の日付を取得する まずは基本中の基本、指定日から1か月前の日付を取得する方法から。 例えば「2022-07-31」を起点にすると、出力は「2022-07-01」になります。でも、ちょっと待ってください。これ、本当に1か月前ですか？実はこの方法、いくつかの落とし穴があるんですよ。 echo date('Y-m-d', strtotime('2022-07-31' . '-1 month')); //出力結果：2022-07-01 前月の末日を正確に取得する では、指定日の「前月末日」はどうやって取得するのでしょうか。 これが意外とトリッキーなんです。例えば「2022-01-31」の
メディアクエリ不要！CSSのclampを活用したブラウザ幅に応じたwidthとfont-sizeの最適設定法｜DAD UNION – エンジニア同盟
CSSの関数を使った画期的なレスポンシブデザインのテクニックを紹介します。メディアクエリを使わずに、ブラウザの幅に応じた最適なwidthとfont-sizeを設定する方法です。これをマスターすることで、より効率的かつ柔軟なウェブデザインが可能になります。 clamp関数とは？ CSSのclamp関数は、3つのパラメーター（最小値、推奨値、最大値）を用いて、要素のサイズを動的に調整します。これにより、画面サイズの変化に柔軟に対応するレスポンシブデザインが実現できます。具体的には、例えば見出しのfont-sizeを設定する際に、ブラウザ幅が変化しても読みやすさを保つことが可能です。 メディアクエリとの違い 従来のメディアクエリでは、特定のブレークポイントに基づいてスタイルを変更します。しかし、clampを使用すると、画面サイズが変わるたびに、最小値と最大値の間でスタイルが連続的に変化します。こ
jquery.vide.jsを駆使してウェブページに動画背景を設定する方法｜DAD UNION – エンジニア同盟
ウェブデザインの世界は日々進化しています。静的な画像から動的な動画へと、ウェブページの背景はより魅力的になりつつあります。今回は、jquery.vide.jsを使用して、ウェブページに動画を背景として設定する方法を詳しく解説します。この技術を駆使すれば、訪問者の注目を一瞬で引き付けることができるでしょう。 jquery.vide.jsを使って簡単に動画（mp4、ogv、webmファイル）をウェブページの背景にする方法をご紹介します。 動画を背景にするためのCSSの設定 ウェブページに動画を背景として設定する前に、まずはCSSで基本的な設定を行います。ここではhtmlとbodyタグの幅と高さを100%に設定し、動画が画面全体に適切に表示されるようにします。以下のコードは、この基本設定の例を示しています。 <style> html, body { margin: 0; width: 100%;
GoogleアナリティクスのGA4とUAを両方設定する方法｜DAD UNION – エンジニア同盟
現在、Googleアナリティクスの（UA）にログインすると「2023年7月1日より、ユニバーサルアナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでにGoogleアナリティクス4プロパティに切り替えて設定を進めておきましょう。」と表示されてると思います。 そのため今現在進行形で新規サイトやWebサービス等を行っている方向けに、新旧両方のGoogleアナリティクスのGA4とUAを両方設定する方法をご紹介します。 ※今回設定する方法はGoogleアカウントを持っており、Googleアナリティクスのユニバーサルアナリティクス（UA）を利用したことがある方が前提となります。 Googleアナリティクスにログイン Google Analytics にログインします。 ※以降、画像をクリックすると拡大画像が表示されます。 管理画面よりアカウントを作成 左下の「管理」ボタンを
郵便番号検索API（ケンオール）を使ってPHPで住所を取得する方法｜DAD UNION – エンジニア同盟
郵便番号検索API（ケンオール）を使ってPHPで住所を取得する方法をご紹介します。 PHPのcurlを使う方法とfile_get_contentsを使う方法、2パターンでやってみました。 郵便番号検索API – ケンオール APIは以下を使用しました。APIデモを使って、郵便番号から取得できる情報が確認できます。 郵便番号検索API – ケンオール 利用する場合はケンオールに登録してAPI Keyを取得（有料）する必要があります。 ケンオール料金表 トライアル（無料）でもAPI Keyを取得できますが、多分トライアル期間が過ぎると利用出来なくなります。 プランと利用料金 PHPのcurlを使う方法 ※PHPのcurlを使って郵便番号から住所情報を取得する記述は以下の通りです。「$YOUR_API_KEY」はAPI Key、「ZIPCODE」は郵便番号になります。 <?php header(
jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダー｜DAD UNION – エンジニア同盟
jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーをご紹介します。 マウススカーソルをサムネイル上で右クリックした状態で上下スライドさせるとサムネイルがスライドします。 レスポンシブに対応した縦横スワイプでスライド可能な画像スライダーのCSS記述 ※slider-pro.min.cssファイルを読み込みます。スライドやサムネイルエリア（#sldemo1）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="slider-pro.min.css" media="screen"/> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-siz
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作する方法｜DAD UNION – エンジニア同盟
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動する方法をご紹介します。 gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するCSSの記述 ※gridscrolling.cssファイルを読み込みます。「#gridscrolling-XXXX」や「.gridscrolling-XXXX」は矢印やページ内現在位置のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="gridscrolling.css"> <style> html, body { height: 100%; width: 100%; } body { font-size: 16px; text-align: center; } h1,h2{ text-align:
【Laravel】出力したエクセルのセルを装飾（スタイル）する方法｜DAD UNION – エンジニア同盟
以前「Laravel6でmaatwebsite/excelインストールとエクセル出力方法」でエクセルファイルを出力しました。今回は出力したエクセルファイルのセルをstyle（スタイル）やサイズ（width、height）を使って装飾する方法をご紹介します。 （Laravelバージョンは6系） Laravelで出力したエクセルのセルを装飾するスタイル）前提条件 「Laravel6でmaatwebsite/excelインストールとエクセル出力方法」記事の環境（maatwebsite/excelのインストール、usersテーブルの内容を全てveiwに出力する 等）は準備出来てる前提とします。 出力するエクセルのview（blade.phpファイル）にstyle（スタイル）やサイズ（width、height）を記述 usersテーブルの「name」と「email」をエクセルに出力します。 出力する
lity.js活用ガイド：画像・YouTube動画を魅力的にポップアップ表示する方法｜DAD UNION – エンジニア同盟
Webページを彩る方法として、画像や動画をポップアップ表示することがあります。 今回は、lity.jsを使って画像やYouTube動画をポップアップ表示する方法をご紹介します。 CSSの記述 まずは、lity.cssファイルを読み込み、必要に応じてスタイルを調整します。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding-top: 20px; } h2{ font-size: 18px; } p{ padding-bottom: 10px; font-size: 18px; } </style> <link href="lity.css" rel="stylesheet"/> HTMLの記述 ポップ
jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法｜DAD UNION – エンジニア同盟
jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法をご紹介します。 コンテンツエリアが画面表示時にアニメーションするCSSの記述 ※様々な動きのパターンを集めたCSSライブラリanimate.min.cssファイルを読み込みます。アニメーション表示するコンテンツエリアギャラリー表示エリア（div）のCSS記述です。必要に応じて変更して下さい。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding-top: 20px; } p{ padding-bottom: 600px; font-size: 18px; } div { text-align:center;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
