はてなブックマーク

Windows10を操作しているとタスクバーに☓マークが表示され「IMEが無効です」と出る事があります。 キャプチャ画像ですが、以下のような状態になります。 タスクバーでIMEが無効ですと出る理由タスクバーで「IMEが無効です」と出る原因というか理由があります。 アクティブになっているアプリケーションが入力を許可していない設定になっている場合、IMEのアイコンは☓マークになり、カーソルを合わせると「IMEが無効です」と表示されます。 この場合、左クリックや右クリックメニューなども機能しない状態となっています。 この状態になるアプリケーションは、一般的なものですと主に以下のものが上げられます。 Windowsの設定切り取り＆スケッチ同様にテキストを入力する機能を持っていないアプリケーションでもIMEのアイコンは表示されるものが殆どです。 テキストを入力する機能を持っていないアプリケーションで

Microsoft Edgeでテキストを選択して、右クリックからの検索をGoogle検索に変更する方法です。 Chromium版のMicrosoft Edgeでは、テキスト選択&右クリックのコンテキストメニューに表示される検索方法は「Webで検索」と「サイドバーで検索」の2種類がデフォルトで用意されています。 Web検索をGoogleに変更するテキスト選択&右クリックからのWeb検索は、アドレスバーでの検索と同じになりますので、アドレスバーでの検索をGoogleに変更することが可能です。 ここでは、アドレスバーでの検索をGoogle検索に切り替える方法を紹介しています。 アドレスバーでの検索で利用する検索エンジンを切り替えるには、「設定」の「プライバシー、検索、サービス」の項目にある「アドレスバーと検索」を選択します。 アドレスバーと検索を選択する「アドレスバーで使用する検索エンジン」のセ

ブラウザを閉じた時に閲覧履歴をクリアする設定Chromium版Edgeでは、設定からブラウザを閉じた時に閲覧履歴データをクリアするようにする事が可能です。 多くの場合、この設定のみで目的は達成されるのではないでしょうか。 「設定」の「プライバシー、検索、サービス」メニューから「閉じるときに閲覧データをクリアする」にアクセスします。 閉じるときに閲覧データをクリアするにアクセスしますブラウザを閉じる際に破棄するデータの種類がリストされていますので、閲覧の履歴のチェックボックスをオンにします。 閲覧の履歴のチェックボックスをオンにするこれでEdgeブラウザを閉じた際に、閲覧履歴は削除されるようになります。 また、この操作はプロファイル（ユーザー）毎での設定になります。 閲覧履歴を残さないようにするこちらはローカルに保存されている閲覧履歴データファイルを読み取り専用にすることで、そもそもの閲覧履

chromium版のMicrosoft Edgeでの各ユーザーデータファイルの保存場所まとめです。 デフォルト（Default）のユーザーデータは以下の場所にあります。 C:\Users\ユーザー名\AppData\Local\Microsoft\Edge\User Data\Default\ また、プロファイル別のユーザーデータは以下の場所にあります。 C:\Users\ユーザー名\AppData\Local\Microsoft\Edge\User Data\プロファイル名\ エクスプローラーに直接貼り付けて移動できます。 お気に入り（Bookmarks）お気に入りデータを保存しているファイル。 C:\Users\ユーザー名\AppData\Local\Microsoft\Edge\User Data\Default\Bookmarks C:\Users\ユーザー名\AppData\Lo

この方法は2020年末にMicrosoft Edge Canaryに実装された試験段階の機能です。 その為、通常版に追加されるものとは、設定の場所や項目が違っている可能性があります。 通常版のMicrosoft Edgeへは2021年中に追加されるものと思われます。 複数のタブを閉じる前に確認する※画像Microsoft Edge Insider プレビュービルド版のものです ブラウザを閉じる時に確認するようにするには「設定」の「外観」メニューにある「複数のタブを閉じる前に確認する」のチェックボックスをオンにします。 複数のタブを閉じる前に確認するブラウザを閉じて確認ダイアログが表示されるかテストします。 ブラウザを閉じる際に「すべてのタブを閉じますか？」と確認ダイアログが表示されます。 すべてのタブを閉じますか？と確認が表示されるこのブラウザを閉じるかどうか確認ダイアログが表示される条件

