Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ

f:id:syofuso:20170712151818j:plain
HTML/CSSを書くとき、「あれ、これ何だったっけ?」ってことがありますよね。私はしょっちゅうありますw
そういうとき、ちらっとチートシート(カンペ)を見て効率よく作業を進められるよう、便利なチートシートをまとめました。
似たような記事は既にたくさんありますが、リンク切れになっていたりするので、自分用に便利なチートシートをまとめ直してみます。

HTML

HTMLクィックリファレンス

f:id:syofuso:20170712142225p:plain
www.htmq.com
老舗ですね。HTML他CSSの早見表、HTML/CSSの基本があります。とりあえず困ったときはココ!

HTML5 タグ★チートシート(PDF版/画像版)

f:id:syofuso:20170712141248p:plain
HTML5 タグ★チートシート - @IT
日本語で書かれたHTMLのタグ一覧とその概要がまとめられたチートシートです。

CSS

スタイルシートリファレンス

f:id:syofuso:20170712142239p:plain
スタイルシートリファレンス(ABC順)
HTMLクィックリファレンスのCSSのページ。CSS3で追加されたプロパティなどは以下をどうぞ。
www.htmq.com

CSS3プロパティ&ブラウザ対応一覧

f:id:syofuso:20170712142908p:plain
ebisu.com
『HTML5&CSS3デザインブック』などを書かれているエビスコムさんのサイト。CSS3で新しく追加されたプロパティとCSS2.1からのプロパティで、CSS3で機能が追加されたものを分けて、各ブラウザでの対応状況がまとめられています。

CSS初期値一覧なチートシート

f:id:syofuso:20170712144137p:plain
qiita.com
CSSの値を初期値に戻したい、リセットしたいときに便利な初期値一覧です。

CSS Flexboxチートシート

f:id:syofuso:20170712143459p:plain
日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
Webクリエイターボックスさん制作のFlexboxのチートシート。Flexboxを実装する機会も増えていると思いますので、是非是非。

CSS3 Media Queriesの書き方

f:id:syofuso:20170712144056p:plain
webdesignrecipes.com
レスポンシブデザインでMedia Queriesを書くときに参考になる記事です。ブレイクポイントをどうするかは状況によると思いますが、基本的な書き方をベースにすれば書きやすいと思います。


以上、主に日本語で書かれたチートシート、参考記事をまとめました。
他の勉強でもそうですが、すべてを一気に暗記しようとすると大変です。「どこに何が書いてるか」把握することが勉強を進めていく上で大事だと思います。
私もまだまだ勉強不足なので、日々精進していきたいですね。
HTML/CSS初学者さん向けの記事:
design.syofuso.com
design.syofuso.com
design.syofuso.com