自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

CSS jQuery 
.hogehoge { pointer-events: none; }

例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を

.soldout {
  position: relative;
}
.soldout:after {
  content: ""
  display: block;
  background: (soldout.png) no-repeat;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}

とかで表示した場合。 商品画像リンクの上に画像があるためリンクをクリックできませんよね。

こんなときに売り切れ画像をすり抜けてリンクをクリックできるようにするのが pointer-events: none; です。

このスタイルを指定すると目には見えているけどマウスのカーソルは透過するようになります。

※ブラウザの対応状況に注意

スマートフォン向けならば問題ないですが、IE10以下未対応のプロパティです。 まだまだIE10以下を使っている人は多いので、PC向けのページでの利用はオススメできません。


jQueryならIE10以下も対応

CSSのpointer-events: none;はIE10以下は機能しない。 ならばjQueryで実装する手もあります。

.soldout:afterの部分に透過させたい要素のクラス名を記述

<!--jQuery読込-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<!--クリック無効化-->
<script>
$(function(){
    $('.soldout:after').click(function(){
       return false;
    })
});
</script>

上記のタグを<head>内に記述すればOKです。

IE11～Edgeが主流になるまではjQueryでの実装がベストかと思います。

自動でファイル名に日付を入れてバックアップするバッチファイル

bat
1.下記のコードをテキストエディタにコピペ
setlocal
   rem /* 今日の日付を取得(yyyymmdd) */
   set now=%date:~-10,4%%date:~-5,2%%date:~-2,2%
   
   rem /* ○○に日付を入れてをバックアップ */
   xcopy /Y /E C:\○○ D:\○○_%now%\
 
   rem /* 一時停止 */
   pause
endlocal
2.○○のところにバックアップしたいファイルのパスを入力
3.「backup.bat」などのファイル名で保存しておく
4.コンピュータ→管理→タスクスケジューラ→基本タスクの作成
5.3で保存したbatファイルを指定、任意のトリガーを設定

これで自動でバックアップを取ってくれるプログラムの完成です。

毎日作業するExcelのバックアップなどを設定しておけば一日30秒の短縮。ファイル数によってはもっと時間の節約になりますね。

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

CSS

See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen.

img {
  width:30%;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

filterプロパティはその名のとおり画像にフィルターをかけることができます。 これを使って画像をぼかして、hover時に通常表示に直しています。

グレースケール→カラーも可能です。

img {
  width:30%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

その他にも色々なエフェクトがかけれる！ ↓こちらが参考になります。

qiita.com

CSSのみで「スクロールすると表示されるフローティングメニュー」

CSS

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。

jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメージです。

headerにz-index:2;を指定する

z-indexを指定するにはpositionの指定も必要なので、position:relative;も指定します。 これでheaderが最前面に表示されることになります。

menuにz-index:1;を指定する

こちらはフローティング化するので、 position:fixed;とtop:0;を指定します。

これでheaderの背面に隠れることになります。

完成状態がこちら

See the Pen CSSのみで「スクロールすると表示されるフローティングメニュー」 by maru (@maru0014) on CodePen.

headerに背景色もしくは背景画像を付けるのを忘れずにね！

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座

.load()メソッド IE10で読み込まれない原因は

jQuery

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。

IE10は.load()メソッドは対応しているはずなのに・・・。

まず疑ったのはキャッシュ。
キャッシュを全て削除して更新してみたが改善されない。

原因は・・・・。

<script>
  $(function() {
    // 文字コードの修正
    $.ajaxSetup({
      beforeSend: function(xhr) {
        xhr.overrideMimeType("text/html;charset=euc-jp");
      }
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

上記を見たら皆さんお気づきかと思いますが、僕は15分くらい悩んだ末IEのデバックツールで見たら一発でした。（一番最初に確認するべきだった・・・）

文字コードの指定が非対応

文字コードの修正の部分は、euc-jpで作られたhtmlがajaxによってutf-8に強制変換され文字化けしてしまうのを防ぐために書いたのですが、overrideMimeTypeはIE10以下非対応でした。

これのせいでscriptが停止し、読み込まれなかったわけです。

IE10はまだまだ利用者の多いブラウザのため切り捨てるわけにはいかず、パーツとなるhtmlの文字コードをutf-8にし、overrideMimeTypeを廃止しました。

念のため.load()のキャッシュを無効にする

今回の件で調べているうちにキャッシュが原因で1回めのアクセス時に表示されず、リロードすると表示されるなどの不具合があるという記事が見つかったので、念の為にキャッシュさせない設定を組み込みました。

<script>
  $(function() {
    // キャッシュOFF
    $.ajaxSetup({
        cache: false
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>