Microsoft Edgeで開いているリンクを常に新しいタブで開く方法について紹介しています。 Edgeの「設定」からデフォルトでリンクを新しいタブで開くようにする機能はVersion 88.0.705.68現在はいまのところありません。 これを実装したい場合はChromeと同じように拡張機能を利用します。 「リンクを常に新しいタブで開く」事ができるようになる拡張機能は以下のものが見つかりました。 リンクを新しいタブで開く基本操作「リンクを新しいタブで開く」は主に3つの方法があります。 Ctrl + 左クリック右クリックのコンテキストメニューから「新しいタブで開く」を選択マウスの中央ボタンクリック殆どの場合、これらの方法で十分だと思われますが、マウスに中央ボタンがなく、より手順を減らしたい場合に拡張機能を使って「左クリックで新規タブを開く」を可能にします。 Long Press New

MoUsoCoreWorker.exeは、WindowsUpdateに関連するwuauclt.exeの代替ファイルで、バックグラウンドでWindowsアップデートの更新をチェックを実行しています。 「MoUSO Core Worker Process」のUSOはUpdateSession Orchestratorの略でGoogle翻訳では「セッションオーケストレーターのコアワーカープロセスを更新する」となりました。 また、設定からWindows Updateの「更新の確認」を実行すると、このプロセスが起動します。 当方では、タスクマネージャーにてMoUsoCoreWorker.exeがCPU使用率の上昇・メモリを消費している事を確認した事はありません。 この実行アプリケーションの製品名は「Microsoft Windows Operating System」です。MoUsoCoreWork

Windows10の操作で「HomeかProか」「正規のWindowsかどうか」など知りたい場合に、かパソコンにインストールされているWindowsのエディションを確認する方法の紹介です。 コントロールパネル、設定、システム情報アプリ、コマンドのシステム情報などの方法を記載しています。 搭載CPUやWindowsエディションの確認方法は、家電量販店など安心して購入できる場合にはあまり必要ありませんが、怪しい中古PC販売会でなど、手早く確認したい場合に覚えておくと便利ですね。 コントロールパネルでWindowsエディションを確認する※最新のWindows10ではコントロールパネルの「システム」情報はWindows10の「設定」ー「システム」ー「詳細情報」に統合されています。 パソコンにインストールされているWindowsエディションの確認する方法のひとつとして、コントロールパネルの「システム

CSSだけで画像にモザイク処理を施すデザイン方法の紹介です。 CSSでモザイクというと、単純なぼかし処理というイメージですが、今回はブロック型のモザイクというのか方眼型のモザイクというのか、はたまたピクセルモザイクなのか、タイル調モザイクかマス目モザイクなのか、全くわかりませんでしたので検索してみました。 そのタイプのぼかし処理は英語では「pixelization」、日本語では「ピクセル化」。 または、そのまま「モザイク」という言葉がそれを指すようです。 それをCSSだけでの実装を紹介してくれているサイトさんが見つからなかったので、CSSだけでは できそうでできないのか、以前気になっていたのですが、これは以外に簡単にできました。 ※画像ファイルはそのままですので、セキュリティ面やプライバシー保護を目的の利用には全く使えませんのでご注意下さい 画像にモザイク処理を施す（ピクセル化）CSSだけ

CSSでborderが伸縮させるアニメーションのパターンサンプル集です。 このページでは、テキストの下線として表示するborderとして紹介していますが、ボーダーのみの要素作成などの場合も基本は同じですので応用はしやすいかと思います。 また、幅と高さ、背景色を利用して要素そのものをボーダーとして表現する方法などもありますが、このページでは紹介していません。 borderの長さを調節する基本borderプロパティは、borderを指定した要素のwidthがその長さとなります。 例えば、displayプロパティがblockなどの要素では100％となり、displayプロパティがinlineの要素では他の要素がない限り0pxとなり表示されません。 borderの為に要素のwidthを可変すると、テキストなどの他の要素の表示領域にも影響するため、0または短い横幅を指定すると表示できなくなってしまい

CSSで要素や画像、テキストをふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。 See the Pen CSS | Text in a circle by yochans (@yochans) on CodePen. ふわふわ・ゆらゆらさせるCSSアニメーションHTML要素をふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。 今回はひとつのdiv要素とpタグのテキストを使ってみました。 <div id="container"> <div class="circle"></div> <p class="text">FUWAYURA</p> </div>#container { position: relative; height: 200px; margin: 20px; } .circle { position: absolute; left: 20px; top: 0;

CSSだけで作る波紋が広がる演出のアニメーションサンプルです。 複数の波紋アニメーションを同時に出現させるサンプルなども紹介しています。 波紋アニメーションSee the Pen CSS | balloons animation by yochans (@yochans) on CodePen. HTMLはripplesの中のdivタグが波紋となります。 入れ子にしているのは、複数の波紋を追加する予定のためですのでひとつで良い場合は入れ子にする必要はありません。 <div id="container"> <div class="ripples"> <div></div> </div> </div>コンテナ部分、風船を範囲より下に配置して、範囲より上に移動させてますので、「overflow: hidden」で範囲外を非表示にしています。 #container { position: rela

