WEBデザイン JavaScriptでQRコードを作成【jQuery】 JavaScriptでQRコードをサクッと作成してWebサイトに表示したい。 そんなときにすぐに使える「jQuery.qrcode.js」を紹介します。 QRコード内の日本語も文字化けしないように対策します。 jQuery.qrcode.j... 2019.08.11 WEBデザイン
WEBデザイン フォームの入力項目のチェック(バリデーション)を行ってくれるJS メールフォームや申し込みフォームを作成した際に、必須項目の入力確認やメールアドレスの書式などの入力チェックをすることをフォーム・バリデーション(Form Validation)と呼びます。 HTML5からは標準機能としてフォーム・バリデーシ... 2019.03.05 WEBデザイン
WEBデザイン 郵便番号から住所をフォームに自動入力するJS お問い合わせフォームなどで郵便番号を入力すると自動的に住所を入力する代表的なJavaScriptをまとめてみました。 フォームの入力は、入力する側になると実は結構めんどうでストレスがかかります。 そのストレスを軽減するために入力作業は簡単で... 2019.02.28 2024.10.07 WEBデザイン
WEBデザイン 画面の色(カラーコード)を取得するおすすめツール Web制作をしているとブラウザやPCの画面から色(カラーコード)を取得したい場面があります。 そんな時に使えるツールは多々ありますが、おすすめは以下の3つです。 ブラウザ内のカラーコード取得なら「ColorZilla」か「ColorPick... 2019.01.22 WEBデザイン
WEBデザイン フォームの日付入力を簡単にするJS (flatpickr) 入力フォームの日付を簡単にカレンダーから選択できるようにするには「flatpickr」がとても便利です。 設置が簡単なうえに一瞬で入力フォームのクオリティが一気に高まるので日付の入力補助系のJSの中では一番オススメです。 さっそく設置方法を... 2019.01.09 WEBデザイン
WEBデザイン iframe埋め込みGoogleMAPの色を変える方法(API不要・無料) ホームページやブログにGoogleMAPを埋め込んだ際に、デザイン的にGoogleMAPの色を変更したいときがあります。 今まではAPI版のGoogleMAPを利用すれば色変更が簡単に行えたのですが、2018年7月のGoogleMAP AP... 2018.12.22 WEBデザイン
WEBデザイン <br>を使わずにCSSだけで改行する方法 HTMLタグの改行コード<br>を使わずにCSSだけで改行したい場合があります。そんな時に使えるテクニックです。 ::beforeを使う場合(spanの前で改行します。) 【CSS】※::beforeの場合 【HTML】 【表示例】 See... 2018.09.20 2021.04.19 WEBデザイン
WEBデザイン イメージマップ(クリッカブルマップ)をレスポンシブ対応にするJS WEBページの作成時などで、画像に複数のリンクを張りたいときや画像の一部分だけにリンクを張りたいときにはイメージマップ(クリッカブルマップ)を利用します。 メージマップ(クリッカブルマップ)は、最近はあまり使われなくなったがまだまだたまに利... 2018.04.02 WEBデザイン
WEBデザイン Bootstrap4の変更点まとめ オープンソースのCSSフレームワークである最新版Bootstrapの「Bootstrap4」が2018年1月18日に正式リリースされた。約5年ぶりのメジャーアップデートだ。更に先日、AdobeのDreamweaverでもBootstrap4... 2018.03.20 WEBデザイン
WEBデザイン iframeの高さを判別して自動的に調整する(JavaScript) iframeを使っているページなどで、iframeの高さを判別して自動的に調整したい。そんなときのJavaScriptです。 jQueryを使用する方法と、jQueryを使用しない方法の2通りの設定方法を解説します。 cssなどでもできます... 2018.03.16 WEBデザイン