【Jade】記述方法-HTMLの書き方との違いをまとめました。id,class,属性など | jade(pug)の記述方法

当記事では、Jadeの初歩的な記述方法についてHTMLと比べながらまとめていきます。 Jadeとは Jadeの記述方法基本的な構文(基本的な書き方) 例１例２例３ Jadeとは Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言…

2020-04-19

【HTML】継承されたファイル文字コードをUnicodeに変更するとheadの中身がなくなる問題の対処法

HTML-継承 HTML 継承

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。 // 問題の要因 extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コ</body>…

2020-03-19

【JavaScript】ページ上部に自動スクロールするボタンを実装する | HTML JavaScript スクロールボタン

JavaScript-自動スクロールボタン JavaScript 自動スクロールボタン

今回は、html,JavaScript(jQuery)でページ上部に自動スクロールするボタンを実装するまでの記事になります。自動スクロールボタン...ページ上部にスクロールする処理...水平方向のスクロール量の保持...スクロールをゆっくりさせる ...スクロールの速度を徐…

2020-03-11

【JS】指定数値範囲内の乱数(整数)の取得 | JavaScript | 乱数(random)

JavaScript-スニペット-random(乱数) JavaScript-スニペット JavaScript スニペット random(乱数)

JavaScriptで指定数値範囲内の乱数(整数)を取得する取得したい数の範囲を指定して乱数を取得する関数 function getRandomInt(min, max) { return Math.floor(Math.random() * (max + 1 - min) + min);} 使用例 getRandomInt(最小値,最大値) // Mathオブジェ…

2020-02-19

【JavaScript】スクロールをマウスドラッグで可能にする | マウスドラッグスクロール | JS | jQueryプラグイン(拡張)

JavaScript-スニペット-マウスドラッグスクロール JavaScript-スニペット JavaScript スニペットマウスドラッグスクロール jQuery-プラグイン-マウスドラッグスクロール jQuery-プラグイン jQuery プラグイン

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。マウスドラッグスクロール DEMO コード jQuery拡張版使用方法 jQuery拡張版使用例補足マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。当処理はjQuery…

2020-02-13

【JS】指定時間分処理を待つ sleep処理を実装する - ループ処理で待ち時間(wait)を発生させる

JavaScript-スニペット-sleep JavaScript-スニペット JavaScript スニペット sleep

JavaScriptで、 loop処理(for文やwhile文)を実行させることで、他言語にあるsleep処理のような指定時間分処理を止める動作を実装します。1秒間のsleep処理(処理を止める)を実行させる。 var sleepTime=1000; // msecで記述 var now=Date.now(); // 開始時間 …

2019-12-23

【JS】要素中央の位置(座標)を取得する | JavaScript | jQuery

JavaScript-スニペット-座標操作 JavaScript-スニペット JavaScript jQuery-座標操作 jQuery

jQueryでHTML要素の中央位置(座標)を取得します。var left = $(element).offset().left; var top = $(element).offset().top; var width = $(element).width(); var height = $(element).height(); offsetCenterLeft = left+(width/2); offsetCenterTop = to…