jquery.qrcode.jsを使ってQRコードを生成する方法｜DAD UNION

jquery.qrcode.jsを使ってQRコードを生成する方法をご紹介します。

Contents

jquery.qrcode.jsを使ってQRコードを生成するCSSの記述
jquery.qrcode.jsを使ってQRコードを生成するHTMLの記述
jquery.qrcode.jsを使ってQRコードを生成するJavaScriptの記述
jquery.qrcode.jsを使ってQRコードを生成するデモページ
ソース元：jquery-qrcode

jquery.qrcode.jsを使ってQRコードを生成するCSSの記述

※必要に応じて変更して下さい。

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
</style>

jquery.qrcode.jsを使ってQRコードを生成するHTMLの記述

※id=”output”に生成したQRコードを出力します。

<h1>jquery.qrcode.jsを使って以下にQRコードを生成表示してます。<br>URLが https://dad-union.com のQRコードを生成してます。</h1>

<div id="output"></div>

jquery.qrcode.jsを使ってQRコードを生成するJavaScriptの記述

※jquery-1.11.0.min.js、jquery.qrcode.min.jsファイルを読み込みます。jQuery(‘QRコード出力先タグ要素’).qrcode(“QRコード生成するURL”)

<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script>
jQuery(function(){
  jQuery('#output').qrcode("https://dad-union.com");
})
</script>