この記事の概要
FigmaにはInspect機能がありサイズや色、余白などが見れます。
かなり便利な機能なのですが、一部のプロパティはそのままコピペして実装しない方が良いので紹介した記事です。
なお、iOSとAndroidのコードも出力されるものの今回はスコープ外とします。
プロパティ一覧
position
ルート要素のFrameにはrelative、それ以外の大抵の要素はabsolute、Auto layout内の要素はstaticが指定されているはずです。
普通のレイアウトで済む要素でもpositionが指定されているので、基本的な無視しましょう。
もちろんleftやtopも記載しないでOKです。
font-family
既に運営しているサイトであれば、body要素にでもfont-familyが記載してあると思います。
カスケードされているので1つ1つの要素で指定する必要がありません。
background: url();
背景に色が指定されているときは良いのですが、画像が指定されているときはそのままコピペできるものではありません。
実際のコードであればパスを指定しますから、ファイル名だけ書いてあっても動きませんよね。
box-sizing: border-box;
borderがある要素にだけbox-sizing: border-box;が指定されているようです。
昨今のWebサイトであればreset.css的なもので全ての要素をborder-boxに指定していることが多いので、あえて書かずとも大丈夫な場合が多いでしょう。
order
Auto layoutの中の要素に書かれています。
たしかに書かれている通りの数値を指定すれば見た目通りの並び順になるのですが、アクセシビリティの観点から言ってマークアップの順番と見た目の並び順を変えるのは良くありません。
Figmaの見た目通りに、左から（or 上から）順にマークアップしていけばorderを指定しなくても大丈夫です。
↧