備忘録

備忘録

HTML

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

Ⅰ. はじめに タイトルの通り「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で画像を重ね合わせる方法

Ⅰ. はじめに タイトルの通り「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.png', 'img/rarity.png']; const context = document…

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

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

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

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