2023-01-01から1年間の記事一覧
<div></div> div { width: 1440px; height: 500px; background: radial-gradient(#fff 50%, #ddd); /* このプロパティで放射線状の背景を実装できる */ } ▼実装
▼参考記事 teratail.com ▼参考ドキュメント www.movabletype.jp
テキストによる、高さが変動する要素を2つ用意する。 下記のように、テキストが揃わない2つの要素がある場合、JavaScriptで計算して高さを揃える必要がある。 html <body> <div class="wrap"> <ul class="list list-1"> <li class="item-1">固定の要素</li> <li class="item-2"> 変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変</li></ul></div></body>…
下記のように--dynamic-heightをキーとして、スタイルを変更することができる。 .sample::before { height: var(--dynamic-height, 0%); } const elem = document.querySelector('.elem'); elem.style.setProperty('--dynamic-height', 100 + '%');
良い記事があった。 note.com
You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your c…
一般的な動作は下記の通り const map = new Map(); map.set("key_1", "value_1"); map.set("key_2", "value_2"); map.set("key_3", "value_3"); // 値の取得 const value_1 = map.get("key_1"); console.log(value_1); // value_1 // キーの存在チェック con…
someメソッドは、配列の中の少なくとも1つの要素が指定した関数によってテストをパスするかどうかをチェックします。 テスト関数が真を返す場合、someメソッドはtrueを返し、そうでない場合はfalseを返します。 const numbers = [1, 2, 3, 4, 5]; const hasN…
forEach const array = ["apple", "orange", "peach"]; array.forEach((item) => { console.log(item); }); // 結果 // apple // orange // peach map const array = ["apple", "orange", "peach"]; const results = array.map((item) => { return item; });…
// ページ内リンクの際にheader分の高さを確保する html { scroll-padding-top: 80pxf } // header固定の設定 header { position: sticky; top: 0; z-index: 1; }
解説コード const path = require("path"); const glob = require("glob"); function getHtml() { const htmlFiles = glob.sync("**/*.html", { cwd: path.resolve(__dirname), ignore: ["**/modules/**/*.html", "**/assets/**/*.html", "**/dist/**/*.html…
Installation Micromodal is available on npm and can be installed from the command line via npm or yarn Micromodalはnpmで利用可能で、コマンドラインからnpmまたはyarnでインストールできる。 npm install micromodal --save // via npm yarn add mic…
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript Micromodal.jsは、純粋なJavaScriptで書かれた、軽量で設定可能なa11y対応のモーダルライブラリです。 It enables you to create WA…
必要なnpmライブラリをインストール npm i -D ts-jest @types/jest ファイルを設定 launch.json { "configurations": [ { "name": "Debug Jest Tests", "type": "node", "request": "launch", "runtimeArgs": [ "${workspaceRoot}/node_modules/jest/bin/jes…
async/awaitはPromiseをより直感的に記述できるようにしたもの（ES8） asyncと書けば必ずPromiseが返ってくることが担保されている。 awaitはPromiseを返却する関数の非同期処理が完了するまで待って次の処理に移行するようにする。 Promiseの処理をasync/aw…
MicroTasksとMacroTasksについて MicroTasksの処理が全て完了したら、MacroTasksの実行が開始される（MicroTasks優先） MicroTasksの特徴 順番が回ってきたら全てのジョブを実行 Promises、queueMicrotask、MutationObserver など MacroTasksの特徴 順番が回…
Promiseとは コールバック地獄を解消し、非同期処理をより簡単に可読性が上がるように書けるようにしたもの。 基本的なPromise構文 new Promise((resolve, reject) => { console.log("promise"); // 同期処理 resolve("resolve data"); // or reject('reject…
callback関数とは callback関数は、ある関数（A関数）が実行される際に、その中で別の関数（B関数）を呼び出すこと。 console.log("start"); function timeout() { // B関数 console.log("setTimeout"); } setTimeout(timeout, 1000); // A関数 console.log(…
