こんにちは！フロントエンドエンジニアを目指し日々勉強しているエンジニア１年生です！
今回はXDからのコーディングの際に最低限身につけておくべきこと、コーディング時間を短縮できるemmetの使い方について進めていきたいと思います！
■コーディングの際のXDの使い方
自分自身photoshopからのコーディングも経験していますが、正直XDのほうが使いやすいです！
今回はXDで作成されたデザインカンプについてコーディングする際に、コーダーが最低限知っておくべきXDの使い方について説明していきます！
1 XDでの画像書き出し
↑のように書き出しを行いたい箇所について画像を選択します。
画像を選択した状態で、ctrl+Eを選択すると上記が表示されます。
書き出し先を選択して書き出しを選択すると画像が書き出しされます！
2 要素間の距離を取得するには？
画像と文字、画像間の余白を取得することはコーディングする上で重要になります。
今回は↑の画像と”WEB制作・開発”の青文字の要素間の余白を調べたいとします！
これをするにはまず調べたい余白の起点(今回は画像)を選択します。
選択したあとにaltを押しながらカーソルを”WEB制作・開発”にあてると、画像のように余白の距離が表示されます！
このようにして要素間の距離を取得していきます！
3 文字の色やサイズを取得するには？
文字の色やサイズを取得するにはまず知りたい箇所について選択します。
選択すると右側に上の画像が表示されます。これをCSSに設定します。
↑の場合だと
|
1 2 3 4 5 |
font-family: "游ゴシック", "Yu Gothic"; font-size:18px; font-weight:normal; line-height:1.75; color:#024784; |
↑のようにスタイルを当てます。
ちなみにline-heightの算出方法は、行送り/文字サイズで算出できるため
31.5/18=1.75 となります！
4 XDをurlで他のコーダーと共有するには？？
XDでデザインカンプを作成した場合は、共有リンクの機能を使うとXD本体のファイルを渡さずにコーディングを行うことができます。
とても便利なので、その手順を見ていきましょう！
↑のように左上にある共有という箇所を選択します。
共有を選択した後に、右側にある表示設定のプルダウンから開発を選択した後にリンクを作成を選択します。
上記の手順を踏むとリンクが生成されるためこちらのurlを他のコーダーに送るとそのデザインカンプを共有することができます！
共有したurlから画像を書き出しする際には、右側にある真ん中のアイコンを選択します。
その上で書き出しを行いたい画像を選択すると右側に↑の画像のような表示がでてくるため、こちらでダウンロードを押すことで書き出しを行うことができます！
余白間の距離などはデザインカンプファイルのときと同様のため説明を省かせていただきます。
上記4つがコーダーが最低限抑えておくべきXDの使い方でした！他の使い方などありましたらまた記事化していきたいと思います！
■コーディング時間を大幅に短縮できるemmetの使い方！
今回はVisual Studio codeを使用している方向けになりますがemmetの使い方について説明していきたいと思います！
emmetとは何かといいますと、例えば<div id=”main”></div>のコードに書く際に、div#mainと打って”Tabキー”を押すことで生成されるものです。
emmetを使いこなしていくと
・コーディング時間の短縮
・タイプミスを減らすことができる
↑の2つのメリットを享受できるため、コーダーは必ず身につけておきましょう！(僕自身もやっと使い慣れてきたかなという段階です..)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
例えば上のhtmlのひながたを記述する場合、emmetで書くと、
|
1 |
！ |
と打って”Tabキー”を押すだけで生成されます。 ！打って、Tabキー押すだけなので便利すぎますよね！
他にも、
|
1 2 3 4 5 6 7 |
<ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> |
↑の場合だと、
|
1 |
ul>li*5>a[href="#"] |
たった1行打つだけで生成されます。圧倒的にコーディング時間を短縮できます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table class="table"> <tr> <th></th> <td></td> <td></td> <td></td> </tr> <tr> <th></th> <td></td> <td></td> <td></td> </tr> <tr> <th></th> <td></td> <td></td> <td></td> </tr> </table> |
少し複雑ですが、↑も1行で生成できます！
emmetの便利さがわかるので、ぜひどのように打てば作れるか考えてみましょう！下に答えを張っておきます！
|
1 |
table.table>(tr>th+td*3)*3 |
0
0