HTML5

2019.09.18

【初心者向け】コーディングのスピードを上げる為の3つの方法

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

デザインツールを使いこなせるようにする

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

デザインを印刷して書き込む

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

Emmetを使う

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

例えば、
「div」と書いてtabキーを押すと

<div></div>

に変換されます。

「div.hoge>p+img」
と書いてtabキーを押すと、

<div class="hoge">
    <p></p>
    <img src="" alt="">
</div>

に変換されます。

class,id名も指定や入れ子構造のタグも生成できます。

Emmetには覚えきれないほどたくさん数があります。
「Emmet」のチートシートで記述方法を確認してみましょう!

チートシート

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

関連記事はこちら

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!