2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
入社後、基礎的な知識を身に着けたのは良いけど、提出がギリギリになることが多かった私がスピードアップのために普段行っているちょっとした工夫を紹介いたします！
目次
コーディングする際は、デザイナーが作成したデザインデータをもとにコーディングします。
デザインデータからフォントやサイズ、余白、色、画像などを確認してコーディングするのですが、このコードを書く前段階で時間を取られると、その分コーディングが遅くなってしまいます。
この作業を短縮できるとコードを書く時間に割けるので、デザインツールを使いこなせるようになるのは大事なポイントです。
全体を把握しやすくなるので、構造が考えやすくなります。
文字のサイズや色、画像の大きさなど必要な情報を予め印刷した紙にメモしておくことで、いちいちデザインデータを開かなくても紙を見ながらスムーズにコーディングすることができます。
また、id名やclass名やクラス名が多くなっても一目で確認できるので、紙におこすおこさないで作業効率が全然違います。
Emmetを使えば、短いコードでタグやスタイルを記述することが出来ます！
例えば、
「div」と書いてtabキーを押すと
<div></div>
に変換されます。
「div.hoge>p+img」
と書いてtabキーを押すと、
<div class="hoge">
<p></p>
<img src="" alt="">
</div>
に変換されます。
class,id名も指定や入れ子構造のタグも生成できます。
Emmetには覚えきれないほどたくさん数があります。
「Emmet」のチートシートで記述方法を確認してみましょう！
いかがでしたでしょうか。
効率的に作業ができるようになると、コーディングが今よりももっと楽しくなると思います！
関連記事はこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/