ボタン on qwerty.work

【CSS】マウスホバー時に『キラーん』と光るような効果のボタン作成メモ

Sun, 30 Oct 2022 21:29:22 +0900

サンプル

マウスが重なると光るようなアニメーションが表示されます。

.btn { display: flex; justify-content: center; align-items: center; background-color: #bdfa3e; width: 28.4rem; height: 11rem; border-radius: 5.5rem; font-size: 3.8rem; font-weight: 900; box-shadow: 0 1rem 1rem rgba(0,0,0,.16); overflow: hidden; position: relative; text-decoration: none; } .btn::before { content: ‘’; display: block; width: 5rem; height: 300%; top: 50%; position: absolute; background-color: #fff; transform: translate(-500%,-50%) rotate(-45deg); transition: transform .5s ease; } .btn:hover::before { transform: translate(500%, -50%) rotate(-45deg); }

ボタン

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bdfa3e;
    width: 28.4rem;
    height: 11rem;
    border-radius: 5.5rem;
    font-size: 3.8rem;
    font-weight: 900;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.16);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.btn::before {
    content: '';
    display: block;
    width: 5rem;
    height: 300%;
    top: 50%;
    position: absolute;
    background-color: #fff;
    transform: translate(-500%,-50%) rotate(-45deg);
    transition: transform .5s ease;
}
.btn:hover::before {
  transform: translate(500%, -50%) rotate(-45deg);
}

その他参考サイト

https://coco-factory.jp/ugokuweb/move01/7-1-40/ https://coco-factory.jp/ugokuweb/move01/7-1-40/

https://photopizza.design/shiny_btn_animation/ https://photopizza.design/shiny_btn_animation/

https://dezanari.com/css-shiny-button/ https://dezanari.com/css-shiny-button/

https://give-shot.jp/tokyocss/button-shine/ https://give-shot.jp/tokyocss/button-shine/

https://switch-box.net/shine-button.html https://switch-box.net/shine-button.html

【CSS】両端だけ半円（丸）にする border-radius: 9999px;

Fri, 05 Aug 2022 09:45:17 +0900

両サイドだけ丸いボタンを作りたい

スタイルシートで横長のボンタンを作成するとき、簡単に両サイドだけが丸くしたいときに関電できる方法を見つけたのでメモ

.button {
  width: 100px;
  border-radius: 9999px;
}

widthで幅を指定して、border-radius: 9999px;を加えるだけで、とても簡単です。以下の方法でも可能です。

.button {
  width: 200px;
  border-radius: 200px;
}

他にも、以下のページではborder-radius: 100vh;といったやり方もあるようです。

コツとしては幅よりもborder-radius大きい値を指定すればいいみたいですね。

一定のスクロール後に「トップへ戻る」ボタンを表示させるサンプル【jQuery】

Fri, 01 Jul 2022 13:13:15 +0900

パージ右下にトップへ戻るボタンを表示したい

レスポンシブ対応のサイトやランディングページ（LP）を制作するとページが長くなります。そんなときにページ右下に「ページトップに戻る」ボタンを設置したいのですが、ファーストビューから表示はしたくありません。

そんなときに見つけたの以下のページ。こちらでは、ある程度ページを下にスクロールしたらボタンを表示するようにでできるサンプルがありました。jQueryとCSSを使用する方法です。

参考ページ

https://yuyauver98.me/scroll-show-hide-btn/ https://yuyauver98.me/scroll-show-hide-btn/

単純にコピペではJSが動かなかった

上記のソースをそのままコピペ下だけでは動きませんでした。特に動作を制御するJSがうまく動きませんでした。Javascriptは外部から読み込むようにしたのですが、その際に$(document).ready(function() {～ });で囲ってやれば解決できました。

JS部分のサンプル

$(document).ready(function() {

//下から表示させる要素を指定
  let $pagetop = $('.ScrollTop');

  $(window).on( 'scroll', function () {
    //スクロール位置を取得
    if ( $(this).scrollTop() < 500 ) {
      $pagetop.removeClass('isActive');
    } else {
      $pagetop.addClass('isActive');
    }
  });

//ページ内リンクスムーススクロール
  $('a[href^="#"]').on('click', function () {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop: position}, 550, "swing");
    return false;
  });
    
});

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする

Tue, 07 Dec 2021 17:11:05 +0900

画面タッチで再生/停止をしたい

サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的にcontrolsで再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。

そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。

https://qiita.com/ryo2132/items/bac787725c983d0e3f4b https://qiita.com/ryo2132/items/bac787725c983d0e3f4b

ソース例

HTML

<div class="video-wrap">
        <source src="test.mp4" type="video/mp4" />
        <img src="test-movie.jpg" />
        </video>
        <div class="video-btn" id="video-btn"></div>
</div>

CSS

.video-wrap {
    position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px; /*コントローラー分下部に余白を*/
    cursor: pointer;
    z-index: 2; /*ボタンが前面になるようにする*/
}

Javascript

const video = document.querySelector('#video');
const video_btn = document.querySelector('#video-btn');
let is_playing = false;

