checkboxでアコーディオンを作る
checkboxとCSSの~（一般兄弟結合子）を利用するとトグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。
記事一覧
Element.querySelectorの条件指定はCSSセレクタと一緒
JavascriptのquerySelectorやquerySelectorAllは 特定条件に一致する要素を取得できます。 querySelectorは、該当した最初の要素を querySelectorAllでは該当す …
Riot.jsでタグをエスケープせずに出力する
Riot.jsは、変数としてHTMLタグを含む内容を渡しても、XSS対策として自動でエスケープして表示する仕様です。 しかし、WEBコンテンツを作成していると、こんなことも。 名称をキリの悪い場所でなりゆき改行させるわけ …
Lodashでor検索and検索
JavaScriptのLodashで、JSONの配列からOR検索、AND検索をしてみました。 サンプルは、Vue.jsで表示を制御しています。 光の三原色RGBと、色の三原色CMYを検索項目として、 選択された要素を含ん …
画像を使わずに凸型で半透明の角丸枠をつくる
画像を使わずに、半透明の線、角丸で、一部が凸型に飛び出した装飾フレームを作ってみました。
SVGを画像パターンで塗りつぶす
defsを使うとSVGのfill（塗りつぶし）にパターンも定義できます。
Google FontsがInternetExplorerのサポートを終了
2018年の8月半ばに、GoogleFontsのInternetExplorerサポートが終了しました。 IEの最新版である11でGoogleFontsへアクセスすると、サポート外である旨ガイドが表示されます。 Your …
window.matchMediaでJavaScriptもCSSと同じ基準でレスポンシブ管理
JavaScriptの matchMediaをこのように使うと CSSのレスポンシブ対応のmedia設定と平仄をあわせてレスポンシブの分岐を設定できます。 Interner Explorer 10 から対応しているので、 …
MacのセキュリティSIPを解除する
MacOS10.13 (High Sierra) から導入されているセキュリティ強化の仕組みSystem Integrity Protecton (SIP)を解除する方法です。 くれぐれも自己責任で… 参考： OS X …
npm installしたのにcommand not foundになるのはnode_modulesへのパスが原因かも
なんとも初歩的な過ちですが、備忘として… このように、npm installでプロジェクトへインストールしているモジュールが動作しない場合は node_modulesディレクトリへのパスが通っていない可能性があります。