SimpleIsm

演算処理した結果の何かを出したいと思って思いつきで作ってみた。

Sassで四角形(QRコード)の辺を変えると、その中のパターンも可変するというもの。

HTMLはQRコード(二次元バーコード)作成【無料】でQRコード作って、白黒のパターンに合わせてクラス名を割り振った。29×29パターンあるので、HTMLは割愛。

@charset "utf-8";

//辺の長さを指定
$edge: 145px;

@mixin square {
    height: $edge;
    width: $edge;
}

//29x29パターンに分割したあと、小数点以下切り捨て
@mixin dot {
    height: floor($edge / 29);
    width: floor($edge / 29);
}

.qrcode {
    @include square;
    div {
        overflow: hidden;
    }
}

span {
    @include dot;
    display: block;
    float: left;
}

.b {
    background-color: #000;
}

.w {
    background-color: #FFF;
}

以下出力結果

.qrcode {
  height: 145px;
  width: 145px;
}

.qrcode div {
  overflow: hidden;
}

span {
  height: 5px;
  width: 5px;
  display: block;
  float: left;
}

.b {
  background-color: #000;
}

.w {
  background-color: #FFF;
}

View Demo: QR Code in HTML and CSS

CSS書くよりHTMLでそれぞれ黒か白かを指定するのが面倒くさかった…。メリットは拡大縮小しても滲んだり潰れたりしないことかな。ならSVG使えって話か…。

でもPHPの勉強がてらURL入力してできたQRコード(画像)の白黒部分判別してHTMLとCSSを吐き出すツールを作ってみようかな。うん、そのうちやろう。

参考サイト

QRコード(二次元バーコード)作成【無料】

sassの抑えておきたいfunctionの使い方 « NAVER Engineers’ Blog