Category: javascript

ブラウザ制限と正しい実装方法をわかりやすく解説 WebサイトやLP、ファーストビューで動画を使う場面は年々増えています。特に最近よく聞かれるのが、こんな疑問です。 「再生ボタン付きで、音あり動画ってできますか？」 結論から言うと、再生ボタン付きであれば、音あり動画は問題なく再生可能です。 ただし、自動再生との違いやブラウザの制限を理解していないと「音が出ない」「再生されない」といったトラブルに繋がります。 この記事では、 を、初心者の方にもわかるように解説します。 なぜ「音あり自動再生」はできないのか？ まず押さえておきたいのが、**ブラウザ側の仕様（制限）**です。 現在の主要ブラウザ（Chrome / Safari / iOS / Android）では、 というルールが共通しています。 理由 突然音が鳴るとユーザー体験を大きく損なうため、「ユーザーの意思を伴わない音声再生」は制限されているのです。 そのため、以下のような実装は再生されない、もしくは音が出ません。

Webサイトのファーストビューでは、「ただ画像が切り替わるだけ」ではなく、写真そのものが語りかけてくるような演出が求められます。 最近よく見かけるのが、 といった、ホテル・ブライダル系サイトで使われる上品なヒーロースライダーです。 この記事では、Swiperを使ってこの演出を安全かつ自然に実装する方法を解説します。 なぜ「寄り→引き」が効果的なのか？ 一般的なKen Burnsエフェクトは「ズームイン（寄り）」ですが、 という弱点があります。 そこでおすすめなのが、 表示直後は少し寄っていて、時間とともに引いていく という「寄り → 引き」構成です。 これにより、 という効果が得られます。 実装の全体構成 今回のスライダーは、以下の3要素で構成します。 重要なのは、すべてを同じ時間軸（autoplay delay）で同期させることです。 HTML（sample構造・簡略版）

Webサイトの第一印象を大きく左右するのが、トップページに配置されるスライド（キービジュアル）です。最近では、単に横に切り替わるだけのスライドではなく、 といった、高級感・没入感のある演出が好まれる傾向にあります。 本記事では、「横スライド × ズームイン」 を組み合わせたスライド演出の考え方と実装例を、サンプルコード付きでわかりやすく解説します。 なぜ「ズームイン × 横スライド」が効果的なのか 横スライドだけの場合、どうしても「機械的」「事務的」な印象になりがちです。そこに 拡大（ズームイン） を加えることで、次のような効果が得られます。 特に、 などでは非常に相性の良い表現です。 実現方法の考え方（重要） 今回のポイントはとてもシンプルです。 つまり、 動きの制御はスライダーに任せ、見た目の演出はCSSに任せる という役割分担が重要になります。 サンプル構成（イメージ）

Webサイトのヘッダーやお知らせ欄などで、「10月15日10:15 現在」のように“今の時刻”を表示したいことはありませんか？ たとえば、 といった場面で役立ちます。 この記事では、JavaScriptを使って リアルタイムに日付＋時刻を表示 するシンプルなスクリプトの書き方を、初心者にもわかりやすく解説します。 完成イメージ 完成すると、次のような表示になります👇 しかも、時間部分「10:15 現在」だけを赤色で強調。日付は自動的に今日のものに変わり、時刻は1分ごとに更新されます。 HTMLとCSSの基本構造 まずはHTMLの土台を用意しましょう。 ポイントは .time クラス。ここに「赤文字＋太字」のスタイルを指定して、JavaScript側で時間部分だけをこのクラスで囲うようにします。 JavaScriptで現在の日付と時刻を生成 続いてスクリプト部分です。 コード解説 処理内容

SimpleBar.jsとは？ 導入方法 1) CDNで手早くお試し 2) npmでプロジェクトに導入 基本：属性を付けるだけ（高さは必須） これだけで、ネイティブ同等の操作感を残したまま、見た目が整ったスクロールバーに。 オプションを使う：自動非表示や最小サイズ data 属性で指定（CDN派におすすめ） JSで生成（npm or 細かく制御したい場合） スクロール位置の制御（「最下部へ」など） SimpleBarは内部にスクロール用のラッパーを持ちます。インスタンスからスクロール可能要素を取得して操作します。 CDN（data属性）で自動初期化した場合でも、要素からインスタンスを参照できます： 動的コンテンツの追加と再計算 通常はMutationObserverで検知してくれますが、一気にDOMを書き換えた後などは手動再計算が確実です。 ページ全体に適用する場合のコツ