video_btn.addEventListener('click', () => {
    if (!is_playing) {
        video.play();
        is_playing = true;
    } else {
        video.pause();
        is_playing = false;
    }      
});

【Windows】うっかりシャットダウンを防止！ボタンを非表示にする2つの方法

Sun, 07 Feb 2021 20:54:00 +0900

リモートデスクトップでうっかりシャットダウンしてしまった

仕事上、仮想サーバーやNAS、バーチャルマシンのクライアントなどのトラブル対応やメンテナンスをしているのですが、先日、うっかりして電源を落としてはいけないサーバをシャットダウンして帰宅してしまいました。翌日になって『業務用のアプリケーションを起動したらサーバエラーが出て使えない』と相談されて初めて自分のミスに気づきました。

リモートデスクトップやVNCなど、自分のモニターにはいくつも遠隔操作中の画面が出ていて、自分の注意が足らなかったのが原因ですが、どれも同じ壁紙だし、画面を最大にしていたこともあり、自分のデスクトップPCと勘違いしてミスしてしまったんだと思います。

シャットダウン・再起動のボタンを非表示にする！

うっかりを防止するため、スタートメニューにあるシャットダウンボタンを非表示にする方法を再発防止として適用しました。シャットダウンボタンを非表示にすると再起動とスリープも非表示になります。スタートメニュー以外に、Windowsボタンの右クリックメニューや、ロック画面などにある電源ボタンや電源オプションメニューも非表示になります。

Windows10、Windows Server 2016を対象に試しましたが、他のWindowsのバージョンでも使えると思います。

スタートメニューの電源ボタン

Windowsマークの右クリックメニューの電源オプションメニュー

Ctrl + Alt + Del 押下時のメニューでの電源ボタン

ロック画面の電源ボタン

グループポリシーで設定する方法

Windows10 Home にはローカルグループポリシーエディターがないため、ここでのやり方はWindows10 ProとWindows Server 2016が対象です。Windows10 Homeの場合は後述のレジストリで設定する方法で行ってください。

まずは『ローカルグループポリシーエディター』を起動

Windows + R でgpedit.mscと入力するか、

検索窓でグループポリシーと検索し、ローカルグループポリシエディターを起動します。

グループポリシーを編集

ローカルグループポリシーエディターで以下の項目を**『有効』**に変更すればOKです。

現在のサインインユーザーのみ対象とする場合

[ユーザーの構成]-[管理用テンプレート]-[タスクバーと[スタート]メニュー]-[シャットダウン、再起動、スリープ、休止コマンドを削除してアクセスできないようにする]

