CSS詳細度を図解する：IDs・class・typeから :is() :where()まで

HTML/CSS
CSSが「思った通りに上書きされない」とき、原因の多くは詳細度（specificity）の理解不足です。前回までの記事で:is()/:where()を使った詳細度設計の話をしてきま…
続きを読む

nth-系セレクタとクラス名指定の完全ガイド：CSSで「何番目か」を指定する

HTML/CSS
「最初の要素だけスタイルを変えたい」「最後の3つだけマージンをなくしたい」——こういった位置ベースの指定はCSSでよく書く。:nth-of-type()の基本から、:nth-chi…
続きを読む

CSS三角形ジェネレーター｜8方向・内枠・くり抜き対応（clip-path）

ツール HTML/CSS
CSSの三角形を8方向（▲▼◀▶◤◥◢◣）から選んで生成。幅・高さ・色に加え、三角形の内側に作る「内枠」や、内側を透明にくり抜いた三角形にも対応。clip-pathのコードをコピー…
続きを読む

unpkg.com の使い方 / npm にパッケージを公開してCDN配信する方法【初心者向け】

JavaScript
unpkg.comはnpm上の全パッケージをそのままCDN配信するサービスです。URLのルールを覚えれば、任意のパッケージを即座に利用できます。この記事ではURLの読み方から本番環…
続きを読む

PCはタブパネル切り替え・SPはアンカーリンク——JavaScriptで実現するハイブリッドUIの実装解説

JavaScript
「PCではタブで切り替えたい、でもSPではページ内リンクで飛ばしたい」——レスポンシブサイトでよくある要件です。この記事では、そのハイブリッドなタブUI（invisible-tab…
続きを読む

CSSで要素を横並びにする方法と、各手法のメリット・デメリットを解説

HTML/CSS
CSSで要素を横並びにする方法は、float・inline-block・table-cell・flexbox・gridと複数あります。「とりあえずflexboxで」という記事は多い…
続きを読む

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

JavaScript
固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法としてscroll-padding-topが広く知…
続きを読む

スマホとPCで別々のスタイルを適用するJavaScript
-JavaScriptのパフォーマンス最適化-

JavaScript
レスポンシブサイトを制作していると、「スマホとPCで画像もデザインも全く違う」「1箇所だけ別のスタイルを適用したい」といった場面に遭遇することがあります。スマホとPCで画像サイズが…
続きを読む

iPhoneでも動作！response.jsで実現する画像・動画・iframeのレスポンシブ遅延読み込み完全ガイド

JavaScript
Webサイトのパフォーマンス最適化において、画像や動画の遅延読み込み（LazyLoading）は必須のテクニックです。しかし、実際に実装しようとすると以下のような問題に直面します：…
続きを読む

3466個のDOM要素でも軽快に動作！大量データ表示のパフォーマンス最適化テクニック

JavaScript
MaterialSymbolsの全アイコン（3466個）を一覧表示するWebページを作成していた際、深刻なパフォーマンス問題に直面しました。各アイコンにコピー機能を付けるため、全て…
続きを読む

iOSのpointer-eventsバグとイベント制御対策

JavaScript HTML/CSS
Webサイトでリンクやボタンのクリックを無効化したい場面は意外と多いものです。例えば、処理中のボタンを一時的に無効にしたり、特定条件下でリンクを機能させないようにしたりする場合です…
続きを読む

タブレットのレスポンシブ対応：ベース画面サイズの縮小版表示でレスポンシブ実装

JavaScript
概要本記事では、画面幅に応じて適切なレイアウトを提供する効果的な実装方法を解説します。特に以下のデバイスカテゴリごとに最適化された表示方法を実現します：小型スマートフォン（412p…
続きを読む

CDN「unpkg.com」は安全？信頼性とメリットをクライアントに説明する方法

JavaScript
unpkg.comは、npm上の全パッケージを高速配信するCDN（コンテンツ配信ネットワーク）サービスです。JavaScriptライブラリやCSSフレームワークを、自社サーバーにア…
続きを読む