「キャンペーンLPに訪問した人が別のページに移動したときだけポップアップを出したい」「固定ページAから固定ページBへ移動したときにお知らせを表示したい」 こんな要望は、JavaScriptの document.referrer を使えば簡単に実現できます。今回は、WordPressの固定ページを例に解説します。 1. document.referrer とは？ document.referrer は「直前に見ていたページのURL」を取得できるプロパティです。例えば、ユーザーが から に移動した場合、contact ページで document.referrer を確認すると、 が返ってきます。これを条件分岐に使えば、「特定のページから来た場合だけポップアップを表示」できます。 2. 固定ページから来た場合だけポップアップを出すコード例 完全一致で判定する場合 部分一致で判定する場合 固定ページのURLに末尾スラッシュ

Webサイトのお問い合わせフォームで「お名前は日本語必須」「ふりがなはひらがな必須」といった入力制限を設けたいことはありませんか？今回は、シンプルなHTMLフォームに正規表現によるバリデーションを組み込み、入力が正しくない場合はエラーを表示する方法をご紹介します。 HTMLフォームのサンプルコード 以下のフォームでは、「お名前」と「ふりがな」に入力制限をかけています。 JavaScriptでのバリデーション処理 フォーム送信時に「日本語チェック」「ひらがなチェック」を行います。また、入力中にエラーがあれば即時にメッセージを表示します。 ポイント解説 まとめ 日本語やひらがなの入力チェックは、正規表現を活用するだけで簡単に実装可能です。また、ブラウザの pattern 属性を併用すれば、ネイティブバリデーションも効かせることができます。 お問い合わせフォームや会員登録フォームなどで入力精度を高めたいときに、ぜひこの方法を活用してみてください。 Favorite

Webサイトを訪れたユーザーに印象的な体験を与えるには、視覚的な演出が重要です。この記事では、背景は固定（パララックス）で、中央のボックスだけがスクロールに応じて切り替わるという仕組みをHTMLとCSS、JavaScriptでシンプルに実装する方法をご紹介します。 こんな動きを作れます HTML＋CSS＋JavaScript 実装コード 以下が全体のコードです。 HTML構造 <div>ヘッダー部分</div><div class=”fixed-bg”></div><div class=”content-box” id=”content-box”> <h1 id=”content-title”>セクション 1</h1> <p id=”content-text”>最初のコンテンツです。</p></div><!– 各セクションのスクロールトリガー –><div class=”section-trigger” data-title=”セクション 1″

フォームに「未定」などの選択肢があると、ユーザーが他の入力欄を触らなくても済むようにしたいですよね。今回は、チェックボックスを使って、関連する入力フィールドを自動で無効化（disabled）する方法をご紹介します。 例えば、日付や時間の入力が「未定」の場合、その情報をスキップさせるスマートなUXを実現できます。 こんなケースで使えます HTMLの構成（例） まずは、フォームのHTMLを作ります。以下は「イベント日程」の入力欄の一例です。 <div class=”form-group”> <label> <input type=”checkbox” name=”event-undecided”> 未定 </label> <input type=”date” name=”event-date”> <input type=”text” name=”event-time” placeholder=”例）19:45″></div><div

JavaScriptのスライダーライブラリ「Swiper」を使ってサイトのスライダーを実装する際、「スライド枚数が少なくても多くても、問題なく動作してほしい」という要求はよくあります。 本記事では、Swiperでスライド枚数によらず動作する設定方法をサンプルコード付きで解説します。 【サンプルHTML】 【サンプルJavaScript】 【ポイント】 【おわりに】 Swiperは高機能ですが、少しの設定ミスで動作に違いが出ることもあります。この設定を使えば、任意のスライド枚数にも対応でき、ループやサムネイル連動も効果的に実現できます。 Favorite

