忍者CODE｜未経験からWEB制作のプロを目指すオンラインプログラミングスクール

＼公式LINE登録で7大特典プレゼント🎉／ 今いちばん学ばれている「プログラミング」 でも初心者の多くが 「何から始めるか」で迷います。 そこで忍者CODEでは 初心者向け 7つの無料特典を公開中🔥 これからスキルを身につけたい人は まずここから👇 page.line.me/910smsyq

【保存推奨】 CSS初心者が混乱しやすい position 実は覚えるのはこの5つだけです！ ・static ・relative ・absolute ・fixed ・sticky UI実装でよく使うpositionの基本を 1枚図解にまとめました。

CSSレイアウトの基本は Box Model です。 構造はこの4つ。 ①content ②padding ③border ④margin この仕組みを理解すると CSSのレイアウトが一気にわかります。 初心者向けに CSS Box Modelを1枚図解にまとめました。 保存して見返してください。

【保存必須】 HTMLとCSSの違い、説明できますか？ Web制作はこの3つでできています。 HTML→ 構造 CSS→ デザイン JavaScript→ 動き 初心者向けに HTML × CSS の全体構造を1枚図解にしました。

CSSのレイアウトは Flexboxを理解すればほぼ解決します。 覚えるポイントは3つです！ ・flex-direction ・justify-content ・align-items 初心者向けにCSS Flexboxを1枚図解にまとめました。 保存して見返してください。

CSS初心者が一番混乱する margin と padding 違いはシンプルです。 margin → 外側の余白（※背景色は広がらない） padding → 内側の余白（※背景色が広がる） この2つを1枚図解にまとめました。 保存しておいてください。

【制作過程③】 先日投稿した野球人生ゲーム ninjacodee.github.io/game_baseball-… 3Dベースにロードを修正 AI「修正」→マス移動直る＆イベント停止 AI「修正」→イベント直る＆CPU停止 AIのあるある 修正したら別の場所が壊れて、修正地獄・・・ プログラミング知識があると原因をすぐ特定できます。

【保存版】 CSSアニメーションの基礎を 1枚でまとめました。 ・どこが動いてる？ ・何を書けばいい？ ・どうやって動く？ 初心者はこれだけ見ればOK👇

CSSアニメーションって難しそうだけど 実はこれだけで作れます👇 ・keyframes ・animation ・transform こういう無限ループ系って なんでこんなに見ちゃうんだろう…

CSSアニメーションって難しそう？ まずはこの7個だけ理解すればOK。 ✔ scale ✔ translate ✔ rotate ✔ opacity ✔ position ✔ delay ✔ text-shadow この組み合わせだけでほぼ全部作れます。 保存してあとで見返してください。

【制作過程②】 一昨日投稿した野球人生ゲーム ninjacodee.github.io/game_baseball-… 3D変更時のものがこちら 前半：直後のもの 後半：3Dをベースに改善 AI「修正」→マス移動ずれ AI「修正」→イベント処理バグ エンジニア→「JavaScript1行」で解決 AI × プログラミング この組み合わせが一番強い。

CSSの border-radius なんとなく使っていませんか？ 実は覚えることはシンプルです。 ・四角の角を丸くする ・4つの角を個別指定できる ・50%で円形になる 初心者向けにCSS border-radiusの基本を 1枚図解にまとめました。 保存して後で見返せます。

CSSのシャドウ、毎回感覚で調整してる人へ。 box-shadow は 横 / 縦 / ぼかし / 広がり / 色 この順で見れば理解できます。 カードUIやボタンでよく使う シャドウの基本を1枚にまとめました。 保存推奨です。

昨日投稿した野球人生ゲーム ninjacodee.github.io/game_baseball-… 一番最初に出来上がったものがこちら 前半の動画：最初にできたもの 後半の動画：修正して20％程度完成 AI「修正」→サイコロ位置ずれ AI「修正」→表示崩れ エンジニア→「CSS1行」で解決 AI × プログラミング この組み合わせが一番強い。

AIを一部使って野球人生ゲーム作ってみました。 ninjacodee.github.io/game_baseball-… ただ実際に作ると ・画面幅の調整 ・スマホUI ・バグ修正 AIだと何度も修正が必要。 こういう部分は知識がある人が必要になります。 AI × プログラミング この組み合わせがこれから一番強いです。

【JavaScript完全理解マップ（まとめ）】 JavaScriptを理解するには4つをつなげて理解しよう！ ① 設計 ② 状態管理 ③ 非同期処理 ④ イベントループ この1枚を保存しておくと、 JSの全体像がかなり見えやすくなります。

ちょっと遊び心をいれたCSSアニメーション 開発コードは、HTML,CSSのみ

JavaScriptの非同期処理はこの仕組みで動いています。 Call Stack→Web API→Queue待機 Promise → Microtask Queue setTimeout → Task Queue Event Loopは Microtask → Task の順で処理します。 保存推奨👇

JavaScriptアプリはこの構造で動いています。 ユーザー操作 ↓ 処理 ↓ state更新 ↓ UI更新 この図を理解すると JSアプリの仕組みが一気にわかります。 保存推奨👇

【保存推奨】 JavaScriptはフォルダ設計で9割決まる。 初心者：「main.jsに全部書く」 　↕ 実務：責務ごとに分ける この構成だけ覚えてください👇