Monthly Archives: July 2019

New!

JavaScript: Gulp4 + EJS のインクルードファイルの相対パスを変数化する

EJS を使用し、header や footer 等の共通部分を外部から呼び出す場合、インクルード元のファイルの階層が違うと、相対パスのリンクが切れてしまいます。 今回は、あらゆる階層から呼び出されても階層にあわせて相対パスが変わるように、EJS ファイルに変数を割り当てる方法を説明したいと思います。 目次 Gulp4 + EJS のインクルードファイルの相対パスを変数化する まとめ Gulp4 + EJS のインクルードファイルの相対パスを変数化する 以下のような階層構造で、index.ejs と page.ejs がともに header.ejs をインクルードした場合のサンプルコードとなります。 ファイルツリー gulpfile.js site.json サイト全体で使用するデータです。主に head タグ内で利用するものを記述しています。 (例) で “Your Sitename” が出力 header.ejs index.ejs page.ejs まとめ EJS を導入する以上、目的は静的ファイルの大量生成となるはずなので、相対パスの変数化は必須です。 gulpfile.js さえコーディングしてしまえば次回以降使い回しがきくので、今回説明した作業はしっかりとおさえておきたいところです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: hover 要素のマウスイベントを無効にする

UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。 今回は CSS でマウスイベントを無効にする方法をメモしておきます。 目次 hover 要素のマウスイベントを無効にする まとめ hover 要素のマウスイベントを無効にする pointer-events というプロパティがありますので、これを none にします。(デフォルトは auto) まとめ 今回説明したケース以外でも、親要素に hover やクリックイベントが効いていて、内包される子要素のボタンがクリックできない問題も、親要素に pointer-events: none; を適用することで解決します。 pointer-events は、Opera Mini を除くすべてのブラウザでサポートされているので、実際に利用してもほぼ問題ないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。