Webサイトを訪れたユーザーにとって、画像をクリックして拡大できる機能はとても便利です。特に、ギャラリーや商品写真など詳細を見せたいシーンでは、「ライトボックス（Lightbox）」と呼ばれる仕組みを取り入れることで、より快適なユーザー体験が実現します。 今回は、jQueryでライトボックスを自作する方法と、有名プラグインを使った導入方法をそれぞれ紹介します。 ライトボックスとは？ 「ライトボックス」とは、画像や動画などをクリックした際に、ページ全体に半透明の背景がかかり、対象メディアが中央に大きく表示されるUIです。 ライトボックスは、以下のような用途でよく使われます。 方法1：jQueryで自作ライトボックス まずは、最低限の構造とスクリプトでシンプルなライトボックスを作る方法からご紹介します。 🔹HTML（サムネイル画像） <img src=”thumbnail1.jpg” alt=”画像1″ class=”lightbox-thumb” data-full=”fullsize1.jpg” /><img src=”thumbnail2.jpg” alt=”画像2″ class=”lightbox-thumb” data-full=”fullsize2.jpg” /><!– ライトボックス本体

複数選択を必要とするフォームでは <select multiple> を使うのが定番ですが、スマホで表示されなかったり、選択できないというトラブルに遭遇したことはありませんか？ この記事では、その原因とHTMLサンプル付きでのスマホ対応の3つの解決策をご紹介します。 なぜスマホで <select multiple> が動かないのか？ まずは以下のようなコードを見てください。 <select id=”customSelect” name=”sample” multiple> <option value=”サンプル01″>サンプル01</option> <option value=”サンプル02″>サンプル02</option> <option value=”サンプル03″>サンプル03</option>

Webフォームで複数選択を行う際、<select multiple> タグを使うのが一般的です。しかし、この標準の挙動では、ユーザーが Ctrl（またはCommand）キーやShiftキーを押しながら選択 しなければなりません。PCに不慣れなユーザーや、タッチ操作の多いUIにおいては、この操作が分かりづらく感じられることも。 本記事では、「キー操作なし」で複数選択できる select タグの実装方法について、JavaScriptを活用した実用的な解決策をご紹介します。 通常の<select multiple>の制限 HTMLで複数選択が可能なselectボックスは以下のように記述します。 <select multiple name=”fruits[]” size=”5″> <option value=”apple”>りんご</option> <option value=”banana”>バナナ</option> <option

