CSS
CSS Tips | 超実務コアCSSテクニック：ボックスモデル － box-shadowパターン
JavaScript
JavaScript JavaScript | DOM 操作：要素の取得 – 要素の存在チェック
要素の存在チェックとは何か「要素の存在チェック」は、操作したい要素が本当に DOM にあるかを確認し、なければ安全にスキップしたり代替処理に切り替えたりすることです。ここが重要です：存在を前提に書くと...
JavaScript JavaScript | DOM 操作：要素の取得 – matches
matches とは何かmatches は、ある要素が「指定した CSS セレクタに現在一致しているか」を真偽値で返すメソッドです。ここが重要です：取得した要素に対して直接判定できるため、「このクリッ...
JavaScript JavaScript | DOM 操作：要素の取得 – closest
closest とは何かclosest は、ある要素から「自分自身を含めて、上方向（祖先方向）にセレクタに一致する最初の要素」を返すメソッドです。見つかればその要素、見つからなければ null。ここが...
JavaScript JavaScript | DOM 操作：要素の取得 – 親要素・子要素の取得
親要素・子要素とは何かDOM は木構造で、要素どうしが「親子」の関係を持ちます。ある要素を内側に包む要素が親、内側に含まれている要素が子です。ここが重要です：DOM 操作では「どの範囲（親配下）を対象...
JavaScript JavaScript | DOM 操作：要素の取得 – CSS セレクタの使い分け
CSS セレクタの使い分けとは何かCSS セレクタは、HTML の中から「どの要素を対象にするか」を表す記法で、querySelector / querySelectorAll でもそのまま使えます。...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelectorAll
querySelectorAll とは何かquerySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList（静的コレクション） ...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelector
querySelector とは何かquerySelector は、CSS セレクタで「最初に一致した1つの要素」を取得するためのメソッドです。返り値は要素か、見つからなければ null。ここが重要で...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByTagName
getElementsByTagName とは何かgetElementsByTagName は、指定したタグ名（例: "div", "p", "a"）を持つ要素をまとめて取得するメソッドです。返り値は...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByClassName
getElementsByClassName とは何かgetElementsByClassName は、「指定したクラス名を持つ要素をまとめて取得する」ためのメソッドです。返り値は HTMLColle...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementById
getElementById とは何かgetElementById は、document（ページ全体の入口）から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返...
JavaScript JavaScript | DOM 操作：DOM 基礎 – 静的 NodeList とライブ HTMLCollection の違い
静的 NodeList とライブ HTMLCollection とは何か静的 NodeList とライブ HTMLCollection は、DOM から複数ノードを集めた「コレクション」を表します。違...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM API の基本概念
DOM API とは何かDOM API は、ブラウザが作る「HTML の木構造（DOM ツリー）」を JavaScript から読み書きするための関数やプロパティ群です。document を起点にノー...
JavaScript JavaScript | DOM 操作：DOM 基礎 – HTML と JavaScript の紐づけ
HTML と JavaScript の紐づけとは何かHTML は「見た目と構造」、JavaScript は「動きと振る舞い」を担当します。紐づけとは、HTML の要素を JavaScript から選び...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM の読み込み順序
DOM の読み込み順序とは何かDOM の読み込み順序は、ブラウザが HTML を上から解析し、DOM ツリーを構築していく過程の時間軸です。重要なのは「ブラウザは文書を一気に読み終えてから作るのではな...
JavaScript JavaScript | DOM 操作：DOM 基礎 – window と document の違い
window と document の違いwindow は「ブラウザタブ（ウィンドウ）そのもの」を表す最上位のオブジェクトです。タイマー、画面サイズ、スクロール、イベント、ストレージ、ネットワークなど...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOMContentLoaded
DOMContentLoaded とは何かDOMContentLoaded は、「ブラウザが HTML の構文解析を終えて、DOM ツリーの構築が完了した瞬間」に発火するイベントです。ここが重要です：...
JavaScript JavaScript | DOM 操作：DOM 基礎 – 要素ノード / テキストノード
要素ノード / テキストノードとは何か要素ノードは HTML のタグそのもの（div, p, a など）を表し、属性（id, class, style など）や子ノードを持てます。テキストノードは、要...
JavaScript JavaScript | DOM 操作：DOM 基礎 – ドキュメントツリーの構造
ドキュメントツリーとは何かドキュメントツリーは、HTML文書を「ノード（要素・テキスト・コメント）」の入れ子で表した木構造です。最上位の document を根にして、html、head、body と...
JavaScript JavaScript | DOM 操作：DOM 基礎 – ノードとは何か
ノードとは何かDOMの「ノード」は、HTML文書を構成する最小パーツのことです。要素（div、p、aなど）、テキスト（文字列）、コメント、属性など、画面に関係するすべてがノードとして木構造に並びます。...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM とは何か
DOM とは何かDOM（Document Object Model）は、ブラウザが「HTML や XML の文書をプログラムから操作できるようにした、木構造のデータモデル」です。ページは「ノード（要素...
JavaScript JavaScript | 基礎構文：オブジェクト – Object.keys / values / entries
Object.keys / values / entries とは何かObject.keys / Object.values / Object.entries は、オブジェクトの「列挙可能な自分自身の...
JavaScript JavaScript | 基礎構文：オブジェクト – in 演算子
in 演算子とは何かin 演算子は、あるキー（プロパティ名）がオブジェクトに「存在するか」を調べるための演算子です。結果は真偽値（true/false）。存在確認に特化していて、値が何であるか（und...
JavaScript JavaScript | 基礎構文：オブジェクト – Freeze（凍結）
Freeze（凍結）とは何かObject.freeze(obj) は、オブジェクトを「変更できない状態」にする仕組みです。凍結すると、そのオブジェクトに対して新しいプロパティの追加、既存プロパティの削...
JavaScript JavaScript | 基礎構文：オブジェクト – スプレッド構文による浅いコピー
スプレッド構文とは何かスプレッド構文 { ...obj } は、既存のオブジェクトの「自分が持っている列挙可能なプロパティ」を表面だけコピーして新しいオブジェクトを作る書き方です。重要なのは「浅いコピ...
JavaScript JavaScript | 基礎構文：オブジェクト – オブジェクトのコピー
オブジェクトのコピーとは何か「コピー」は、元のオブジェクトから同じ内容を持つ“別のオブジェクト”を作ることです。ここが重要です：JavaScriptのオブジェクトは参照型なので、単なる代入は「同じもの...
JavaScript JavaScript | 基礎構文：オブジェクト – メソッド
メソッドとは何かメソッドは、オブジェクトのプロパティとして格納された「関数」です。オブジェクトのデータ（他のプロパティ）を使って処理を行う“振る舞い”を表し、「データ＋振る舞い」をひとまとまりにするこ...
JavaScript JavaScript | 基礎構文：オブジェクト – プロパティアクセス（. と []）
プロパティアクセスとは何かJavaScriptのオブジェクトは「キーと値のペア」を持ちます。プロパティアクセスは、そのキーを指定して値を読み書きする操作です。方法は2つあり、ドット記法（.）とブラケッ...
JavaScript JavaScript | 基礎構文：オブジェクト – プロパティの削除（delete）
プロパティの削除とは何かオブジェクトから不要になったキーと値のペアを取り除くのが「削除」です。JavaScriptでは delete 演算子を使ってプロパティを消します。削除すると、そのキーはオブジェ...
JavaScript JavaScript | 基礎構文：オブジェクト – プロパティの追加
プロパティの追加とは何かオブジェクトの「プロパティ」は、キー（名前）と値のペアです。プロパティの追加は、既存のオブジェクトに新しいキーと値を付け足すことを指します。重要なのは「オブジェクトは後からでも...
JavaScript JavaScript | 基礎構文：オブジェクト – オブジェクトリテラル
オブジェクトとは何かオブジェクトは、関連するデータ（値）と振る舞い（関数）をひとまとまりにした入れ物です。例えば「ユーザー」を表すなら、名前や年齢といった情報と、挨拶する処理を同じ箱に入れて扱えます。...