ウェブサイトやウェブアプリを開発する際に、自身が書いた JavaScript で HTML ドキュメントの DOM ツリーの操作を行うこともあれば、読み込んだ JavaScript ライブラリーが D...
Continue reading...webfrontend.ninja
【JavaScript】HTML 要素の寸法の取得方法まとめ
JavaScript から HTML 要素の横幅と高さを取得する方法はいくつか存在します。しかし、それぞれの方法で取得する寸法が微妙に違います。今回は HTML 要素の寸法を取得する方法を一気にまとめ...
Continue reading...【JavaScript】HTML 要素のリサイズを検知する Resize Observer
ウェブブラウザーのウィンドウをリサイズするなどして、コンテンツのサイズが変わることがあります。そのリサイズに合わせて何かを実行したいというニーズは多いのではないでしょうか。今回は、そのニーズに応える ...
Continue reading...【JavaScript】配列のすべての値をまとめて評価、Array.every() と Array.some()
配列の値すべてが条件を満たしているか、配列の値のいずれか 1 つでも条件を満たしているか、といった処理はときどき遭遇します。しかし、頻繁に遭遇しないせいか、すぐに忘れてしまうのが Array.ever...
Continue reading...【JavaScript】オブジェクトのプロパティの存在をチェックする 4 つの方法と特性の違い
オブジェクトの中に特定のプロパティが存在するかをチェックする方法はいくつかあります。しかし、どの方法を使うか迷うことはないでしょうか。今回はそれらの方法を一通り整理し、それぞれの特性についてまとめて...
Continue reading...【JavaScript】とても便利なてんてんてん「…」スプレッド構文
最近は JavaScript コードのサンプルで「…」が配列の中で使われているのをよく見ます。中には関数の引数の指定で見ることもあります。私が初めて見たときには何かの省略記号かな?なんて思...
Continue reading...【CSS】独自プロパティを作る CSS Properties and Values API (Houdini)
CSS といえばブラウザーが用意したプロパティを使って書くものですが、W3C で策定している「CSS Properties and Values API」を使うことで、独自の CSS プロパティを作る...
Continue reading...【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる
CSS を書いていると、同じ値を何度も書いていることに気づきます。とりわけ色の値では顕著ではないでしょうか。プログラマーであれば同じ値を何度も使うなら定数として変数に値を格納して利用するのが当たり前で...
Continue reading...【CSS】CSS 界隈で大きな話題になっている Houdini って何?
ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあるのではないでしょうか。英語の記事を見ると Next Big Thing なんて言われるほ...
Continue reading...【HTML】mark 要素がハイライトは間違い?
HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説明している記事を良く見かけます。見た目の表現としては間違っていませんが、要素の説明としては...
Continue reading...