WEBデザイン

WEBデザイン

JavaScriptでQRコードを作成【jQuery】

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

フォームの入力項目のチェック(バリデーション)を行ってくれるJS

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

郵便番号から住所をフォームに自動入力するJS

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

画面の色(カラーコード)を取得するおすすめツール

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

フォームの日付入力を簡単にするJS (flatpickr)

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

iframe埋め込みGoogleMAPの色を変える方法(API不要・無料)

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

<br>を使わずにCSSだけで改行する方法

<br>を使わずにCSSだけで改行したい場合があります。 そんな時に使えるテクニックです。 ::beforeを使う場合(spanの前で改行します。) 【CSS】※::beforeの場合 【HTML】 【表示例】...
2018.12.03
WEBデザイン

イメージマップ(クリッカブルマップ)をレスポンシブ対応にするJS

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

Bootstrap4の変更点まとめ

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

iframeの高さを判別して自動的に調整する(JavaScript)

iframeを使っているページなどで、iframeの高さを判別して自動的に調整したい。そんなときのJavaScriptです。(jQuery使用) cssなどでもできますが、手っ取り早く実装したい場合は以下のソースをコピペでOKです。 ...
2018.12.03
スポンサーリンク