備忘録

備忘録

HTML

HTMLで画像の任意領域にリンクを付加する方法

HTML

Ⅰ. はじめに タイトルの通り「HTMLで画像の任意座標にリンクを付加する方法」です。 Ⅱ. サンプルプログラム index.html <map name="map001"> <area shape="rect" coords="0,0,300,100" href="https://example.com/1" target="_blank" alt="リンク1" /> <area shape="rect" coords="0,100,300,200" href="https://example.com/2" target="_blank" alt="リンク2" /> </map>

Webブラウザでゲームパッドを利用する方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「Webブラウザでゲームパッドを利用する方法」です。 Ⅱ. 手順 1. サンプルプログラムを書く index.html <html> <body> <script src="/script.js"></script> </body> </html> script.js const buttonPressStates = [] const buttons = [ { id: 12, label: 'UP' }, { id: 13, label: 'DOWN' }, {…

Push APIを利用してPush通知をする方法

C# .NET JavaScript HTML

Ⅰ. はじめに Ⅱ. 環境 Ⅲ. 手順 1. VAPIDを生成する 2. クライアント側サンプルプログラムを書く 3. Push通知を送信する為のサンプルプログラムを書く 実行結果 FAQ Q1. 通知されない Q2. C#でVAPIDを生成したい 参考 Ⅰ. はじめに タイトルの通り「Push APIを…

axiosを利用してファイルアップロード進捗を表示する方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「axiosを利用してファイルアップロード進捗を表示する方法」です。 Ⅱ. 手順 1. サンプルファイルを用意する index.html <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <form id="form001"> <input type="file" name="file"> <input type="submit"> </form> <progress id="progress001" value="0" max="100"></progress></body></html>

Webページの特定要素を画像として保存する方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「Webページの特定要素を画像として保存する方法」です。 方法 1. サンプルプログラムを書く index.html <html> <body> <button onClick="saveImage()">画像保存</button> <div id="test"> <h1>Hello world!</h1> <table> <tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> </div> <script> function saveImage() …</body></html>

iframeの高さを自動調整する方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「iframeの高さを自動調整する方法」です。 Ⅱ. やり方 サンプルプログラム <html> <body> <div> <iframe id="myiframe"></iframe> </div> <script> let myiframe = document.getElementById('myiframe') // 100行ダミーテキストを入れる let str = ''; for (let i = 0; i < 100; i++) { str += i</body></html>…

Canvasで画像を重ね合わせる方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「Canvasで画像を重ね合わせる方法」です。 Ⅱ. サンプルプログラム index.html <html> <body> <canvas id="my-canvas" width=300 height=300></canvas> <script src="index.js"></script> </body> </html> index.js // 優先度が低い順に画像パスを指定する。（上に表示したい画像は後ろに指定する） const imgs = ['img/character.png', 'img/frame…

CSSでウィンドウ幅に合わせて要素を横に並べる方法

CSS HTML

Ⅰ. はじめに タイトルの通り「CSSでウィンドウ幅に合わせて要素を横に並べる方法」です。 Ⅱ. サンプル CSS Grid Layoutを使う場合 CSS Flexible Box Layout を使う場合

HTML5でプログレスバーを使ってカウントダウン、カウントアップをする方法

HTML JavaScript

Ⅰ. はじめに タイトルの通り「HTML5でプログレスバーを使ってカウントダウン、カウントアップをする」方法です。 progress要素とoutput要素はHTML5で導入されました。よって、HTML5以降のみで動作します。 Ⅱ. サンプル 1. 10秒カウントダウン codepen.io 2. …