この記事では、カードをクリックしたらカードからモーダルを拡大縮小して表示する方法とコードについて解説します。 具体的には、HTML、CSS、JavaScriptを使用して、ユーザーがカードをクリックすると関連情報を表示す ...

この記事では、JavaScriptの.nextElementSiblingを使って、ユーザーがクリックしたアイテムの直後に位置する要素を操作することで、スムーズな開閉アニメーションと画像のロードを実現します。 簡潔なコー ...

フリーランスデザイナーの自由な働き方の魅力と同時に、経費管理も必要です。 この記事では、フリーランスWebデザイナーが押さえておくべき経費の基礎知識を解説します。 目次経費管理の基本必要な経費の種類確定申告と経費の関係確 ...

フリーランスのデザイナーとして成功するには、質の高い仕事を迅速に提供することが重要です。しかし、多くの駆け出しデザイナーは、制作に時間がかかりすぎて時給が低下してしまうという課題に直面します。 この記事では、自分の実体験 ...

この記事では、JavaScriptのfor (let i =) のループを使って、10問の質問の回答でスコアを出してリダイレクトをかける方法について解説しています。 比較的診断系のコンテンツで使えそうなスニペットなので、 ...

JavaScriptの .addEventListener() を使ってボタンクリックで画像を切り替えするのと同時に、JavaScriptのループを使って「どのボタンが現在アクティブなのか？」を視覚的に切り替えます。 応 ...

JavaScriptのFileReader APIを利用して、CSVファイルを読み込み、その内容をHTMLテーブルとして表示する方法について解説します。 特に FileReader.readAsText() メソッドの使 ...

WordPressのようなエディタで、ヘッダータグ（h1〜h6）とその中の要素をグループ化しようと思うと、HTMLタグで書く必要があったりと、なかなか不便なケースがあります。 この記事では、そんなヘッダー間の要素を自動的 ...

この記事では、ラジオ・チェックボックスの選択することで、動的に価格が更新される見積もりフォームの作成について解説しています。 HTMLでフォームのレイアウトを作り、JavaScriptでユーザーの選択に応じて価格を算出、 ...

LPのようなウェブサイトの最適化を図るための一つの手法で、A/Bテストがあります。 今回は、JavaScriptのsessionStorageを活用して、ランディングページのABテストを実装する方法を紹介します。 特に、 ...

ニュースティッカーは、短いテキスト情報をスクロール表示するUI要素です。 ウェブページやテレビ画面などでよく見られ、ニュースの見出しや重要な情報を短いテキストで表示し、一定の時間間隔で順次切り替えて表示します。 今回は、 ...

今回は、JavaScriptの.offsetHeight プロパティを使って、ページ最下部に到達した時にモーダルを表示させてみます。 カスタマイズもしやすく、コード自体も簡単な内容なので、是非チェックしてみてください。 ...

今回は、JavaScriptの.getAttribute() でYouTube動画をモーダルで再生させます。 比較的、HTMLは簡素でメンテしやすい形で作っているので、最後までご覧いただけると嬉しいです。 目次.getA ...

今回は、.clipboard.writeText() メソッドを使って、指定タグをクリックでURLをコピーするコードについて解説します。 目次.clipboard.writeText()指定タグをクリックでURLをコピー ...

この記事では、ターミナルからMySQLにログインして「データベースを見る」ための基本的なコマンドについて紹介します。 MySQLを見るまでの、ログイン方法・データベースの一覧表示・テーブルの内容表示・ログアウトのコマンド ...

ファイルを選択 PDFに変換 変換したPDFをダウンロード

今回は、BtoBの申し込みフォーム・資料ダウンロードフォームでよく見る「離脱防止」で表示されるモーダルをJavaScriptで作ってみます。 関連記事 モーダルの基本的な使い方とデザイン モーダルは、強制力が強くユーザー ...

「外部からWordPressにアクセスすることができる」WP REST APIを使って、この記事では検索を作ってみます。 デフォルトで使える「WordPressの代替え」にも使えるので、最後までご覧いただけると嬉しいです ...

シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...

シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...