HTML/CSSを高速で書くならこれを使え！

Emmet

HTMLやCSSを早く書くならこれを必ず導入しましょう。
導入にどんだけ時間がかかっても、その後に受けられる高速コーディングのメリットは、
すぐにその作業時間分を短縮してくれます。
これを使わなければ、大切な時間を浪費してしまいます。

Emmetにはショートコードというのが用意されていて、
ルールに従ってコードを書くと、それをHTMLやCSSの形で展開してくれます。

例えば、

ul>(li>img)*5

とすると、

<ul>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
</ul>

と展開されます。
これだけのコードの省略は、制作にとってはとても強い味方。
ルールを覚えるまではなんとなくおぼつかない感じで面倒に感じると思いますが、
どんな技術であれはじめはそんなもの。
難しいものじゃないので、ちょっと覚えるだけで劇的にコーディングが速くなります。

このEmmetはCSSも早く書けるようにしてくれます。

bgc:#fff

を展開すると

background-color:#fff;

となります。
慣れてしまったらコードを書くのがむちゃくちゃ速くなります。

文章で書くより動画見たほうが早い。
これ覚えちゃったらもう普通のコードの書き方には戻れません。

CSSを書くときはこれを使え！

SASS

SASSって何かというとCSSをもっと効率よく書くためのもの。

.section{
	font-size:0px;

	.block{
		color:#ff0;

		.item{
			float:left;
		}
	}
}

こんな感じでセレクタを入れ子にできる。
セレクタを入れ子にしたら何がいいかというと、
本来はこんな風に書くよね。

.section{
	font-size:0px;
}

.section .block{
	color:#ff0;
}

.section .block .item{
	float:left;
}

.sectionっていうのを何度も書いているでしょ。
プロジェクトが大きくなったら、何十回と同じセレクタを書かないといけない。
しかも、セレクタ名が変わったら全ての箇所を変更しないといけない。
.section ⇒ .article
に変わったら、上の例だと通常は3か所変更することになるけれど、
SASSだと、

.article{
	font-size:0px;

	.block{
		color:#ff0;

		.item{
			float:left;
		}
	}
}

たった１カ所の変更でいい。
３か所くらいならいいけれど、何十カ所もあったらそれこそ大変。

また、入れ子にすることで直観的にセレクタの構造がわかる。
通常の書き方だと同じセレクタ名を何度も書くことになるので、むちゃくちゃ見にくい。
その点、SASSを使えば同じセレクタは何度も出てこないし、きちんとインデントするとその構造が手に取るようにわかる。
書くのが簡単になり、可読性が向上し、変更も簡単になる。
つまり、運用がこれまでよりも劇的に良くなります。
SASSを使わないでCSS書くなんて、今ではもうありえないです。

こういったデメリットはあるものの、
制作会社にとって時間は金なので、SASSを使ってCSSのコーディング効率を上げています。

HTML/CSSのデバッグはこれ！

ホームページのコードを変更するときに、特定の要素がどのようなふるまいをしているかを簡単に調べることができます。
ブラウザ上でHTMLやCSSを細かくチェックできるので、不具合の原因を見つけたりコードの改善によく使います。

Chrome、FireFox、InternetExplorerそれぞれに同じようなツールがついているので、
それぞれのツールの呼び出し方を紹介します。