1 NOTES

JavaScriptで文字列を一文字単位でランダムに並び替える、シャッフルする方法を紹介しています。

JavaScriptにはshuffle関数はないので、用途に合わせてコードを書くか、配列やオブジェクトのランダムな並び替 ...

CSSのtext-shadowプロパティを使ってテキストが背景から少し浮かび上がっているように見せるシンプルなサンプルを紹介しています。

テキストを浮かせる

text-shadowプロパティを利用した単純な方法でテキストを浮 ...

CSSのみでテキストをマウスホバーで違うテキストに差し替える（置き換える）簡単な方法を紹介しています。

マウスホバーでテキストを差し替える

要素内にあるテキストをマウスホバー時に別のテキストに置き換える方法とそのサンプルコー ...

CSSのグラデーション機能、repeating-linear-gradient()プロパティを使って簡単なストライプ柄の作り方を紹介しています。

ストライプ柄やグラデーション、水玉くらいですとCSSで簡単に作成・編集できま ...

CSSで画像をそのサイズに関係なく親要素内の縦横中央に配置する簡単な指定方法です。

紹介しているのはdisplay: flexとalign-items、justify-contentを使う方法、position: abso ...

CSSで画像に（疑似）透過グラデーションをかける方法を紹介しています。

※透過グラデーションと表記していますが、背景色と同色に透過色のグラデーションを画像の上からかけているだけで画像そのものを透過表示しているわけではありま ...

マウスホバー時のスタイル適用が指定できる擬似クラス「:hover」でホバー時の対象に子要素や親要素を指定する方法とサンプルコードを紹介しています。

:hoverで子要素を指定する

:hoverで子要素を指定する実装サンプルと ...

CSSで画像に一昔前の写真のような枠、縁取りをつける方法を紹介しています。

写真のような枠、縁取りをつける方法

写真のような枠、縁取りをつけた表示サンプルとHTML/CSSのサンプルコードです。

See the ...

CSSを使ってウスホバー時にテキストでふわっと表示させる簡単な方法を紹介しています。

マウスホバーでテキストをふわっと表示

