Riot.jsでタグをエスケープせずに出力する
Riot.jsは、変数としてHTMLタグを含む内容を渡しても、XSS対策として自動でエスケープして表示する仕様です。 しかし、WEBコンテンツを作成していると、こんなことも。 名称をキリの悪い場所でなりゆき改行させるわけ …
「技術情報」の記事一覧
Lodashでor検索and検索
JavaScriptのLodashで、JSONの配列からOR検索、AND検索をしてみました。 サンプルは、Vue.jsで表示を制御しています。 光の三原色RGBと、色の三原色CMYを検索項目として、 選択された要素を含ん …
画像を使わずに凸型で半透明の角丸枠をつくる
画像を使わずに、半透明の線、角丸で、一部が凸型に飛び出した装飾フレームを作ってみました。
SVGを画像パターンで塗りつぶす
defsを使うとSVGのfill（塗りつぶし）にパターンも定義できます。
window.matchMediaでJavaScriptもCSSと同じ基準でレスポンシブ管理
JavaScriptの matchMediaをこのように使うと CSSのレスポンシブ対応のmedia設定と平仄をあわせてレスポンシブの分岐を設定できます。 Interner Explorer 10 から対応しているので、 …
かな順で並べ替えするJavaScript
配列のデータをカナの昇順に並べ替えます。 jsonからHTMLに一覧を出力して、カナ順、価格順でならべかえるサンプルです。 match.charCodeAtで文字をUTF-16のコードへ変換し、文字コード順に並べ替えてい …
HTMLコードだけで1pxの透過GIF
読み込み中のダミーなどに、幅1px、高さ1pxの透過GIFをHTMLコードだけで設置する記述です。 data:image/gifで、base64にエンコードしたGIFのバイナリコードを直接書いています。
CSSのclip-pathでコンテンツを丸く切り抜く
マテリアルデザインの、ボタンが円形に広がりコンテンツ表示領域となるエフェクトを作りたくて 画像ではなくテキストやその他のタグも含んだ要素をマスキングするclip-pathの使い方を研究してみました。 サンプルは、マウスや …
JavaScriptの浮動小数点と小数点以下N桁での四捨五入
JavaScriptは浮動小数点数を使用しているため たまに、計算結果として小数点以下に凄い00000000の桁がくっついてくることがあります。 -0.1 + -0.4 = -0.30000000000000004 参考 …
JavaScriptでAndroid4.4対応のUI実装のとき思い出す非対応機能
2018年前半、まだクライアントワークで対応することがあるAndroid4.4でサポートされていないJavaScriptやCSSの備忘録です。 端末やOSのシェア率を調べることができるスマタブinfoによると、 2018 …