QRコード作成 HTML版

QRコードを作成してHTMLのテーブルタグで書き出します。

QRコードを作成してHTMLのテーブルタグで書き出します。ウェブサイトに最適

QRコード作成 HTML版

文字列からQRコードを作成します。HTMLテーブルタグのセル背景色で表現。画像生成しないのでコンパクト。
軽量で最も綺麗でウェブページに最適。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。

文字列を入力

エラー復元能力

CSSネスト記法

インデント

暗色部の色

アニメーション

出力コードにアニメーションは含まれません。
アニメーションは利用方法の一例です。

tableタグで構成したものはMacやiOSなどApple製品で正常に表示されない場合が有ります。 dlタグ(display: grid;)で構成したコードをご利用ください。

tableタグで構成。tableタグで構成したものはMacやiOSなどApple製品で正常に表示されない場合が有ります。 dlタグで構成したコードをご利用ください。

dlタグ(display: grid;)で構成。お勧め

関連サイト:
QRコード作成 Illustrator版。 AIデータを出力
QRコード作成 SVG版。 SVG画像を出力
QRコード作成 Excel版。 .xlsxを出力
QRコード作成 PNG,GIF,JPG版。 PNG,GIF,JPG画像を出力
画像のQRコードをデコード。QR読み取り
動作環境(2022-09-05時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6
使い方
文字列を入力またはペーストします。
エラー復元能力を選択します。通常はH(30%)を選びます。
HTMLコードをダウンロードします。
余白を確保してHTMLページに組み込めば完成です。
CSSのプロパティに aspect-ratio が追加されました。レスポンシブレイアウトでTABLEタグを正方形に保つという処理が容易になり、本プログラムの考案となりました。
QRコードの掲載場所がHTML内であれば、わざわざQRコード画像を作成することも無く、HTML内へ埋め込みになります。レスポンシブ対応で拡大縮小してもきれいな品質を保ちます。
HTMLコードにすることで表示開始時にちょっとしたアニメーションを付けて目を引くことも可能です。
画像を別管理しなくてもHTMLコードだけで完結できるのは嬉しい。これまでもHTML内への埋め込みはSVGで可能でしたがよりコンパクトです。
生成されたQRコードはお手持ちのスマートフォンで読み取り確認をお願いします。
QRコードに埋め込むことのできるデータ量は、数字:7089文字、英数字:4296文字、バイナリ:2953バイト、漢字:1817文字 とされています。

QRコードとは、1994年にデンソーの開発部門(現在は分離し、デンソーウェーブとなっています)が開発したマトリックス型二次元コードの一種です。白と黒の格子状のパターンで情報を表します。
QRはQuick Response(クイックレスポンス)に由来し、高速読み取りができるように開発されました。日本では最も普及している二次元コードと言えます。
バーコードは横方向にしか情報を持たないのに対し、QRコードは縦横に情報を持ちます。そのため、格納できる情報量が多く、数字だけでなく英字や漢字のデータも格納できます。また、非推奨ですが、濃淡の判別が可能であれば、白黒に限らず着色して使用可能です。

「QRコード」は株式会社デンソーウェーブの登録商標です。QRコードの作成や利用にはライセンスは必要ありませんが、「QRコード」の文言をウェブページ等に表示する場合は登録商標文の併記が必要となります。詳細は株式会社デンソーウェーブのウェブページをご確認ください。
この記事は2022年9月当時の物です。
2023年10月改訂。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。