プログラミングを効率化するチートシートまとめ【Web制作】

プログラミングをしていると、「あれ、どうだったかな？」とリファレンスを確認する場面が結構出てきます。

そんな時に、サクッと確認できるのが「チートシート」です。




>?チート（cheat）とは、広義にはコンピュータゲームにおいて、本来とは異なる動作をさせる行為である。

>狭義には、ゲームを優位に進めるために制作者の意図しない動作をさせる不正行為（インチキ）を指す。制作者が意図して組み込んだ裏技や、改造行為そのものを含む場合もある。

>※引用　Wilipedia




Web上には素晴らしいチートシートが数多く公開されているので、Web制作に便利そうなチートシートをまとめてみました。




##HTML



##HTML Cheat Sheet

<img width="608" alt="スクリーンショット 2020-02-17 8.50.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/6437a45e-2f34-9654-57b0-6fe531b983c8.png">

PDFダウンロードが可能で、HTMLタグと実装のコードがまとめられたサイトです。

英語なので少しわかりにくいかも。

[HTML Cheat Sheet](https://digital.com/tools/html-cheatsheet/)



##CSS

###Flexboxのチートシート
![thumb_flexbox-cheat-sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/7a16bec5-7ecb-20e6-af38-9688105bae09.png)


→[日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

flexboxのチートシートといえば、Webクリエイターボックス様。

わかりやすく日本語化されていて、これ一つでOKかも。



###CSSセレクタのチートシート｜webliker

<img width="603" alt="スクリーンショット 2020-02-18 14.21.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/59684a32-551d-8eec-e846-350c1cf871c6.png">

→[CSSセレクタのチートシート｜webliker](https://webliker.info/css-selector-cheat-sheet/)


いつもお世話になっているwebliker様のセレクタチートシート

図解＋コピペ可なので、理解を深めるのに最適かも。

###CSS Alignment Cheatsheet

<img width="613" alt="スクリーンショット 2020-02-18 14.23.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/21e3c934-c3bb-a243-b514-bab9bc6803af.png">

→[CSS Alignment Cheatsheet](http://patrickbrosset.com/lab/2018-01-10-css-alignment-cheatsheet/)

コンテナの要素を揃えるテクニックをまとめたチートシートです。

要素を揃えるのに困ったら、とりあえずこれをみる。

###CSS Grid Cheatsheet


<img width="614" alt="スクリーンショット 2020-02-18 14.23.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/e69e2295-cd5d-558a-80e8-4869b716d320.png">

→[CSS Grid Cheatsheet](http://grid.malven.co/}

CSSGridについて簡潔にまとめられています。コピペ可能


###Sass Cheat Sheet

<img width="627" alt="スクリーンショット 2020-02-18 14.24.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/3833fd0f-93fb-54ce-b1b6-eef7e3f65d62.png">


→[Sass Cheat Sheet](https://devhints.io/sass)





##javascript

###Asynchronous JavaScript cheatsheet

<img width="613" alt="スクリーンショット 2020-02-18 14.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/bc47e0df-6811-eb14-d9e3-420f710d8f86.png">




→[Asynchronous JavaScript cheatsheet](https://github.com/frontarm/async-javascript-cheatsheet)

###jQuery cheatsheet

<img width="622" alt="スクリーンショット 2020-02-18 14.26.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/759b926e-a4a7-03e8-8dc9-53203de8a123.png">


→[jQuery cheatsheet](https://oscarotero.com/jquery/)





##その他

###WordPressチートシート|Webクリエイターボックス

![wordpress_cheatsheet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/680bfc08-be79-c702-8c6c-aaa489980b31.jpeg)


→[WordPressチートシート|Webクリエイターボックス](https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet)

Webクリエイターボックス様はWordPress構築に便利なチートシートも公開されています。PDFダウンロード可能です。




###FontAwesome CheatSheet

<img width="607" alt="スクリーンショット 2020-02-18 14.27.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/f0b27f36-8a02-1e24-3e7d-6c65acf8e779.png">


→[FontAwesome CheatSheet](https://fontawesome.com/cheatsheet)

FontAwesomeのアイコンを一覧で確認できるチートシート。




###Popular Screen Resolutions: Designing for All

<img width="1032" alt="スクリーンショット 2020-02-18 14.30.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/ef79d768-8fdf-b886-76cd-248b02dca118.png">


→Popular Screen Resolutions: Designing for All

iPhoneやAndroidなどのスマホの解像度がまとめられたサイト

iPhoneXRも掲載されているので、最新の情報に更新されている様子です。



##参考サイト

[Web制作者が備えておきたい最新版チートシートのまとめ](https://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-front-end-developer-2018.html)