HTML

HTMLで右→左のスライダ（input type=”range”）を作成

やりたいことHTMLでは以下のように記載することで簡単にスライダを作成できます。<input type="range">ただしこのスライダは左→右固定です。（左が小さい値で、右が大きい値。）しかしUXの関係でどうしても右→左にしたいことがあります。この記事では簡単に右→左にする方法を紹介します。実装実装は以下のようにscale:-1を設定するだけです。これにより右→左になります。見た目だけでなく右側が最小の値になり、左側が最大の値になります。<input type="range" style="scale:-1">実行例：結果右→左のスライダーを作成することができました。
2025.05.15
HTML
HTML

HTMLでいろいろ中央ぞろえ

やりたいことHTMLでよく使って簡単そうなのに何気に難しい中央ぞろえの方法をまとめます。前準備まずは中央ぞろえしたいタグが何者かを確認します。だいたい以下の２個のうちどちらかだと思います・どちらかのタグを中央ぞろえするかにより実装方法が異なります。コンテンツテキストや画像などブロック複数のコンテンツを含む領域例：divなどで宣言される例にタグを挙げていますが、displayスタイルで変更が可能です。そのためdivだったら必ずblockというわけではありません。実装コンテンツ横方向親のタグにtext-align:centerのスタイルを指定します。下の例のようにspanやimgに設定するのではな...
2025.05.15
HTML
Windows

[PowerShell]ファイルリストをJSONファイルで取得

やりたいことWindows上のサブフォルダ内を含めてファイルをJSON形式でファイルに保存します。実現方法PS1ファイルの作成file_list.ps1ファイルを作成し、以下の内容を貼り付け保存します。$targetPathと$outputPathの値は環境に合わせて変更してください。$targetPath = "ファイルリストを作成するフォルダ"$outputPath = "出力ファイル"Get-ChildItem -Path $targetPath -Recurse -File | Select-Object Name, FullName | ConvertTo-Json |Out-Fil...
2025.05.14
Windows
Vite

Viteでローカル以外からアクセスできるコマンドを作成

やりたいことViteで作成したプロジェクトで以下コマンドを実行して、Severを起動するとローカルPCからはブラウザなどからアクセスできます。npm run dev出力： ➜ Local: ➜ Network: use --host to expose ➜ press h + enter to show helpしかし他のPCからはアクセスすることはできません。この記事ではローカルでの試験向けのnpm run devコマンドを保持しつつ、他のPCからもアクセスできる方法を用意する手順を紹介します。解決策他PCからのアクセスを許可まずは他PCからのアクセスを許可を試します。Viteで作成したプロ...
2025.05.14
Vite
JavaScript

[JavaScript]フルパスから親フォルダの名前を取得する

やりたいことJavaScriptでフルパスから親フォルダの名前を取得します。URL、ファイルパス共に有効です。探したところ、rootから親フォルダまでのパスを返すものはあったのですが、親フォルダのみを返却するものはなかったので共有します。例C:¥¥a\b\c\file.txt -> c -> b実装実装は以下のようになります。/と￥で入力を分割し、最後から二つ目の文字列を返却します。function getParentFolderName(filePath) { const parts = filePath.split(/[\\/]/); if (parts.length > 1) { ret...
2025.05.14
JavaScript
JavaScript

[JavaScript][Unarchiver.js]サーバーからZip/RARの中身を取得する

やりたいことjavascriptでサーバー上のZip/RARファイルの中身のファイルををローカルに保存せずに取得します。大まからな流れは以下のようになります。（ローカルにファイルは保存しません）　使用するライブラリはzip/rar以外にもtar,gz,xz, bz2にも対応しているようですが動作未確認です。サーバーからZip/RARファイルを取得(fetch)zip/RARファイルから中のファイルを取得（画像ファイルを表示）NodeJSを使用しています。(試験環境のために使用しているので必須ではないです。)下の記事ではzip.jsを使用してzipファイルの中身を参照する方法を紹介しています。こ...
2025.05.13
JavaScript
JavaScript

[JavaScript][zip.js]サーバーからZipの中身を取得する

やりたいことjavascriptでサーバー上のZipファイルの中身のファイルををローカルに保存せずに取得します。大まからな流れは以下のようになります。（ローカルにファイルは保存しません）　サーバーからZipファイルを取得(fetch)zipファイルから中のファイルを取得（画像ファイルを表示）NodeJSを使用しています。(npmと試験環境のために使用しているので必須ではないです。)RAR/ZIPともに対応する方法を以下の記事で紹介しています。しかし下の記事の方法はnpmを使用しないため、パッケージ管理が明確でない可能性があります。zipのみの使用の場合、本記事の方法がおすすめです。環境構築以下...
2025.05.13
JavaScript
HTML

【代替あり】-webkit-text-strokeの動作があやしい（テキストに境界線を描く）

やりたいことHTMLで文字に縁取りを行うには-webkit-text-strokeというStyleが用意されています。（-webkitとついていますが、FireFoxやSafariでも動作するそうです。FireFoxでは動作確認済み。）しかし、実際に使ってみると動作が怪しいので実際の動きの確認と代替案を紹介します。簡単な使用方法基本的な使用方法は以下の通りです。-webkit-text-stroke: 幅 色;例：-webkit-text-stroke: 1px red;動作確認以下のHTMLの動作を見ます。<p style="font-family: system-ui;font-size:...
2025.05.07
HTML
WEB

各種SNSなどのリンク用アイコンのダウンロード元

やりたいことWebページを作成時などにXなどのリンクを張ることが多いです。その際に使用するアイコンや規約の場所をまとめました。リンクXYoutubeFacebookLINEPatreon
2025.04.30
WEB
JavaScript

【有料】Canvasタグに表示されている画像をPHPでサーバに保存する。

やりたいことHTMLのCanvasタグに表示されている画像をPHPでサーバに送信してサーバに保存します。懐かしのお絵描き掲示板の実装などにどうぞ。実装クライアント（Javascript）側Javascript側では以下のように実装します。HTMLにはIDが”test_canvas”のcanvasタグがある前提です。送信先はupload.phpです。const canvas = document.getElementById("test_canvas")let msg_body = { acceptImage: canvas.toDataURL("image/png")}fetch('uploa...
2025.04.29
JavaScript
次のページ