CSSを使って一定間隔でぷるぷるっと震えるアニメーションのサンプルコードです。 See the Pen CSS | wobbling animation by yochans (@yochans) on CodePen. サンプルでは円のHTML要素を作成して、一定間隔でぷるぷると震わせるようなアニメーションを書いています。 <div class="circle"></div>.circle { width: 80px; height: 80px; background: #7fffbf; border-radius: 50%; animation: purupuru_anim 1s infinite alternate; } .circle { width: 80px; height: 80px; background: #7fffbf; border-radius: 50%; anim

Googleフォントを選択するBrowse Fontsから、利用するGoogleフォントを選択します。 「language」から「Japanese」を選択する事で日本語に対応したフォントを絞り込む事も可能です。 「Styles」の項目にある「Select this style」を選択します。 右側に選択中のフォントファミリーのメニューが表示されますので「Use on the web」から「<link>」または「＠import」をコピー。 CSSのFont-familyのコードもコピーして利用します。 GoogleフォントのセットアップBrowse Fontsで「<link>」または「＠import」からコピーしたコードを使ってGoogleフォントをセットアップします。 HTMLでセットアップする場合HTMLでは<link>タグと同時にDNSルックアップを実行する<link rel="pre

日本語に対応しているGoogleフォントの表示サンプル一覧です。 フォント別に@importと、フォントファミリー指定のCSSも紹介しています。 最終更新日 2021/2/4 See the Pen CSS | How to use Google fonts by yochans (@yochans) on CodePen. Yusei MagicYusei Magic – Google Fonts @import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap'); .Yusei-Magic { font-family: 'Yusei Magic', sans-serif; }Noto Sans JPNoto Sans JP – Google Fonts @import url('https:/

CSSでいくつもの風船をふわふわ・ゆらゆらさながら舞い上がらせるCSSアニメーションサンプルです。 See the Pen CSS | wobbling animation by yochans (@yochans) on CodePen. HTMLはballoonsの中のdivタグがひとつの風船です。 今回は20個の風船を作成しています。 <div id="container"> <div class="balloons"> <div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div> <div></div><div>

JavaScriptのtoFixed()を利用して小数点以下の桁を指定して数値を丸める方法のサンプルコードです。 少数点以下の桁を指定して丸めるtoFixed()は取得する小数点以下の桁数を引数に指定します。 指定可能な桁数の最小値は0、最大値は20です。 小数点以下2桁（位）で丸めた結果を取得する場合は2を指定します。 let number = 1.2345; let new_number = number.toFixed(2); //new_number = 1.23toFixed()は、対象の変数に変更を加えず、返り値として処理結果を返します。 また、桁数以外のオプション指定はありません。 切り上げと切り捨てtoFixed()は指定した桁数以下の数値によって切り上げ切り捨てが実行されます。 一般的な四捨五入と同等の処理で、この処理は続く数値がないケースでは0として扱われ切り捨てられま

JavaScriptでHTML要素にclassが指定されているか確認するサンプルコードです。 See the Pen JavaScript | Check if the element has a class by yochans (@yochans) on CodePen. <div id="id" class="abc ccc"></div>let target = document.querySelector("#id"); if(target.classList.length > 0){ //classがひとつ以上指定されています }else{ //classが指定されていません }「classList.length」で指定されているclassの数を取得して、0かそれ以上あるかどうかで判別しています。

CSSでテキストエリアのサイズ変更を不可にするサンプルコードです。 See the Pen CSS | Disable resizing of textarea by yochans (@yochans) on CodePen. テキストエリアのサイズ変更を不可にするテキストエリアのサイズを変更不可にするサンプルコードです。 CSSでテキストエリアのサイズ変更を不可にするには対象の要素に「resize: none」を指定します。 <textarea name="" rows="5" cols="60"></textarea>textarea { resize: none; }

テキストエリアを入力されている文章の行数に応じて自動で拡縮（サイズを広げる、またさ縮める）させる実装サンプルです。 See the Pen JavaScript | Create a random string by yochans (@yochans) on CodePen. テキストエリアを文章の行数に応じて拡縮するテキストエリアを文章の行数に応じて拡縮させるJavaScriptのサンプルコードです。 サンプルではテキストエリアに対してidでの指定は行っていませんので、ページ内またはサイト内に複数のテキストエリアがある場合は、idやclassを指定して実装して下さい。 <textarea name="" rows="4" cols="40"></textarea>//textarea const textarea = document.querySelector('textarea')

HTML5のaudioをJavaScriptで制御して音声ファイルを再生する方法の動作サンプルとサンプルコードです。 See the Pen JavaScript | Play an audio file by yochans (@yochans) on CodePen. 音声ファイルを再生する方法HTML5のaudioをJavaScriptで制御して音声ファイルを再生するサンプルコードです。 現在、多くのブラウザでaudio機能はユーザーのアクションなく自動で再生する事は不可能となっています。 サンプルでは再生ボタンを用意してaddEventListenerで作成したクリックイベントを取得、音声ファイルを再生しています。 <button class="btns" id="play-btn">play</button>//play button const play_btn = docum

JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。 このページではquerySelectorAll()を利用した方法を紹介しています。 See the Pen JavaScript | get child elements by yochans (@yochans) on CodePen. 共通HTMLと簡単な説明サンプルコードで利用している共通のHTMLです。 親要素のdivタグの中に、2つのdivタグ、2つのpタグを作成しています。 <div id="parent"> <div id="child_01"></div> <div id="child_02"></div> <p id="child_03" class="abc"></p> <p id="child_04" class="abc"></p> </div>サンプルにて取得する結果は全

JavaScriptで文字列がメールアドレスかどうか判別するサンプルコードです。 対象の文字列が正規表現でパターンを調べて、メールアドレスであればtrue、メールアドレスでなければfalseを返します。 '[email protected]' let check = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if ( check.test( address ) ) { console.log(true); } else { console.log(false); }パターン別、処理結果 '[email protected]' //

CSSのborderを利用して作成した虹（レインボー）のデザインです。 See the Pen CSS | Rainbow circle by yochans (@yochans) on CodePen. HTMLには「container」と虹（レインボー）の要素になる「rainbow」、その中に虹のパーツになるdiv要素を7つ入れてあります。 <div id="container"> <div class="rainbow"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> 虹の移動は「.rainbow」の「top」「left」で調節。 大きさは各パーツの「width」「height」の1000pxの部分を変更すれば可

JavaScriptを使ってランダムなHEXカラーコードを生成する方法の紹介です。 See the Pen JavaScript | Randomly generate HEX color code by yochans (@yochans) on CodePen. HEXカラーコードをランダム生成HEXカラーコードをランダム生成するサンプルコードです。 let color = '#'+Math.floor(Math.random()*16777215).toString(16);以下は上記動作サンプルのHTML、JavaScriptコードになります。 <p id="output"></p>サンプルでは、ループ処理で複数のランダムカラーコードを生成しながら<div>要素をHTMLに追加しています。 for (let i = 0; i < 198; i++) { let color = '#

JavaScriptを使ってページの最上部にスクロールするボタンの実装サンプルです。 トップへ戻るボタンはコンテンツ量が多いサイトでモバイル端末からのアクセス時にユーザビリティを上昇させます。 See the Pen JavaScript | Scroll to top button by yochans (@yochans) on CodePen. ページの最上部にスクロールするボタンを設置するサンプルでは設置するボタンにbuttonタグを使用していますが、aタグ、テキストなど自由です。 <button id="scroll-to-top-btn">≫</button>ボタン用のCSS、固定表示はCSS側で実装しています。 transform: rotateでの回転は「≫」を上向きにしているだけですので、別の文字や記号、アイコンを利用する場合は不要です。 #scroll-to-top-b

JavaScriptのDateオブジェクトから月をフルスペルの英単語で取得する方法のサンプルコードです。 See the Pen JavaScript | Get the moon in full spelled english by yochans (@yochans) on CodePen. Dateから月をフルスペルの英単語で取得月の配列を用意してgetMonth()で得られる0～11の値をキー名にして取得するサンプルコードです。 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; let day = new Date(); let month_name = m

JavaScriptで最初の英文字を大文字に変換する方法の紹介です。 See the Pen JavaScript | Uppercase the first letter by yochans (@yochans) on CodePen. 最初の英文字を大文字に変換charAt()で文字の位置を指定、toUpperCase()で大文字に変換、残りの文字を接続して最初の英文字を大文字に変換した文字列を作成しています。 str.charAt(0).toUpperCase() + str.slice(1);実装サンプルは以下のようになります。 let str = `apple`; str = str.charAt(0).toUpperCase() + str.slice(1); console.log(str); //Apple最初の英文字を大文字に変換（配列）配列内にある英単語の最初の一文字