WEBデザイン

JavaScriptでQRコードをサクッと作成してWebサイトに表示したい。 そんなときにすぐに使える「jQuery.qrcode.js」を紹介します。 QRコード内の日本語も文字化けしないように対策します。 jQuery.qrcode.j...

メールフォームや申し込みフォームを作成した際に、必須項目の入力確認やメールアドレスの書式などの入力チェックをすることをフォーム・バリデーション(Form Validation)と呼びます。 HTML5からは標準機能としてフォーム・バリデーシ...

お問い合わせフォームなどで郵便番号を入力すると自動的に住所を入力する代表的なJavaScriptをまとめてみました。 フォームの入力は、入力する側になると実は結構めんどうでストレスがかかります。 そのストレスを軽減するために入力作業は簡単で...

Web制作をしているとブラウザやPCの画面から色(カラーコード)を取得したい場面があります。 そんな時に使えるツールは多々ありますが、おすすめは以下の3つです。 ブラウザ内のカラーコード取得なら「ColorZilla」か「ColorPick...

入力フォームの日付を簡単にカレンダーから選択できるようにするには「flatpickr」がとても便利です。 設置が簡単なうえに一瞬で入力フォームのクオリティが一気に高まるので日付の入力補助系のJSの中では一番オススメです。 さっそく設置方法を...

ホームページやブログにGoogleMAPを埋め込んだ際に、デザイン的にGoogleMAPの色を変更したいときがあります。 今まではAPI版のGoogleMAPを利用すれば色変更が簡単に行えたのですが、2018年7月のGoogleMAP AP...

HTMLタグの改行コード<br>を使わずにCSSだけで改行したい場合があります。そんな時に使えるテクニックです。 ::beforeを使う場合（spanの前で改行します。） 【CSS】※::beforeの場合 【HTML】 【表示例】 See...

WEBページの作成時などで、画像に複数のリンクを張りたいときや画像の一部分だけにリンクを張りたいときにはイメージマップ(クリッカブルマップ)を利用します。 メージマップ(クリッカブルマップ)は、最近はあまり使われなくなったがまだまだたまに利...

オープンソースのCSSフレームワークである最新版Bootstrapの「Bootstrap4」が2018年1月18日に正式リリースされた。約5年ぶりのメジャーアップデートだ。更に先日、AdobeのDreamweaverでもBootstrap4...

iframeを使っているページなどで、iframeの高さを判別して自動的に調整したい。そんなときのJavaScriptです。 jQueryを使用する方法と、jQueryを使用しない方法の2通りの設定方法を解説します。 cssなどでもできます...