簡単だけど効果大！HTML・CSSコーディングの効率化

コーディングを速くしたい人

Web制作にも少し慣れてきたけど、どうしてもコーディングに時間がかかってしまって時給換算するとアルバイト以下に。。。
簡単に導入できて、コーディングを効率化できるツールとかないのかなー？

こんな疑問にお答えします。

僕は現役でWeb制作副業をやっているフロントエンドエンジニアです。
ココナラでは最高のプラチナランクを獲得しています。

Web制作に慣れてきた頃に直面する問題が『時間単価の低さ』ですよね。

特にコーダーはページ単価を上げすぎてしまう依頼自体があまり来なくなってしまうので、1件にかける時間を少しでも減らして時間単価を上げておきたいところです。

そんな人におすすめなのが、簡単に導入できて大きな効果がある『Emmet』と『Sass』というツールです。

この記事では、Web制作の時間単価を少しでも上げたい人に向けて、コーディングを効率化するEmmetとSassというツールの導入方法から使い方までを紹介します。

Emmetを使ってコーディングを効率化しよう
Sassを使ってコーディングを効率化しよう
まとめ：HTML・CSSコーディングを簡単に効率化するツール

Emmetを使ってコーディングを効率化しよう

まずは超簡単に導入できて、かつ、コーディングを超高速化できるEmmetから紹介していきます。

Emmetとは？

EmmetはHTML・CSSコーディングを効率化するエディターの拡張機能です。

例えば以下のようなHTMLコード。

<div class="main">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Emmetを使えば、これだけ記述してtabを押すだけで書けちゃいます。

div.main>ul>li*3

ついでにCSSの方も。例えば以下のようなコード。

border-top: 1px solid #000;

Emmetを使えばこれだけ。

bdt

どうですか？これならコーディングをかなり効率化できそうでしょ？

はっきり言ってこれ使わない手はないです。

慣れればもう元には戻れない体になることでしょう！

では、さっそくこのEmmetを導入していきましょう。

Emmetの導入手順

Emmetはエディターの拡張機能なので、導入できるエディターとできないエディターがあります。

Emmetを導入できるのは以下のエディターです。

Emmetを導入できるエディター

Visual Studio Code（VSCode）
Adobe Dreamweaver
Atom
Brackets
Sublime

「VSCode」と「Adobe Dreamweaver」はEmmetを標準搭載していて、それ以外のエディターはプラグインをインストールすることで使えるようになります。

もし上記のエディター以外を使っている場合は、この際に乗り換えてしまいましょう。

Emmetを使えるエディターの方が絶対に時間効率がアップしますからね。

おすすめなのは『VS Code』です。

AtomでSassを導入するのはちょっとめんどくさいのですが、VS Codeなら楽ちんです。

以下では、おそらく使っている人も多いであろうAtomでのEmmet導入手順を解説します。

AtomでのEmmet導入手順

まずはAtomを立ち上げて、メニューの「Atom」ー「環境設定」から設定画面を開きます。

Atomのインストールがまだの人はこちらから。

続いて、「インストール」をクリックします。

検索窓に「emmet」と入力します。

おそらく一番上に出てくるであろうemmetというプラグインの「Install」をクリックします。

以上これだけ！

設定も特にいじらなくてもOKです。

Emmetの使い方

続いてはEmmetの使い方です。

いくつか代表的なものを紹介しますので、実際に自分でも試してみてください！

HTMLでのEmmetの使い方

要素を入れ子で書く場合

変換前

ul>li

変換後

<ul>
  <li></li>
</ul>

要素を兄弟関係で書く場合

変換前

div+p

変換後

<div></div>
<p></p>

同じ要素を複数書く場合

変換前

ul>li*2

変換後

<ul>
  <li></li>
  <li></li>
</ul>

ID名を指定する場合

変換前

div#header

変換後

<div id="header"></div>

クラス名を指定する場合

変換前

div.footer

変換後

<div class="footer"></div>

テキストを書く場合

変換前

a{テキスト}

変換後

<a href="">テキスト</a>

CSSでのEmmetの使い方

CSSを書くときはプロパティの頭文字と値を書くのが基本です。

例えば、

mt20　⇨　margin-top: 20px;
bgc#f　⇨　background-color: #fff;

のような感じ。

複数の値を入力したいときは、

m1-2-3-4　⇨　margin: 1px 2px 3px 4px;

となります。

いろんなプロパティがあるので全部は紹介できませんが、使いながら少しずつ覚えていってください。

こちらのEmmet公式のドキュメンテーションが参考になります。

Sassを使ってコーディングを効率化しよう

もうすでにEmmetでお腹いっぱいかもしれませんが、Sassもコーディングを大きく効率化できるのでこちらも紹介してしまいます。

Sassとは？

Sass（サス）はCSSのメタ言語で、ざっくり言うとCSSを効率的に書くための拡張機能みたいなものです。

今では業界デファクトスタンダードになりつつあるほど普及しています。

Sassを使う主なメリットが以下です。