[

**「有効」**に変更したら[OK]を押して閉じる

[

全てのユーザーを対象とする場合

[コンピューターの構成]-[管理用テンプレート]-[タスクバーと[スタート]メニュー]-[シャットダウン、再起動、スリープ、休止コマンドを削除してアクセスできないようにする]

を開いて、上記と同じように**「有効」**に変更したら[OK]を押して閉じます。

※こちらはWindows10やWindows Server 2016でもバージョンによっては項目が存在していない場合があります。

[

『ユーザーの構成』と『コンピューターの構成』の違い

上記二つを設定の違いで電源ボタンの表示の挙動が以下のように異なります。両方とも有効にした場合は『コンピューターの構成』の方が優先されているようです。

   
  ユーザーの構成
  コンピューターの構成




  スタートメニュー
  非表示
  非表示


  Windows + X またはWindowsマーク右クリックメニュー
  非表示
  非表示


  Ctrl + Alt + Del 押下時のメニュー
  非表示
  非表示


  ロック画面
  非表示
  表示

レジストリで設定する方法

以下のレジストリの値のデータを1にすることで、シャットダウンボタンを非表示にできます。値のデータを0にすれば表示を戻せます。デフォルト値は0です。

Windows10 Home の場合、こちらのやり方は有効です。

現在のサインインユーザーのみ対象とする場合

  キー
  HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer


  値の名前
  NoClose


  タイプ
  REG_DWORD


  値のデータ
  1

このレジストリを登録するコマンドコマンドプロンプト（管理者として実行）で以下のコマンドを実行すれば簡単にレジストリを変更できます。

reg add HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer /v NoClose /t REG_DWORD /d 1 /f

削除したい場合

reg delete HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer /v /f

全てのユーザーを対象とする場合

  キー
  HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer


  値の名前
  NoClose


  タイプ
  REG_DWORD


  値のデータ
  1

このレジストリを登録するコマンドコマンドプロンプト（管理者として実行）で以下のコマンドを実行すれば簡単にレジストリを変更できます。

reg add HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer /v HidePowerOptions /t REG_DWORD /d 1 /f

削除したい場合

reg delete HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer /v HidePowerOptions /f

ログオンスクリーン（ロック画面）のみボタンを非表示にしたいとき

ちなみにログオンスクリーン（ログオン前の画面）のボタンの非表示は以下のレジストリとなります。

  キー
  HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System


  値の名前
  HidePowerOptions


  タイプ
  REG_DWORD


  値のデータ
  1

このレジストリを登録するコマンドコマンドプロンプト（管理者として実行）で以下のコマンドを実行すれば簡単にレジストリを変更できます。

reg add HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System /v shutdownwithoutlogon /t REG_DWORD /d 0 /f

削除したい場合

reg delete HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System /v /f

参考ページ

https://admx.help/?Category=Windows_10_2016&Policy=Microsoft.Policies.StartMenu::HidePowerOptions&Language=ja-jp https://admx.help/?Category=Windows_10_2016&Policy=Microsoft.Policies.StartMenu::HidePowerOptions&Language=ja-jp

https://admx.help/?Category=Windows_10_2016&Policy=Microsoft.Policies.StartMenu::NoClose&Language=ja-jp https://admx.help/?Category=Windows_10_2016&Policy=Microsoft.Policies.StartMenu::NoClose&Language=ja-jp

ボタン非表示後のシャットダウン・再起動方法

コマンドプロンプトからシャットダウン・再起動する方法

電源ボタンが非表示になってもコマンドプロンプトからshutdownコマンドでシャットダウンと再起動ができます。

シャットダウンするコマンド

1分後にシャットダウン

shutdown /s

即シャットダウン 0ミリ秒待ってシャットダウン。1分待つ場合は60000ミリ秒を指定する。

shutdown /s /t 0

再起動するコマンド

1分後に再起動

shutdown /r

即再起動 0ミリ秒待って再起動。1分待つ場合は60000ミリ秒を指定する。

shutdown /r /t 0

タスクマネーシャーから再起動する方法

タスクマネージャーを起動

タスクバーで右クリックするとメニューが出てくるので、『タスクマネージャー』をクリックします。

または、Ctrl + Alt + Del 押下時のメニューから『タスクマネージャー』を選択し、エクスプローラを右クリックするとメニューに**『再起動』**があります。エクスプローラの画面が一つでも起ちあがっていれば、同様の画面が表示されるはずです。シャットダウンはできません。

複数のSNSボタンのJavascriptをスッキリまとめて高速化

Mon, 12 Mar 2018 21:03:38 +0900

Facebool、Twitter、Google+、はてなブックマーク、Pocket、LINEなどのSNSボタンをページに設置する際、SNSそれぞれのJavascriptコードが必要ですが、複数あるのでページのソースがごちゃごちゃになります。

それを簡潔なjavascriptコードでコンパクトにする方法を見つけたのでメモ。

コードをまとめることによって重複コードがなくなり、ソースの文字数が減るのでページ表示の高速化になるかと思います。

まとめた場合のコード

コードはページのどこに書いてもいいのですが、の直前に書くほうがページ表示の高速化につながります。

<script type="text/javascript">
	(function(w,d){
		w.___gcfg={lang:"ja"};
		var s,e = d.getElementsByTagName("script")[0],
		a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
		s.src=u;s.async=true;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
		a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
		a("//platform.twitter.com/widgets.js","twitter-wjs");
		a("https://apis.google.com/js/plusone.js");
		a("//b.st-hatena.com/js/bookmark_button.js");
		a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
		a("//media.line.me/js/line-button.js?v=20140411");
	})(this, document);
</script>

GoogleAnalyticsも含める場合

<script type="text/javascript">
	(function (w, d) {
		w._gaq = [["_setAccount", "UA-xxxxxxx-x"],["_trackPageview"]];
		w.___gcfg = {lang: "ja"};
		var s, e = d.getElementsByTagName("script")[0],
		a = function (u, i) {
			if (!d.getElementById(i)) {
				s = d.createElement("script");
				s.src = u;
				s.async = 1;
				if (i) {s.id = i;}
				e.parentNode.insertBefore(s, e);
			}
	};
	//GoogleAnalytics
	a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
	//Facebook
	a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
	//Twitter
	a("//platform.twitter.com/widgets.js","twitter-wjs");
	//GooglePlus
	a("https://apis.google.com/js/platform.js");
	//Hatena
	a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
	//Pocket
	a("https://widgets.getpocket.com/v1/j/btn.js");
	//LINE
	a("//media.line.me/js/line-button.js?v=20140411");})(this,document);</script>

SNSボタンの表示部分

ソーシャルボタンを表示したい部分に書きます。だけは直下が望ましいです。

<div id="fb-root"></div>
<ul>
	<li><div class="fb-like" expr:data-href="data:blog.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/></div></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count='vertical'>Tweet</a></li>
   <li><div class="g-plusone" data-size="tall" data-href="ページのURL" ></div></li>   <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="ページのタイトル" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
	<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="ページのURL"></a></li>
	<li><span><div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja"></div>
		<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script></span></li>
</ul>

参考ページ

https://log-file.net/wordpress/speedup-1190 https://log-file.net/wordpress/speedup-1190

http://requlog.com/self-branding/wordpress/facebook-fast-display/ http://requlog.com/self-branding/wordpress/facebook-fast-display/

http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/ http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/