自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作HTML/CSSコーディングを爆速化させるためにやるべきこと7選HTML/CSSコーディングを爆速化させるためにやるべきこと7選2019年1月2日Web制作ツイートシェアはてブ送るPocketこんにちは、タカキです。HTML/CSSコーディングを学びたての方が誰しもぶつかる悩みが、「コーディングスピードが遅い」です。簡単なLPでもコーディングに3日以上かかって自信を無くしたり・・・、なんて事はよくあると思います。今回はそんな悩みを解消するために、現在コーダーとして働いている僕がコーディングの速度を上げるためにやってきたことをまとめました。コーディング速度が遅くて悩んでいる方はぜひ参考にしてみてください。以下、記事に入ります。まとめEmmetの導入Emmetはテキストエディタの拡張機能の1つです。対応しているテキストエディタはEmmetの公式サイトに記載されています。エディタには対応していると思います。使い方ですが、例として以下のようなコードがあったとします。href="#"></a></li></ul></nav>普通にコードを書く場合navからせかせか書いていくのですが、Emmetを用いて記述すると、nav.globalmenu>ul>li*5>a[href=#]1nav.globalmenu>ul>li*5>a[href=#]このように省略して記入することが可能です。この状態でtabキーを押すだけで、先ほど書いたようなHTMLコードが一気に展開されます。このEmmetを用いた書き方は、普通にコードを書くのと比べて以下のようなメリットがあります。・divやclassなどの文字をいちいち打ち込まなくていい・liなど複数回使用するタグを一括で書き込めるEmmetには他にも沢山の機能があるのですが、いきなり全部に手を出しても多分使いきれないです。Stylesheetsの略称で要は、「CSSを効率よく書いたもの」ですね。sass記法とscss記法の2パターンがあるのですが、今回はscssで解説します。HTML/CSSで以下のようなコードがあったとします。none;}このCSSをscssで書き換えると、以下のように表記することができます。none;}}}}scssにすることで記述量が減り、かつ親子関係の構造がわかりやすくなりました。そこまで複雑になっているわけでもないので、CSSをちゃんと書ける方ならすんなり飲み込めると思います。この他にも変数や関数などの便利機能があります。ProgateにSassの講座が存在するので、加入している方はそちらを受講してみるのをおすすめします。CSSフレームワークの使用あらかじめ組み上がったCSSを用意しておき、HTMLにクラスを入れるだけで動作させるためのものです。代表的なのは「Bootstrap」ですね。HTMLの記述中に、class名を入れるだけでCSSを適用させることができるため作業効率を大幅にあげることができます。Bootstrapなどの外部フレームワークを用いると、予期せぬ挙動を起こし結局自分で調整して上書きする必要が出てくる場合があります。デザインから忠実に再現するようなコーディングを行う場合、Bootstrapのようなフレームワークを使うことはおすすめしません。自分でフレームワークを作っておくか、既存フレームワークをカスタマイズするなりして使用することをおすすめします。プラグインの使用アニメーションやお問い合わせフォームなど、自分で実装するのが難しい場合は既存のプラグインを使用するのも手です。以下、有名なプラグインを記載しておきます。・お問い合わせフォーム「MailForm01」slickなどメジャーなプラグインは既存のサイトでも使われていることが多いので、知識を身につけておくと修正案件で役立つことがあります。1つ問題として、プラグインは便利なのですが導入しすぎるとプラグイン同士が競合して動作がおかしくなることがあります。導入する場合はほどほどにしておきましょう。使うCSS、jsをまとめておく(ライブラリ化)フレームワークやプラグインと考え方が近いのですが、よく使うCSSやjQuery、jsをライブラリ化してまとめておくと便利です。以下、案件でよく出てくる、CSSとjQueryで表現すべき内容です。・タブ切り替え・要素のフェードインこの辺はほぼ毎回出てくるので、一度自分で作ったら使いまわしていきましょう。コーディング手順・やり方の見直しある程度周りの環境を整えたら、次は自分のコーディングを見直してみましょう。詳しい手順は以下の記事をご覧ください。簡単に説明すると、HTMLとCSSはいったりきたりせず一気に書きましょうということです。一点重要なのが、確認の頻度です。CSSでmargin-rightだけ調整したらセーブしてページを確認して、次はpaddingを調整したらまたセーブして確認して・・・このようにプロパティを1つ変えるたびに確認していたら効率が悪いです。上記は少し極端な例ですが、確認するときはある程度の分量を書いてからにする方がおすすめです。コードを書く根本的にコードを書く速度を上げるためには、コードを書き続けるのが一番です。コーディングに時間がかかる最も大きい要因は、わからない部分が多くて手が止まりがちだから。「CSSでどう書けば表現できるかわからない・・・」こういった迷いや、そのやり方を調べている時間が一番ロスに繋がります。この悩みを解決するのに一番手っ取り早いのは、コードを書きまくって経験を積むことです。実案件をこなし続けることができれば一番いいのですが、それが難しい方は「模写コーディング」を行いましょう。模写コーディングとは、既存のサイトを見ながら同一サイトを再現する手法です。下記記事にて模写コーディングについて触れています。以下、模写コーディングを行うための参考サイトです。「muuuu」こちらは縦に長いサイトを厳選して集めたサイトです。多くのジャンルのサイトが存在するため、ここから適当なサイトを見繕って模写コーディングをしてみましょう。ポイントは自分がすぐに作れそうなサイトではなく、少し技術的に難しそうなサイトを選ぶことです。「この部分どうやって実装するかわからないな・・・」という部分を調べながら作っていくことで、自分のコーディングレベルを上昇させることができます。自分でサイトを作り終えたとき、もしくはどうしてもわからない部分が出てきたときに元サイトのソースを検証で確認してみましょう。自分のコードと比較をすることで、新たな気づきを得られることもあります。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。