browserSyncのrewriteRulesでSSI
WEBサーバで、SSI(Server Side Include)というのを使えるようにするとこの書式で、外部データをHTMLの一部として読み込めます。 npmパッケージでおなじみのbrowserSyncでSSIを使うとき …
ウェブの技術とか開発環境構築の覚書。
WEBサーバで、SSI(Server Side Include)というのを使えるようにするとこの書式で、外部データをHTMLの一部として読み込めます。 npmパッケージでおなじみのbrowserSyncでSSIを使うとき …
このようなgulp-sassでsassをコンパイルし、gulp-autoprefixerでベンダープレフィックスを自動付与する設定があり gulp-sourcemapsを追加してcssのsourceMapファイルを書き出 …
webpackでCSSも含んだJavaScriptを生成したいときの設定メモ。 css-loaderとstyle-loaderを追加 webpack.config.js のmoduleへ設定を追記 webpackのent …
dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …
セレクトボックスの展開した状態(optionタグ)は、2018年12月現在では各ブラウザCSSのカスタマイズ可能なプロパティが存在しません。 展開状態までデザインカスタマイズするには、JavaScriptでモックのDOM …
checkboxとCSSの~(一般兄弟結合子)を利用するとトグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。
JavascriptのquerySelectorやquerySelectorAllは 特定条件に一致する要素を取得できます。 querySelectorは、該当した最初の要素を querySelectorAllでは該当す …
Riot.jsは、変数としてHTMLタグを含む内容を渡しても、XSS対策として自動でエスケープして表示する仕様です。 しかし、WEBコンテンツを作成していると、こんなことも。 名称をキリの悪い場所でなりゆき改行させるわけ …
JavaScriptのLodashで、JSONの配列からOR検索、AND検索をしてみました。 サンプルは、Vue.jsで表示を制御しています。 光の三原色RGBと、色の三原色CMYを検索項目として、 選択された要素を含ん …
画像を使わずに、半透明の線、角丸で、一部が凸型に飛び出した装飾フレームを作ってみました。