HTML/CSSコーディングを爆速化させるためにやるべきこと7選

Web制作

 

こんにちは、タカキです。

 

HTML/CSSコーディングを学びたての方が誰しもぶつかる悩みが、「コーディングスピードが遅い」です。

簡単なLPでもコーディングに3日以上かかって自信を無くしたり・・・、なんて事はよくあると思います。

 

今回はそんな悩みを解消するために、現在コーダーとして働いている僕がコーディングの速度を上げるためにやってきたことをまとめました。

コーディング速度が遅くて悩んでいる方はぜひ参考にしてみてください。

 

以下、記事に入ります。

 

Emmetの導入

Emmetはテキストエディタの拡張機能の1つです。

 

対応しているテキストエディタはEmmetの公式サイトに記載されています。

わりと大抵のエディタには対応していると思います。

エディターによってEmmetのショートカットコマンドが異なるので注意

 

使い方ですが、例として以下のようなコードがあったとします。

普通にコードを書く場合navからせかせか書いていくのですが、Emmetを用いて記述すると、

このように省略して記入することが可能です。

この状態でtabキーを押すだけで、先ほど書いたようなHTMLコードが一気に展開されます

 

このEmmetを用いた書き方は、普通にコードを書くのと比べて以下のようなメリットがあります。

・divやclassなどの文字をいちいち打ち込まなくていい

・liなど複数回使用するタグを一括で書き込める

 

Emmetには他にも沢山の機能があるのですが、いきなり全部に手を出しても多分使いきれないです。

まずは上で紹介した省略記述をしっかり覚えて、使いこなせるようになったら新たな機能に手を出していきましょう٩( ᐛ )و

 

Sassの導入

Sass(SCSS)とは、Syntactically Awesome Stylesheetsの略称で

要は、「CSSを効率よく書いたもの」ですね。

sass記法とscss記法の2パターンがあるのですが、今回はscssで解説します。

 

例えば、HTML/CSSで以下のようなコードがあったとします。

 

このCSSをscssで書き換えると、以下のように表記することができます。

 

scssにすることで記述量が減り、かつ親子関係の構造がわかりやすくなりました

そこまで複雑になっているわけでもないので、CSSをちゃんと書ける方ならすんなり飲み込めると思います。

 

この他にも変数や関数などの便利機能があります。

ProgateにSassの講座が存在するので、加入している方はそちらを受講してみるのをおすすめします。

 

CSSフレームワークの使用

あらかじめ組み上がったCSSを用意しておき、HTMLにクラスを入れるだけで動作させるためのものです。

代表的なのは「Bootstrap」ですね。

 

HTMLの記述中に、class名を入れるだけでCSSを適用させることができるため作業効率を大幅にあげることができます。

 

ただしBootstrapなどの外部フレームワークを用いると、予期せぬ挙動を起こし結局自分で調整して上書きする必要が出てくる場合があります

 

特にデザインから忠実に再現するようなコーディングを行う場合、Bootstrapのようなフレームワークを使うことはおすすめしません。

あらかじめ自分でフレームワークを作っておくか、既存フレームワークをカスタマイズするなりして使用することをおすすめします。

 

プラグインの使用

アニメーションやお問い合わせフォームなど、自分で実装するのが難しい場合は既存のプラグインを使用するのも手です。

以下、有名なプラグインを記載しておきます。

 

・アニメーションのCSS「animate.css

・jQueryのスライダー「slick

・お問い合わせフォーム「MailForm01

slickなどメジャーなプラグインは既存のサイトでも使われていることが多いので、知識を身につけておくと修正案件で役立つことがあります。

1つ問題として、プラグインは便利なのですが導入しすぎるとプラグイン同士が競合して動作がおかしくなることがあります。

導入する場合はほどほどにしておきましょう。

 

よく使うCSS、jsをまとめておく(ライブラリ化)

フレームワークやプラグインと考え方が近いのですが、よく使うCSSやjQuery、jsをライブラリ化してまとめておくと便利です。

 

以下、案件でよく出てくる、CSSとjQueryで表現すべき内容です。

・スムーススクロール

・ハンバーガーメニュー

・タブ切り替え

・要素のフェードイン

この辺はほぼ毎回出てくるので、一度自分で作ったら使いまわしていきましょう。

 

コーディング手順・やり方の見直し

ある程度周りの環境を整えたら、次は自分のコーディングを見直してみましょう。

詳しい手順は以下の記事をご覧ください。

効率の良いHTML/CSSコーディング手順を解説

簡単に説明すると、HTMLとCSSはいったりきたりせず一気に書きましょうということです。

 

もう一点重要なのが、確認の頻度です。

例えば、CSSでmargin-rightだけ調整したらセーブしてページを確認して、次はpaddingを調整したらまたセーブして確認して・・・

このようにプロパティを1つ変えるたびに確認していたら効率が悪いです。

 

上記は少し極端な例ですが、確認するときはある程度の分量を書いてからにする方がおすすめです。

 

ひたすらコードを書く

根本的にコードを書く速度を上げるためには、コードを書き続けるのが一番です

 

コーディングに時間がかかる最も大きい要因は、わからない部分が多くて手が止まりがちだから。

「この部分HTMLでどう書けばいいのかな・・・」

「CSSでどう書けば表現できるかわからない・・・」

こういった迷いや、そのやり方を調べている時間が一番ロスに繋がります。

 

この悩みを解決するのに一番手っ取り早いのは、コードを書きまくって経験を積むことです

 

実案件をこなし続けることができれば一番いいのですが、それが難しい方は「模写コーディング」を行いましょう。

模写コーディングとは、既存のサイトを見ながら同一サイトを再現する手法です。

下記記事にて模写コーディングについて触れています。

Progateから始める、効率のいいプログラミングの勉強法

 

以下、模写コーディングを行うための参考サイトです。

muuuu

こちらは縦に長いサイトを厳選して集めたサイトです。

 

かなり多くのジャンルのサイトが存在するため、ここから適当なサイトを見繕って模写コーディングをしてみましょう。

 

ポイントは自分がすぐに作れそうなサイトではなく、少し技術的に難しそうなサイトを選ぶことです。

「この部分どうやって実装するかわからないな・・・」という部分を調べながら作っていくことで、自分のコーディングレベルを上昇させることができます。

 

自分でサイトを作り終えたとき、もしくはどうしてもわからない部分が出てきたときに元サイトのソースを検証で確認してみましょう。

自分のコードと比較をすることで、新たな気づきを得られることもあります。

 

このプロセスを繰り返して、わからないところをどんどん潰していきコーディングスピードを上げていきましょう╭( ・ㅂ・)و ̑̑

 

まとめ

・EmmetやSassなどのツールを使いこなす

・プラグインやライブラリ、フレームワークで省略できるところは省略する

・手順の見直しや練習で根本的なコーディング速度をあげる