スクロール連動のアニメーションは、適切に使えばページに動きとストーリー性を与える強力なアクセントになります。一方で、過度な演出は表示パフォーマンスを損ねたり、ユーザーを迷わせたりする危険も伴います。そこで “画像が10 %画面に入った瞬間だけふわっとブラーが解除される” 程度の控えめなエフェクトは、目に優しくサイトをスマートに演出できる絶妙な落としどころです。 本記事では、以下の JavaScript スニペットを題材に、「Intersection Observer を使って一度きりで解除されるブラー効果」を実装する方法とポイントを解説します。 document.addEventListener(‘DOMContentLoaded’, () => { const targets = document.querySelectorAll(‘.js-blur-target’); const io = new IntersectionObserver((entries, observer)

Web制作をしていると、時々見かける属性 data-ajax=”false”。特に jQuery Mobile を使ったサイトでは頻繁に出てくる記述ですが、「これって何のために書いてるの？」「入れると何が変わるの？」と疑問に思った方もいるのではないでしょうか。 本記事では、data-ajax=”false” の意味や用途、そして スムーススクロールなどの機能との関係性について、わかりやすく解説していきます。 data-ajax=”false”とは？ data-ajax=”false” は、jQuery Mobile というライブラリで使用される data-* 属性のひとつです。 目的は「リンクを通常のHTML方式で遷移させる」 jQuery Mobile は、リンク先のページを Ajaxで非同期に読み込んで差し替えるという機能をデフォルトで持っています。

ウェブフォームを作成する際、チェックボックスの選択に応じてテキストボックスの内容を変更したい場合があります。例えば、ユーザーがチェックボックスをクリックすると、その内容をテキストボックスに反映させる機能です。 本記事では、チェックボックスの選択状態に応じてテキストボックスにテキストを挿入する方法を、シンプルなHTMLとJavaScriptを使って実装する手順を紹介します。 実装方法 HTMLの作成 以下のコードは、複数のチェックボックスと、選択した内容を表示するテキストボックスを作成します。 JavaScriptの実装 チェックボックスの状態が変わるたびに、選択された項目のテキストを取得し、テキストボックスに挿入するスクリプトを作成します。 コードの解説 DOMContentLoaded イベント このイベントを利用することで、ページが完全に読み込まれた後にスクリプトが実行されるようになります。 チェックボックスの状態を監視 すべてのチェックボックスを querySelectorAll(“input[type=’checkbox’]”) で取得し、それぞれに change イベントを追加。 選択されたチェックボックスの値を取得 Array.from(checkboxes) でチェックボックスのリストを配列化し、filter()

スマホ用のハンバーガーメニューで、ナビゲーション内のリンクをクリックするとメニューが自動で閉じるようにする方法を解説します。 問題点 一般的なハンバーガーメニューでは、.sp_navi dt a をクリックするとメニューが開閉されます。しかし、.sp_navi_list li a をクリックしてもメニューが閉じず、そのままになってしまうことがあります。 また、 .sp_navi.sp.pc_hide に sp_new クラスが残ってしまい、メニューが閉じた状態でも影響を及ぼしてしまうことがあります。 解決策 document.addEventListener を使用して、ナビゲーションリンクがクリックされた際に、以下の処理を行います。 修正コード ポイント jQuery

問題点 Splide.js を使用している際に、Lazy Load（遅延読み込み）が影響し、サムネイル画像が data:image/png;base64,… のプレースホルダー画像になり、正しく表示されないことがあります。 解決策 JavaScript を使用して data-src の値を src に適用し、Lazy Load の影響を防ぎます。また、Splide.js の設定で cover: false と lazyLoad:

Webページ上で、複数の商品画像を個別に切り替える方法について解説します。一般的なサムネイル画像のクリックで大きな画像を変更する機能を、商品ごとに適用する方法を紹介します。 HTML コード 以下の HTML は、サンプルとして商品リストを表示するものです。各商品には、サムネイル画像をクリックすると対応する大きな画像が切り替わる仕組みを組み込んでいます。 JavaScript コード 次に、サムネイル画像をクリックすると、該当する商品ごとに大きな画像を変更する JavaScript を記述します。 コードの解説 document.querySelectorAll(‘.thumb’) で全てのサムネイルを取得 thumb クラスを持つすべての画像要素に対してイベントリスナーを設定します。 クリックイベントの追加 item.addEventListener(‘click’, function ()

ウェブサイトのローディングアニメーションは、ユーザーエクスペリエンスの一環として非常に重要です。ただし、毎回表示されるとユーザーにとって煩わしい場合もあります。そのため、1日1回だけローディングを表示し、それ以降は表示しないように制御する方法を紹介します。この方法では、ブラウザの localStorage を利用して、キャッシュを使った制御を実現します。 実装方法 以下は、ローディングアニメーションを1日1回だけ表示するコード例です。 HTML部分 JavaScript部分 コードの説明 ローディング表示の制御 localStorage を使用して、最後にローディングが実行された時間を記録します。 現在時刻と保存時刻の比較 現在の時間を取得し、localStorage に保存されている時間と比較します。24時間（86,400,000ミリ秒）以上経過している場合にのみ、ローディングを表示します。 ローディングのスキップ 1日以内に再訪問した場合はローディングをスキップし、ページを直接表示します。 注意点 localStorage の特性 localStorage

ユーザーエクスペリエンスを向上させるために、ウェブサイトに独自のマウスカーソルを導入する方法を紹介します。本記事では、カーソルがマウスに追従する動きや、リンクにホバーした際に見た目が変化する効果を実装する手順を詳しく解説します。 実装例 以下のコードでは、HTML、CSS、JavaScriptを使って独自のカーソルを作成します。 HTMLコード まず、カーソルの基本となる要素とボタンリンクを用意します。 コードの解説 HTML構成 <div id=”sampleCursor”>：カーソルの動きに追従する要素。 <a href=”#” class=”sample-btn”>：ホバー時のカーソル効果を確認するためのボタンリンク。 CSSスタイル .sample-cursor固定位置でマウスに追従するカーソル。背景色、サイズ、位置のアニメーション効果を定義。 .sample-cursor–hoverリンクホバー時の拡大効果を追加。 JavaScriptの動作 マウスの追従：mousemove イベントでカーソル位置を更新。transform: translate() を利用して滑らかに移動。

JavaScriptでスクロールに応じて要素を表示・非表示する方法 現在のウェブサイトは、スクロールするとアイテムが表示されたり非表示になったりする機能が使われることが多いです。本記事では、JavaScriptのスクロールイベントを使って要素を表示・非表示する方法を解説します。 実装のポイント スクロールによって、要素を表示したり非表示にする場合は、一般的に次の歩が必要です。 HTMLとCSSの準備 まず、HTMLとCSSでベースを作成します。 HTML JavaScriptの解説 動作の確認 まとめ JavaScriptのscrollイベントを使うと、要素の表示・非表示を簡単に制御できます。この技術は、アイテムのロードアニメーションやショーケースでよく使われる技術です。 Favorite

JavaScriptはオブジェクト指向プログラミングの要素を持つスクリプト言語です。プログラミングにおける「オブジェクト」とは、データや機能をひとまとまりにしたものを指します。本記事では、JavaScript学習者にとって必須のオブジェクトとその詳細について解説します。 基本オブジェクト Object説明: JavaScriptで最も基本的なオブジェクト型で、キーと値のペアを持ちます。プロパティーやメソッドObject.keys(obj): オブジェクトのキーを配列として取得。Object.values(obj): オブジェクトの値を配列として取得。Object.entries(obj): [キー, 値]のペアを配列として取得。 使用例 Array説明: 順序付きのデータを扱うためのオブジェクト。プロパティーやメソッドlength: 配列の長さを取得。push(value): 配列の末尾に値を追加。pop(): 配列の末尾から値を削除。 使用例 Function説明: 関数はオブジェクトの一種で、再利用可能なコードブロックを作成します。プロパティーname: 関数の名前を取得。length: 引数の数を取得。 使用例

フォームバリデーションでは、空白だけや全角スペースのみの入力を許可してしまうことが課題になる場合があります。この記事では、特に「氏名」「電話番号」「メールアドレス」の入力フィールドに対するバリデーションの実装方法について解説します。 問題点 一般的なHTML5のrequired属性では、次のような入力が通過してしまう場合があります。 これらを防ぐには、HTML5の基本機能に加えて、JavaScriptでカスタムバリデーションを実装する必要があります。 解決方法 以下のコードでは、氏名の全角スペース、電話番号の無効なフォーマット、メールアドレスの正しい形式をチェックする仕組みを統合しています。 HTMLコード まず、基本的なフォームのHTMLを用意します。 <form> <table> <tr> <th>氏名<span class=”must”>必須</span></th> <td> <input type=”text” name=”name” id=”name” class=”input-text validate[required]”

Swiperは、Webサイトにスライダーやカルーセルを簡単に導入できる人気のJavaScriptライブラリです。しかし、特定のバージョン、特に 7.4.7 のCDNリンクが公式で提供されていない可能性があります。この場合、適切なバージョンの選択や公式情報の確認が重要です。 Swiperの公式CDNサポート状況 SwiperのCDNリンクは通常、公式ドキュメントやCDNプロバイダー（例: jsDelivrやcdnjs）を通じて提供されています。ただし、以下の理由で特定バージョンが提供されていないことがあります。 旧バージョンのサポート終了 Swiperは頻繁にアップデートが行われるため、古いバージョンのCDNリンクが公式リストから除外されることがあります。 CDNプロバイダーの制約 一部のCDNプロバイダーでは特定バージョンがキャッシュされていない場合があります。 最新バージョンの利用をおすすめする理由 最新バージョンを利用することで、以下のメリットがあります。 新機能の活用 最新バージョンには、新しいスライダーオプションや機能が追加されています。 バグ修正 古いバージョンに存在する可能性のある不具合が修正されています。 セキュリティの向上 最新バージョンは、潜在的なセキュリティ問題にも対応しています。 最新バージョンのCDNリンクの確認方法 Swiperの最新バージョンを利用するには、以下の方法でCDNリンクを確認できます。

CSS の calc() は単体でも非常に便利ですが、さらに高度なレイアウト構築やJavaScript と組み合わせることで、より動的で柔軟なウェブデザインが可能になります。このセクションでは、次のステップとして活用できる実践的なアイデアを紹介します。 複雑なレイアウト構築への応用例 フレキシブルなグリッドシステムの構築 CSS グリッドと calc() を組み合わせることで、動的にサイズを調整する柔軟なレイアウトを作成できます。 例: 固定カラムと可変カラムの組み合わせ .container { display: grid; grid-template-columns: calc(200px) calc(100%

URLパラメーターを利用してページ内のコンテンツを切り替える方法は、特定のコンテンツをユーザーに見せたい場合や、特定の情報にアクセスさせたい場合に便利です。ここでは、URLパラメーターで指定された内容に応じて表示されるリンクとテキストが自動で変わるJavaScriptのサンプルコードを紹介します。 URLパラメーターとは？ URLパラメーターとは、URLの最後に追加される情報で、?key=value という形式で構成されます。例えば、https://example.com/page?category=sample1 の場合、category=sample1 というパラメーターが指定されています。 URLパラメーターでコンテンツを切り替える流れ 実装例 HTML構造 ここでは、各リンクとテキストが特定の data-category 属性を持っているとします。属性により、URLパラメーターの値に応じて表示する項目を切り替えます。 <div id=”sample-content” class=”hide-area”> <h3>サンプルコンテンツの切り替え</h3> <p>表示したいサンプルカテゴリーを選んでください。</p> <ul class=”sample-list”> <a

Webサイトやアプリケーションで、視覚的なインパクトを与えるスライドショーは訪問者の目を引きつけ、情報をスムーズに伝えるための効果的な手段です。その中でも、Swiper.js は豊富なカスタマイズオプションを提供し、さまざまな表現が可能なスライドショーを簡単に実装できる優れたライブラリです。 本記事では、Swiper.jsの基本設定から、フェード、カバーフロー、カードスライドなど、異なるエフェクトを用いた10種類のスライドパターンとその実装方法を詳しくご紹介します。各パターンにHTML、CSS、JavaScriptコードを添えているので、初心者の方でもすぐに試すことができるでしょう。さまざまなシーンで活用できるパターンをぜひ取り入れて、ウェブサイトをより魅力的にしてみてください。 Swiper.jsの取得方法 Swiper.jsはCDNから直接読み込む方法や、npmなどのパッケージ管理ツールを利用する方法で簡単に導入することができます。ここでは、2つの一般的な取得方法をご紹介します。 CDNから読み込む方法 最も簡単にSwiper.jsを導入する方法は、CDNを利用してHTMLに直接読み込む方法です。CDNを使用することで、追加のインストールなしでSwiper.jsを使い始めることができます。以下のコードを<head>タグ内に追加してください。 この方法では、インターネットに接続されている環境であればすぐにSwiper.jsの機能を利用できるようになります。 npmを使用してインストールする方法 開発環境でSwiper.jsを管理し、バージョン管理などを行いたい場合は、npmを使ってインストールするのが便利です。以下のコマンドを実行して、Swiperをプロジェクトに追加します。 インストールが完了したら、JavaScriptファイル内でSwiperをインポートして利用することができます。 これで、プロジェクト内でSwiperを自由に使用できるようになります。npmを利用すると、プロジェクトの一部としてSwiperを含めることができ、バージョン管理も簡単です。 使用例 基本的なスライド 1. 基本的なスライド HTML <div class=”swiper-container”> <div

パララックス効果は、スクロールに応じて背景画像が異なる速度で移動する視覚効果です。視差効果とも呼ばれ、ウェブサイトに動きと奥行きを加える手法として人気があります。この記事では、CSSだけで実現するシンプルな方法と、JavaScriptを使ってモバイル対応も可能にする方法について解説します。 CSSのみでの基本的なパララックス効果 CSSだけで簡易的なパララックス効果を実現するには、background-attachment: fixed;プロパティが効果的です。これにより、背景画像がスクロールに対して固定され、コンテンツが動くときに奥行きのある視差効果が生まれます。 サンプルコード #menu { background-image: url(../image/menubk.png); background-position: center; background-size: cover; background-attachment: fixed; /* 背景を固定 */ width: 100%;