-
CSS詳細度を図解する:IDs・class・typeから :is() :where()まで
HTML・CSS CSSが「思った通りに上書きされない」とき、原因の多くは詳細度(specificity)の理解不足です。前回までの記事で:is()/:where()を使った詳細度設計の話をしてきま…
続きを読む
-
nth-系セレクタとクラス名指定の完全ガイド:CSSで「何番目か」を指定する
HTML・CSS 「最初の要素だけスタイルを変えたい」「最後の3つだけマージンをなくしたい」——こういった位置ベースの指定はCSSでよく書く。:nth-of-type()の基本から、:nth-chi…
続きを読む
-
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で」という記事は多い…
続きを読む
-
CDN「unpkg.com」は安全?信頼性とメリットをクライアントに説明する方法
JavaScript unpkg.comは、npm上の全パッケージを高速配信するCDN(コンテンツ配信ネットワーク)サービスです。JavaScriptライブラリやCSSフレームワークを、自社サーバーにア…
続きを読む
-
タブレットのレスポンシブ対応:ベース画面サイズの縮小版表示でレスポンシブ実装
JavaScript 概要本記事では、画面幅に応じて適切なレイアウトを提供する効果的な実装方法を解説します。特に以下のデバイスカテゴリごとに最適化された表示方法を実現します:小型スマートフォン(412p…
続きを読む
-
scroll-padding-topはリロード時にズレる?CSS変数とJavaScriptで解決するアンカーリンク調整
JavaScript 固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法としてscroll-padding-topが広く知…
続きを読む
-
スマホとPCで別々のスタイルを適用するJavaScript
-JavaScriptのパフォーマンス最適化-JavaScript レスポンシブサイトを制作していると、「スマホとPCで画像もデザインも全く違う」「1箇所だけ別のスタイルを適用したい」といった場面に遭遇することがあります。スマホとPCで画像サイズが…
続きを読む