せっかくHTMLやCSSを勉強しても、覚えることがたくさんあって全部はさすがに覚えきれないと感じることもあります。

HTMLやCSSも常にアップデートされており、全てを完全に記憶しておくことは、長年WEB制作の仕事をしていても難しいのが現状です。

ネット上で検索すると、必要な知りたい情報はすぐに手に入れることもできますが、難しい内容になってくると、探し方も見つけた内容も複雑になってきます。

そこで今回は、「チートシート（カンペ）」を作っておくことをお勧めしたいと思います。

なぜチートシートが必要なのか…

チートシートというのは、日本語に訳すと「カンニングペーパー」という意味になります。

学校のテストなどでは、カンニングペーパーはいけないこととされていますが、それは適正な学力を測ることができなくなってしまうからですね。

お仕事をする上では、いかに効率良く、正確に作業を完了させるかが重要であるため、チートシートは必要なものと捉えることができます。

よくテレビやドラマなどで、カンペというものは使われていますよね？

それは、カンペを使うことで番組の撮影がスムーズに進行するからに他なりません。

我々のホームページ制作のお仕事もそれは同じで、制作作業におけるカンペの役割をチートシートという形で用意することで、作業を円滑に進めることができるわけです。

チートシート作成をオススメする理由

それでは、チートシートを作成しておくとどんなメリットがあるのでしょうか？

以下に、チートシート作成をオススメする理由を挙げていきます。

ネット検索で調べる手間が省ける

自分が必要とする情報のみをまとめておくことができるので、必要な情報はチートシートから探すだけで済むことになります。

新しい情報を手に入れたら、内容を精査しながらチートシートに追加していきましょう！

そうすることで、自分専用のマニュアルを手に入れることができます。

調べたものを自分の中に落とし込める

ネットで調べたり教えてもらった情報や技術は、受け売りのままコピペして終わりだと、なぜそうなるのか、応用する時など、使い回す際にまた改めて調べ直す必要が出てきたりします。

新たに手に入れた情報をチートシートに落とし込む際に、自分なりに噛み砕いて理解してから活用すると、次に使い回す時に応用が効くようになります。

チートシートを作成する時には、ぜひコピペして終わりではなく、なぜそういう記述になっているのか、他の使い方があるのかなど、少しで良いので深掘りしてみると技術の向上に役立つと思います。

チートシートの具体例について

それでは、私が実際に使っているチートシートの一部を紹介していきますので、参考にしていただければ幸いです。

今回は、CSSでよく使う設定を例にしてご紹介します。

/* marker */
.marker {
	background: linear-gradient(transparent 60%, #ff0 60%, #ff0);
}

/* 縦方向で中央揃え
親要素には、position: relative; */
.vertical_center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

簡単に説明すると、.markerセレクタは、蛍光ペンでラインを引いたようなマーカーを文中につける効果が適用されます。

もうひとつの.vertical_centerセレクタは、一般的なブロックとして振る舞う要素に対して、縦方向で中央揃えする効果を適用します。

他にも通常では画像することが多い場面でもCSSだけで表現できる場合があるので、そのような効果を表現する際に、チートシートとしてCSSを記録しておくと、ネット上でわざわざ検索して探す必要が無くなります。

また、ある程度どういう仕組みで実装されているのかを自分の中に落とし込んでおくと、例えば上記の縦方向に中央揃えするものを「縦方向に上から1/3の位置に配置」ということもできますね。

まとめ

チートシート、いわゆるカンペは、学生時代の勉強・テストでは不正になってしまいますが、仕事を効率化する際には有効な手段となります。

カンペとか、カンニングペーパーというと、悪いことをしているような罪悪感を感じることがあるかもしれませんが、「チートシート」という言葉に変えるだけで、その罪悪感も少しは薄れると思います。

是非とも仕事の効率化を進めるために、チートシートを作成してみてはいかがでしょうか？