responsive-design について
画面サイズやデバイス環境に応じて変化するインターフェースの設計・実装を支援するスキルです。モバイルファーストのレイアウトや CSS のレスポンシブ技法、よくある問題を扱います。
主な機能
- 01モバイルファーストのレイアウト指針
- 02コンテナクエリのパターン
- 03流動的な文字サイズと間隔
- 04CSS Grid と Flexbox のレイアウト
- 05レスポンシブなメディアとナビゲーション
活用シーン
- 01モバイルとデスクトップ向けのレイアウト構築
- 02コンテンツに応じたブレークポイントの選定
- 03コンテナクエリによるコンポーネント調整
- 04はみ出しやタッチ領域の問題の調査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/responsive-designを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/breakpoint-strategies.mdcontainer-queries.mddetails.mdfluid-layouts.md詳細
レスポンシブデザイン
現代のレスポンシブデザイン手法をマスターし、あらゆる画面サイズとデバイス環境にシームレスに適応するインターフェースを作成します。
このスキルを使用する場面
- モバイルファーストのレスポンシブレイアウトを実装する
- コンポーネントベースのレスポンシブ対応にコンテナクエリを使用する
- フルイドなタイポグラフィとスペーシングスケールを作成する
- CSS Grid と Flexbox で複雑なレイアウトを構築する
- デザインシステムのためのブレークポイント戦略を設計する
- レスポンシブ画像とメディアを実装する
- 適応型ナビゲーションパターンを作成する
- レスポンシブなテーブルとデータ表示を構築する
詳細なパターンと実例
詳細なパターンのドキュメントは references/details.md にあります。上記のナビゲーション階層では不十分な場合は、そのファイルを参照してください。
ベストプラクティス
- モバイルファースト: モバイル向けスタイルから始め、より大きな画面向けに拡張する
- コンテンツ基準のブレークポイント: デバイスではなくコンテンツに基づいてブレークポイントを設定する
- 固定よりフルイド: タイポグラフィとスペーシングにはフルイドな値を使用する
- コンテナクエリ: コンポーネントレベルのレスポンシブ対応に使用する
- 実機でテスト: シミュレーターではすべての問題を検出できない
- パフォーマンス: 画像を最適化し、画面外のコンテンツは遅延読み込みする
- タッチターゲット: モバイルでは最小 44x44px を維持する
- 論理プロパティ: 国際化のために inline/block を使用する
よくある問題
- 横方向のオーバーフロー: コンテンツがビューポートからはみ出す
- 固定幅: 相対単位ではなく px を使用している
- ビューポートの高さ: モバイルブラウザでの 100vh の問題
- フォントサイズ: モバイルでテキストが小さすぎる
- タッチターゲット: ボタンが小さすぎて正確にタップできない
- アスペクト比: 画像がつぶれたり引き伸ばされたりする
- Z-Index の重なり: 異なる画面でオーバーレイが崩れる
コメント
Markdown 対応