レイヤー名の付け方

Photoshop でのレイヤー名の付け方を解説します。

PSD のレイヤー名は HTML/CSS の id に使用されます。
Photoshop ではレイヤー名に日本語や記号など様々な文字を使用することができますが、HTML/CSS では使用できる文字に制限があります。

HTML/CSS で使用できないレイヤー名が使われている場合、そのレイヤー名は自動的に変更して出力されます。
※変更した内容はコンソールで確認できます。

HTML/CSS に変換した後にファイルを直接修正することもできますが、PSD が更新されるたびに毎回修正することになり効率が悪くなります。

あらかじめ、PSD を作成するときに HTML/CSS を意識したレイヤー名を付けることをお勧めします。

 

推奨されるレイヤー名の付け方

  • 大文字と小文字は区別します。
  • 半角英数字、ハイフン(-)、アンダーバー(_)のみ使用します。
  • 初めの文字は英字にします。
  • 最後の文字は英数字にします。
  • レイヤー名は重複しないように付けます。