spiqa logo

コーディング

初心者がコーディングを早くするために工夫していること

2019.09.18 Wed. コーディング

入社後、基礎的な知識を身に着けたのは良いけど、提出がギリギリになることが多かった私がスピードアップのために普段行っているちょっとした工夫を紹介いたします!

 

 

 

【デザインツールを使いこなせるようにする】
コーディングする際は、デザイナーが作成したデザインデータをもとにコーディングします。
デザインデータからフォントやサイズ、余白、色、画像などを確認してコーディングするのですが、このコードを書く前段階で時間を取られると、その分コーディングが遅くなってしまいます。
この作業を短縮できるとコードを書く時間に割けるので、デザインツールを使いこなせるようになるのは大事なポイントです。

 

 

 

【デザインを印刷して書き込む】
全体を把握しやすくなるので、構造が考えやすくなります。
文字のサイズや色、画像の大きさなど必要な情報を予め印刷した紙にメモしておくことで、いちいちデザインデータを開かなくても紙を見ながらスムーズにコーディングすることができます。
また、id名やclass名やクラス名が多くなっても一目で確認できるので、紙におこすおこさないで作業効率が全然違います。

 

 

 

【Emmetを使う】
Emmetを使えば、短いコードでタグやスタイルを記述することが出来ます!
 
例えば、

「div」と書いてtabキーを押すと

に変換されます。
 
 
「div.hoge>p+img」
と書いてtabキーを押すと、

に変換されます。
 
class,id名も指定や入れ子構造のタグも生成できます。
 
Emmetには覚えきれないほどたくさん数があります。
「Emmet」のチートシートで記述方法を確認してみましょう!

チートシート

 

 

 

いかがでしたでしょうか。
効率的に作業ができるようになると、コーディングが今よりももっと楽しくなると思います!

 

 

 

最新記事

もっと見る≫

カテゴリー

spiqa logo

スピカ

ホームページ制作、LP制作、広告運用はお任せください。
ロゴや名刺などのデザイン制作、また店舗販促物などもお作りします。
お客様の立場、ユーザーの立場の両方に立ち+αの価値を提供し続けます。

制作のご相談はこちらから