操作ガイド
開発者モード
開発プロセスを簡単にするために、インスペクトペインでは、ユーザーと共同作業者がコード/属性を表示およびコピーできます。
編集者は、右側のバーの「デザイン」ペインと「プロトタイプ」ペインにアクセスできます。閲覧者は「ラベル」ペインにのみアクセスできます。
①プロパティ値を表示する
「ラベル」ペインでは、選択したレイヤーのプロパティ値を確認してコピーできます。
- この属性には、オブジェクトのサイズと値の制約が含まれます。
- コンテキストレイヤー内のコンテンツ。
- フォント、線の太さ、行の高さなど、構成属性を確認できます。
- パディングペインを使用して、16進数、RGB、CSS、HSL、およびHSBのカラー値を確認します。
- シャドウ(内部および外部)とアウトラインの値を確認してコピーします。
②CSS コードを確認する
スライスを確認して書き出す
スライスパネルには、現在のページで書き出し用に準備された素材が表示されます。デザイナーが開発への引き継ぎ用に設定した素材をダウンロードできます。
- 開発者モードでデザインファイルを開きます。
- 右側のスライスパネルで、現在のページの素材を確認します。
- すべてのスライス、または必要なものだけを選びます。
- 倍率と形式を確認し、書き出します。
必要な素材がない場合は、対象レイヤーと書き出し設定を確認します。デザイナーはレイヤーに書き出し設定を追加するか、スライスツールで範囲を指定できます。プリセットと素材の設定は、スライスを参照してください。
ボックスモデルを確認する
ボックスモデル表示では、選択レイヤーの寸法、境界線、内側の余白、他のレイヤーとの位置関係を確認できます。ブラウザーの開発者ツールに近い形式で値が表示されます。
- 開発者モードでレイヤーを選択します。
- 右パネルでボックスモデル表示を開きます。
- サイズ、境界線、角の情報、余白の関係を確認します。
実装時は、ハンドオフパネルのプロパティや参考コードと合わせて使用してください。
ハンドオフ表示を共有する
開発者モードで共有を選び、リンクをコピーします。リンクはハンドオフ表示を開きますが、元のデザインファイルのアクセス権は引き続き適用されます。開発者向けのリンクを送るだけで、アクセス権のない人がファイルを見られるようになるわけではありません。