Sassを使う主なメリット

コードを再利用できる
ベンダープレフィックスを自動で付けてくれる
複数のSassファイルを1つのCSSファイルにまとめてくれる
CSSファイルを圧縮できる

上記のとおり、メリットがいっぱいなので導入するしかないですね！

Sassではscssという拡張子のファイルに記述していくのですが、HTMLファイルから直接読み込めないのでscssファイルからcssファイルに変換するためのコンパイルが必要になります。

コンパイルと聞くと難しそうに思えますが、自動でやってくれるので難しいことはないです。

では、導入手順を解説していきます。

Sassの導入手順

Sassもさきほど示したエディタすべてで使えます。

Sassを導入できるエディター

Visual Studio Code（VSCode）
Adobe Dreamweaver
Atom
Brackets
Sublime

ここではVSCodeとAtomでの導入手順を紹介します。

VSCodeでのSassの導入手順

まずはVSCodeを立ち上げて、拡張機能を開きます。

VSCodeのインストールがまだの人はこちらから。

拡張機能を開いたら、検索窓に「dartjs」と入力します。

「DartJS Sass Compiler and Sass Watcher」というプラグインが表示されるので、これをインストールします。

以上、これでVSCodeでSassが使えるようになりました。

AtomでのSassの導入手順

AtomでSassを使うためにはnode-sassというものをインストールする必要があります。

まずはnode.jsの公式サイトからnode.jsをダウンロードしてインストールします。

続いて、ターミナルを開きます。

Node.jsとnpmが正しくインストールされているか確認します。
ターミナルに以下を入力し、enterを押します。

node -v

バージョン情報が出れば、正しくインストールされています。

さらに以下を入力し、enterを押します。

npm -v

続いて、以下のコードを入力しnode-sassをインストールします。

npm install -g node-sass

もしアクセス権限のエラーが出たら、こちらの記事を参考に解決してください。

こちらも以下のコードを入力し正しくインストールされていることを確認します。

node-sass -v

続いて、Atomの設定です。

Atomを立ち上げて、メニューの「Atom」ー「環境設定」から設定画面を開きます。

Atomのインストールがまだの人はこちらから。

続いて、「インストール」をクリックします。

検索窓に「sass-autocompile」と入力します。

一番上に出てくる「sass-autocompile」というプラグインの「Install」をクリックします。

これで完了です！

Sassの使い方

インストールさえできれば、Sassの使い方は簡単。

style.scssファイルを作りこれを保存すれば、自動的にコンパイルされてstyle.cssやstyle.min.cssファイルなどが作成されます。

HTMLファイルからCSSを読み込む場合は、圧縮されたstyle.min.cssファイルを読み込むのがオススメです。

Sassには色々な機能がありますが、代表的なのが以下の3つ。

Sassの代表的な機能

セレクターの親子関係を入れ子にする
変数で値を使い回す
スタイルを使い回す

それぞれ簡単な例を示します。

セレクタの親子関係を入れ子にする

変換前

#main {
  margin-top: 100px;
  h2 {
    font-size: 4rem;
  }
  ul {
    list-style: none;
    li {
      font-size: 2rem;
    }
  }
}

変換後

#main {
  margin-top: 100px;
}
#main h2 {
  font-size: 4rem;
}
#main ul {
  list-style: none;
}
#main ul li {
  font-size: 2rem;
}

変数で値を使い回す

変換前

$baseColor: #ebe7e1;
$subColor: #937f65;
$fontColor: #424242;

body {
  background-color: $baseColor;
  color: $fontColor;
}
h2 {
  color: $subColor;
}

変換後

body {
  background-color: #ebe7e1;
  color: #424242;
}
h2 {
  color: #937f65;
}

スタイルを使い回す

変換前

@mixin button($color: blue) {
  width: 200px;
  height: 50px;
  background-color: $color;
}

.button1 {
  @include button;
}
.button2 {
  @include button(red);
}

変換後

.button1 {
  width: 200px;
  height: 50px;
  background-color: blue;
}

.button2 {
  width: 200px;
  height: 50px;
  background-color: red;
}

とまぁ、こんな感じ。

これだけでも十分コーディングを効率化できるのですが、ここで紹介したのはほんの一部の機能です。

Sassにはさらにいろいろな機能があるので、たくさんの機能を知りたい人はこちらの本で学習するのがオススメです。

リンク

まとめ：HTML・CSSコーディングを簡単に効率化するツール

EmmetとSassを使えばコーディングを簡単に効率化できる
Emmetは単純に打つ手間を最小限にしてコーディングを効率化する
Sassは打つ手間を削減するとともにコードを使い回すことでコーディングを効率化する

以上、HTML・CSSコーディングを簡単に効率化するツールとしてEmmetとSassを紹介しました。

特にSassは機能も多く慣れるまでは少し大変かもしれません。

でも、CSSコーディングをかなり効率化できるため、この機会に早めに慣れておくといいですよ。

では今回はこの辺で！