更新日: 2022 / 09 / 08

Web制作初心者が効率よくコーディングを学べるチートシートまとめ

カテゴリー: coding

イケてるWebデザイナーさんの多くがフロントエンドコーディングのお供に使っているチートシートをHTMLからBootstrap5、Reactまでガッツリ集めてみました。

新しい言語やフレームワークを覚えるのはすごく大変なので最初はチートシート見ながらどんなタグや関数があったかを簡単に探し当てることができます。

フロントエンドコーディングに必要なチートシートを集めたのでぜひ活用してみてください。

  1. フロントエンドコーディングのチートシート

    1. HTML
    2. CSS
    3. Javascript
    4. Markdown
  2. コーディングスピードを上げるチートシート

    1. Emmet
  3. フレームワークのチートシート

    1. Bootstrap4,5
    2. TailwindCSS
    3. SCSS
    4. jQuery
    5. React
  4. まとめ

フロントエンドコーディングのチートシート

基本的なコーディングのためのチートシートがこちら。

Webコーディング初心者の方はまずこのチートシートを使ってWebページの構築方法を効率よく覚えていきましょう。

HTML

フロントエンドコーディングのチートシート HTML

HTMLはホームページ制作でまず最初にやるところ。ここをできるだけはやく攻略できればCSSやJavascriptを使ったイケてるデザインのWebサイトをサクサク作れるようになります。

-> 「HTMLのチートシートを見る

CSS

フロントエンドコーディングのチートシートト CSS

CSSはホームページのデザインに必要なもの。PhotoshopやFigmaのようなデザインツールで作られたレイアウトやスタイルは全てCSSで作ることができます。

-> 「CSSのチートシートを見る

Javascript

フロントエンドコーディングのチートシート Javascript

Javascriptはホームページに動きを加えたり、ユーザーのマウス操作にあわせて画面表示をコントロールすることができます。

参考サイトギャラリーで紹介されるようなWebサイトにあるアニメーションもJavascriptを使えば実装できます。

-> 「Javascriptのチートシートを見る

Markdown

フロントエンドコーディングのチートシート Markdown

Markdown(マークダウン)はホームページ作成とは直接関係ないですが、noteやWordpressなどMarkdownを使って記事を作成できます。

HTMLタグを使うよりも効率よくコンテンツを作成できるようになります。

-> 「Markdownのチートシートを見る

コーディングスピードを上げるチートシート

HTMLタグやCSSプロパティを覚えてもコーディングスピードが遅いといつまでたってもサイトを作れません。

コードエディターのショートカットやコードの短縮系で記述できるEmmetも使えるようにしておくとかなりスピードアップできます。

Emmet

コーディングスピードを上げるチートシート Emmet

EmmentはHTMLコードやCSSコードを短縮系で記述できるようになる非常に便利なツール。

これを使うとコーディングスピードが間違いなく上がるので本格的にWebデザイナーを目指すならおすすめ。

-> 「Emmetのチートシートを見る

フレームワークのチートシート

最後にフロントエンドコーディングでよく使われるフレームワークのチートシートを紹介します。

Webサイトに使われるCSSフレームワークやアプリに使えるJavascriptフレームワークも覚えればフロントエンドはばっちりです。

Bootstrap4,5

フレームワークのチートシート Bootstrap4,5

Bootstrapはレスポンシブデザインに対応したホームページを構築する場合によく使われるフレームワーク。

HTMLタグにclassを付けるだけでグリッドレイアウトを簡単に作成することができます。

-> 「Bootstrap4,5のチートシートを見る

TailwindCSS

フレームワークのチートシート TailwindCSS

TailwindCSSは最近注目されているCSSフレームワークで、CSSコードを一切書かずにHTMLタグのclassだけでページのデザインができるようになります。

Reactのようなコンポーネント単位での実装ができるならこちらのTailwindでアプリのUIを簡単に作成できます。

-> 「TailwindCSSのチートシートを見る

SCSS

フレームワークのチートシート SCSS

SCSSを使うと変数を使って一括で値を変更したり、CSSコードの再利用ができるようになります。

CSSで書くよりも便利で早くコーディングできるので使用に制限がない限りSCSSでスタイルを書くことが多いです。

-> 「SCSSのチートシートを見る

jQuery

フレームワークのチートシート jQuery

jQueryはJavascriptのコードをかなり短いコードで書けるようになるフレームワーク。

最近はReactやVueを使うことが多いですが、まだまだ現役のサイトも多いので忘れたときのためにチートシートがあると便利。

-> 「jQueryのチートシートを見る

React

フレームワークのチートシート React

ReactはWebアプリのUIを作成するときによく使われるフレームワーク。

Webデザイナーにとっては敷居が高いかもしれませんが、FigmaからReactコードに変換したりReactのコードで作ったUIをStorybookで管理することも多くなっているので覚えておいて損はありません。

-> 「Reactのチートシートを見る

まとめ

コーディングをはじめたばかりの頃は覚えるタグや構文がたくさんあって大変ですが、チートシートを使うと使えるタグ全体を確認しながら必要なタグを選ぶことができるようになります。

慣れればチートシートなしでもコーディングできるのでそれまではチートシートを使って効率よくタグを覚えることができます。