プログラミング– category –
-
【EC-CUBE4】よくある質問ページを作ってみた(2)
アコーディオンUIを採用した、よくある質問(FAQ)ページの作成・続編です。 実装までの手順 『1』新規ページ(よくある質問ページ)を作成する(別記事 1ページ目) ... -
【EC-CUBE4】よくある質問ページを作ってみた(1)
ECサイトなどで見かける「よくある質問(FAQ)ページ」を実装してみたので、本記事にて実装までの手順を公開します。 実装後の画面(動画) よくある質問(FAQ)ページ... -
【JS】効果音やBGM(サウンド)の実装方法
本記事では、以下のような効果音やBGMを実装する方法を紹介します。 効果音(ボタン) 効果音(1) 効果音(2) 効果音(3) BGM 再生 停止 最初から 音量: 本記事で使用して... -
Webデザイン・UIコンポーネント集(HTML/CSS/JS)
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。(随時更新中)実装方法などは別記事にコードや実装ポイントを公開してい... -
【JS&CSS】タスクの進捗状況を示すプログレスバーの実装方法
本記事では、以下のようなプログレスバーを作る方法を紹介します。 不定型プログレスバー(indeterminate) 決定型プログレスバー(determinate) Task 1 Task 2 Task 3... -
【JS&CSS】ページ読み込み完了までローディングアイコンを表示する
本記事では、以下のようなローディングアイコンを作る方法(CSS)と、ページの読み込みが完了するまでローディングアイコンを表示する方法(JavaScript)を紹介します。... -
【JS&CSS】画像をズームイン&ふわっと切り替える方法
本記事では、以下のように画像がズームインしつつ、一定時間で別の画像に切り替わっていく実装方法をご紹介しています。 HTML / CSS / JavaScript コード HTMLCSSJavaSc... -
【JS&CSS】よくある質問(FAQ)を実装する(アコーディオン)
本記事では、以下のような「よくある質問集」の実装方法をコード付きで紹介しています。 よくある質問_その1 よくある質問_その1の答え よくある質問_その2 よくある質... -
【JS&CSS】タブ&モーダルを組み合わせてお知らせ表示を実装する
本記事では、以下のようなモーダルウィンドウを使った「お知らせ表示」の実装方法を、HTML / CSS / JavaScriptのコード付きで紹介します。 お知らせ 1 お知らせ 2 お知... -
【EC-CUBE4】特定タグの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ
特定のタグが付いた商品の詳細ページ上部(商品名の上)に、共通のテキストやアイコンを表示するには? 本記事では、以下のように「おすすめ商品」タグが付いた商品の詳... -
【EC-CUBE4】特定カテゴリーの商品詳細ページに共通のテキストやアイコンを表示するカスタマイズ
特定のカテゴリーに属する商品の詳細ページ上部(商品名の上)に、共通のテキストやアイコンを表示するには? 本記事では、以下のように「新入荷」カテゴリーに属する商... -
【EC-CUBE 4】 商品一覧ページの並び順(ソート順)を新規追加するカスタマイズ
本記事では、以下のように商品一覧ページ右上に表示される並び順(ソート順)の種類を増やすカスタマイズについて紹介します。 新たに「更新順」というソート機能を追加... -
【EC-CUBE 4】商品一覧を複数ページに分割表示(ページネーション)するカスタマイズ
本記事では、独自に作成した商品一覧ページを以下のように複数ページに分けて表示する、ページネーションのカスタマイズについて紹介します。 デフォルトの商品一覧ペー... -
【EC-CUBE 4】商品のソート(並び替え)オプションの実装方法
先日、商品一覧ページにある商品並べ替え(ソート)オプションのカスタマイズ方法について解説しました。 本記事では、以下のような新しく作成したページに、同様の商品... -
【JS&CSS】ダークモード(テーマ)切り替えボタンの実装方法
本記事では、以下のようにボタンクリックでライトモード(背景:白)とダークモード(背景:黒)を切り替える実装方法を紹介します。 ダークモードに切り替え サンプル... -
【JS&CSS】途中からフワッと表れて追従する固定ヘッダーの作り方
以下のように画面をスクロールすると、ヘッダーがフワッと表示されて追従(トップに固定)するヘッダーの作り方を紹介します。(JavaScriptとCSSを使います。) 仮ロゴ ... -
【無料】メモ書きにも使えるToDoリストとその作り方
Add Clear 使い方 入力フォームに To Do を入力して「Add」ボタンをクリックすると、To Do が追加される。複数追加も可能。 各To Doはドラッグ&ドロップで順番を入れ替... -
【JS】ドラッグ&ドロップで表示を入れ替えるUI
本記事では、ドラッグ&ドロップで複数のアイテムの順番を入れ替える実装方法を解説します。 実装例)To Do リストの順番を入れ替える Task 1 Task 2 Task 3 Task 4 HTM... -
【JS】ドラッグ&ドロップの実装方法
本記事では、以下のように直感的にアイテムを操作できるドラッグ&ドロップの基本的な実装方法について紹介します。 こちらのブロックをドラッグできます。 ドラッグし... -
【JS】<iframe>の高さを引用先ページの高さに自動調節(別ドメイン)
先日、引用先ページが同一ドメインの場合の<iframe>の高さ(height)を、引用先ページの高さに揃える方法について紹介しました。 ただしこの方法は、引用先ページ...