See the Pen
CSS | Gradation Text by yochans (@ ...

CSSの疑似要素とbox-shadowを使って画像と背景の境界となる画像の縁（ふち）周りをぼかやかす方法を紹介しています。

画像の縁をぼかす方法

疑似要素の::before または ::afterとbox-shadowを使っ ...

Bluestacksのキーマッピング・マクロ機能を使って起動したゲーム・アプリケーション上で同じ場所をタップ連打（クリック連打）させるスクリプトを紹介しています。

細かい設定や動作であれば外部ツールを使っても良いと思います ...

Bluestacksで高パフォーマンスゲームなどのアプリケーションを実行中、処理が重い、高負荷になっている時に設定でCPUやグラッフィクスの負荷を削減する方法を紹介しています。

処理や動作が遅くならないまでも、高パフォーマ ...

AndroidアプリをPC上でダウンロード、実行可能にするエミュレータ系プラットフォームソフトとして人気の「Bluestacks」。

現在はWindows版のみのリリースです。（Mac版も準備中）

現在ダウンロ ...

JavaScriptを使って2点の座標の角度を計算して取得する方法を紹介しています。

2点の座標から角度を計算する方法

2点の座標から角度を計算する方法の簡単なサンプルコードです。

A点を原点としたB点への角度を ...

JavaScriptを使って2点の座標から距離を計算して取得する方法とサンプルコードを紹介しています。

2点の座標から距離を計算する方法

2点の座標から距離を計算する方法になります。
Math.sqrt()関数は指定 ...

CSSでlinear-gradient()やrepeating-linear-gradient()を使ってテキストの色にグラデーションをかける方法を紹介しています。

See the Pen
CSS | Respon ...

CSSだけでテキストのフォントサイズをレスポンシブに対応して可変させる方法を紹介しています。

テキストをレスポンシブに対応する方法

テキストにVWを指定してレスポンシブに対応する動作サンプルとサンプルコードです。

CSSのborder-radiusプロパティを利用して画像を角丸や円形に表示する方法とシンプルなサンプルコードを紹介しています。

See the Pen
CSS | Overlap Images by yochan ...

CSSのpositionプロパティを利用して画像を重ねて表示する方法とシンプルなサンプルコードを紹介しています。

positionプロパティで像を重ねて表示する方法

2枚の画像、または複数の画像を重ねて表示する簡単な方法とし ...

JavaScriptのtoLocaleString()メゾッドを使って、数値を3桁のカンマ区切りの文字列に変換する方法を紹介しています。

数値を3桁のカンマ区切りにする手段は多数ありますが、toLocaleString() ...

JavaScriptを使った計算式でラジアンを角度、角度をラジアンに変換する方法を紹介しています。

ライブラリやフレームワークによってはラジアン単位が必要だったり、独自関数でラジアン単位でしか取得できないケースがあるため、 ...

JavaScriptのrepeat()メゾッドを利用して指定した文字または文字列を指定回数で繰り返した文字列を生成する方法を紹介しています。

例えば、評価に使う星マーク★を評価数分繰り返した文字列を得たい場合など、for文 ...

JavaScriptのfor of文を使ってオブジェクト（連想配列）の繰り返し処理中にキー名も取得する方法を紹介しています。

for of文でオブジェクトのキー名も取得する方法

for of文の中でキー名と値をセットで取得す ...

Google Chromeを使っていてテキストの一部を矩形（くけい）選択してコピーしたい事があると思います。

数値部分のみを表計算ソフトに移したかったり、商品名のリストのみを取得したかったり、用途は様々ですが、WEBでの矩 ...

Windows10パソコンにてWindows11のシステム要件になっているTPM 2.0、あるいは1.2に対応しているかどうか、そのバージョン、オンオフの状態を簡単に確認する方法を紹介しています。

TPM（トラステッド プ ...

Windows10やWindows11を利用しているとサインイン画面でサインイン後の状態から進まない、遅い場合があります。

状況によってはフリーズしているのではなく、相当な時間を必要とするケースがありますので、しばらく待っ ...

Windows10、Windows11パソコンにIPoE方式、IPv6の接続・IPアドレスを確認する方法を紹介しています。

IPv6の接続状況は例えば、新しく光回線を契約した場合や、ルーターを新調した際に確認する事が多いと ...

楽天ひかりの開通工事が無事完了しました。

後々にルーターの場所を気楽に移動できるように光ファイバーを長めにとって頂きましたが、モデム・ルーター間がLANケーブルでしたので、良く考えたら不要だった・・

ルーターの ...

コミュファ光の解約手続きが完了しました。

コミュファ光は解約時に結構な費用が必要なのは有名ですが、当方の環境では計35,200円となりました。

内訳は

ステップ割 期間外解除手数料 5,500円

Windows OSで再起動時にセーフモードで起動してしまうようになってしまいました。

今回の原因はデバイス、ディスプレイアダプター（グラフィックスボード）のドライバーを無効にしていたからで、再度有効にする事でディスプレイ ...

Windows10パソコンでグラフィックボードまたはそのドライバーで破損が生じているログの前後にWindowsHelloFaceSoftwareDriver（Driver/WudfRd）を読み込めませんでした、という警告ログが発生して ...

Windows10でキーボードのみで実行可能なシャットダウンと再起動のショートカットキーを紹介しています。

この方法はWindows OSが完全にフリーズしている場合には利用できません

Windows10が起動 ...

Windows10を使っていて画面が一瞬黒くなる現象が発生、終いには画面が表示されたままか黒い画面の状態でフリーズを起こすようになりました。

再起動後、Windowsのイベントビューアーで確認したところ、原因はグラフィック ...

JavaScriptで表示中のサイトのページサイトをフルスクリーンモードに切り替える方法を紹介しています。

以下は動作サンプルになります。

「Request Full Screen」ボタンでページをフルスクリー ...

JavaScriptでリストで取得しているHTML要素にidを連番振りする方法を紹介しています。

HTML要素にidを連番振りする

HTML要素にidを連番振りするJavaScriptのサンプルコードになります。

JavaScriptで指定したHTML要素の中にある子要素の数を取得する方法を紹介しています。

サンプルHTMLにはid名を付けたulタグに3つのliタグを作成しています。

<ul id="target">&l ...

JavaScriptでfilter()メゾッドをショートハンドで記述する方法を紹介しています。

filter()は配列から条件を満たした値で新しい配列を生成する事ができる便利な関数です。

filter()を使ったショ ...

複数の変数をショートハンドを使って同時に宣言するサンプルコードを紹介しています。

変数の数が多い場合はまとめて宣言しておくとコード量を抑えられます。

複数の変数名をショートハンドで宣言する

値を用意せず変数名のみ ...

ifのショートハンドのサンプル

if文をショートハンドにしたサンプルコードを紹介しています。

ロングハンド

通常のif文のJavaScriptコードです。

let item = truelet valif (item) ...

JavaScriptで文字列型（String）と数値型（Number）が混在する配列からそれぞれ切り分けた配列を取得する方法です。

filter()メソッドとtypeof演算子を使って配列から文字列型（String）と数値 ...