Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
32
Help us understand the problem. What is going on with this article?
@kei_1011

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

More than 1 year has passed since last update.

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

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

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

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

※引用 Wilipedia

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

HTML

HTML Cheat Sheet

スクリーンショット 2020-02-17 8.50.53.png

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

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

HTML Cheat Sheet

CSS

Flexboxのチートシート

thumb_flexbox-cheat-sheet.png

日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

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

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

CSSセレクタのチートシート|webliker

スクリーンショット 2020-02-18 14.21.59.png

CSSセレクタのチートシート|webliker

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

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

CSS Alignment Cheatsheet

スクリーンショット 2020-02-18 14.23.01.png

CSS Alignment Cheatsheet

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

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

CSS Grid Cheatsheet

スクリーンショット 2020-02-18 14.23.45.png

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

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

Sass Cheat Sheet

スクリーンショット 2020-02-18 14.24.18.png

Sass Cheat Sheet

javascript

Asynchronous JavaScript cheatsheet

スクリーンショット 2020-02-18 14.25.14.png

Asynchronous JavaScript cheatsheet

jQuery cheatsheet

スクリーンショット 2020-02-18 14.26.26.png

jQuery cheatsheet

その他

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

wordpress_cheatsheet.jpg

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

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

FontAwesome CheatSheet

スクリーンショット 2020-02-18 14.27.13.png

FontAwesome CheatSheet

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

Popular Screen Resolutions: Designing for All

スクリーンショット 2020-02-18 14.30.21.png

→Popular Screen Resolutions: Designing for All

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

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

参考サイト

Web制作者が備えておきたい最新版チートシートのまとめ

32
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kei_1011
Qiita はコードメモに使ってます。 総合病院(医療事務)→Web制作会社(プログラマー)→医療系ベンチャー(データアナリスト) Web制作に関するTipsなど Note → https://note.com/kei_01011 データ分析ブログ → https://kei01011.hatenablog.com/

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
32
Help us understand the problem. What is going on with this article?