構造を作る
HTMLで情報の意味と順序を整理し、Webページの土台を組み立てます。
FRONTEND COURSE
フロントエンドコース
見た目と操作を、コードで形にする。
HTML・CSSの基礎から、レイアウト、アニメーション、JavaScriptによる動きまで。使いやすいWebページを段階的に作ります。
対象：Web制作を基礎から学びたい方／コーディングと画面の動きを身につけたい方
最初の講座から始める
WHAT YOU WILL LEARN
このコースで学ぶこと
見た目だけでなく、情報の構造と使いやすい操作を一緒に学びます。
見た目を整える
CSSで余白、色、レイアウトを調整し、画面幅に応じた表示を作ります。
操作と動きを加える
JavaScriptとDOM操作で、クリックや入力に反応する画面を実装します。
RECOMMENDED FOR
こんな方におすすめ
これからWeb制作を始める方にも、基礎を整理し直したい方にも適した流れです。
- Webページを自分で組み立てられるようになりたい方
- HTML・CSSを基礎から順に学び直したい方
- JavaScriptで操作できる画面を作りたい方
- デザインを実装へ落とし込む力を身につけたい方
LEARNING FLOW
学習の流れ
設計、構造、見た目、操作の順に、役割を分けて身につけます。
-
01
設計を確認する
Figmaでワイヤーフレームと画面構造を整理します。
-
02
HTMLで構造を作る
情報に意味を持たせ、ページの土台を組み立てます。
-
03
CSSで整える
基本から設計、実践表現へ段階的に進みます。
-
04
JavaScriptで動かす
基礎、DOM操作、応用を通して操作性を加えます。
COURSES
含まれる講座
現在公開されている教材を、学習の役割ごとに整理しています。
DESIGN
Figma基礎
ワイヤーフレームとUI設計の基礎を学び、作る前に画面構造を整理します。
講座を見るHTML
HTML
見出しや文章、リンクなど、Webページの構造と中身を組み立てます。
講座を見るCSS
CSS基礎
よく使うプロパティを中心に、見た目とレイアウトの基本を学びます。
講座を見るCSS
CSS-CLASS設計
実務で扱いやすいクラス名と、整理されたCSSの設計方法を身につけます。
講座を見るCSS
CSS応用と実践
グラデーションやアニメーションを使い、表現と操作感を高めます。
講座を見るJS
JavaScript基礎
条件分岐や繰り返しなど、動きを作るための基本的な考え方を学びます。
講座を見るJS
JavaScriptとDOM
DOMを操作し、画面上の要素が反応するインタラクションを作ります。
講座を見るJS
JavaScript実践｜Webサイトに動きと機能を追加する
基礎とDOM操作を応用し、実践的でデザイン性のある動きを実装します。
講座を見るSTART LEARNING
画面の設計から、動きの実装まで始めましょう。
初めての方はFigma基礎から。設計ツールを使わない場合は、HTML基礎から進めることもできます。