2019/02/12

position:stickyでスクロール可能なテーブルの行・列ヘッダを固定する

テーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。そんなときにはposition: stickyを使うと簡単に実装できる。
ただしIEは対応していないため、ポリフィルが必要となる。

完成予想イメージは以下のとおり。

2019/02/04

Firefoxでbackground-imageなどに指定したInline SVGで色が反映されない

NES.cssの開発をしているときに、特定のブラウザ(Firefox)だけSVGの色が反映されないバグを発見した。IE、Safari、Chromeでは再現しない。
background-imageborder-imageにInline SVGを指定したときに発生する。Inline SVGとは以下のように、url("data:image/svg+xml;...")で指定する方法を指す。
.item {
  /* 色が反映されない */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
}

2019/01/25

Canvasで任意の色に近い色をカラーパレットから取得し画像を減色する

Canvasで表現できる色は、RGBがそれぞれ0〜255の値を取るので、256*256*256の16,777,216種類ある。(※Alphaについては考えない)
そのまま表示すれば実物に近い画像になるのだが、減色したいときもある。(レトロ感をだす画像処理フィルターとか)

そこで、任意の色に近い色をカラーパレットから取得し画像を減色する方法をまとめる。