ホームページ制作で起業を考えている人必見!プロも使うHTML/CSSコーディングに差をつける3つのツール。


WEB制作の現場ではいかに早くコードを書けるかというのが重要になります。
ホームページの制作ってほぼ人件費なので、早く正確にコードが書けるっていうのはそのまま利益につながります。
なので、制作会社はそのための工夫をいろいろとしているのですが、
プロが使っている圧倒的にスピードが上がるツールやサービスを紹介します。
プロが使っていると言えば聞こえはいいが、だれでも使えるものばかりです。

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

Emmet
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

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;
		}
	}
}

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

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

SASSのデメリット

超便利なSASS。
僕の場合はこれがないとCSS書くのがスーパーのろまになってしまうほど重宝しているものですが、
SASSに関してはデメリットもあります。
SASSの書き方そのものはCSSではないので、
SASSファイル → CSSファイル
として開発環境上でCSSとして動くように変換します。
そのため、元のSASSファイルがとても重要になります。
このやり方で作っていると、CSSファイルを直接触ることがありませんが、
お客様に納品する場合とか、SASSの環境が無い場所で変更をしようと思うと注意が必要になります。

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

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

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

HTMLやCSSのコードをその場で触れる

HTMLデバッガー
その場でHTMLやCSSを変更することもできます。
実際のファイルは書き換わらないで、ブラウザの上だけですぐに変更を確認できます。
デバッガでブラウザ上で変更レイアウト崩れの不具合を見つけたり、フォントサイズやマージンの調整など細やかにできます。
ブラウザ上である程度の目処をつけて、コードに反映することも多いです。

スマホでの表示も確認できる

スマートフォン対応する場合に、実際にスマートフォンで確認するのはなかなか面倒くさいです。
全てのデバイスをそろえるわけにもいかないので、まずはブラウザ上で確認しましょう。
デベロッパーツールでは、各種サイズのデバイスでの表示を簡単にシミュレーションできます。
最終的には実機で確認する必要がありますが、大まかな対応はこれがあれば十分!
スマートフォン、タブレットでの画面表示確認

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

Chromeのデベロッパーツール

Chromeでは、キーボードのF12を押すとデベロッパーツールが開きます。
もしくは、Chrome右上メニューよりデベロッパーツールを呼び出します。
Chromeデベロッパーツール

FireFoxの開発ツール

FireFoxでも、キーボードのF12を押すと開発ーツールが開きます。
もしくは、FireFox右上メニューより開発ツールを呼び出します。
FireFoxの開発ーツール

InternetExploreの開発者ツール

InternetExploreも同じくキーボードのF12を押すと開発者ツールが開きます。
もしくは、InternetExplore右上メニューより開発者ツールを呼び出します。
InternetExploreの開発者ツール

知らなかったら損するものばかりです。
決してマイナーなものではなく、メジャーなものばかりなので、
使い方などに迷った場合も、インターネット上にあふれるほど情報があるので安心。
ソースコードを書くのに時間を使うなんてもったいない!できればそう言った作業はさっさと終わらせてしまいたい。
ツールを有効に使って、ホームページ制作をもっと効率よくしましょう。

大阪のホームページ制作会社YCOMの制作サービスのご紹介