<CodeLearn/>

プログラミングを学ぼう

HTML、CSS、JavaScriptの基礎をブラウザ上で学べるインタラクティブ学習アプリ。 コードを書いて、すぐに結果を確認しながら学びましょう。

学習ロードマップ

3つの言語を順番に学んでいきます

1
2
3
HTML{ }

Webの骨格をつくる言語

学習を始める

HTMLはWebページの構造を定義するマークアップ言語です。見出し、段落、画像、リンクなどの要素をタグで囲んで記述します。すべてのWebサイトの土台となる、最初に学ぶべき言語です。

学べること

  • ✓HTMLの基本構造（DOCTYPE、html、head、body）
  • ✓テキスト要素（見出し、段落、リスト）
  • ✓リンクと画像の埋め込み
  • ✓フォームとユーザー入力
  • ✓セマンティックHTML（header、nav、main、footer）

コード例

<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これが私の最初のWebページです。</p>
  </body>
</html>
CSS{ ; }

Webを美しくデザインする言語

学習を始める

CSSはWebページの見た目をコントロールするスタイルシート言語です。色、フォント、レイアウト、アニメーションなど、ページの視覚的な表現をすべてCSSで指定します。HTMLで作った骨格に、デザインという服を着せる役割です。

学べること

  • ✓セレクタとプロパティの基本
  • ✓色、フォント、テキストのスタイリング
  • ✓ボックスモデル（margin、padding、border）
  • ✓Flexbox/Gridによるレイアウト
  • ✓レスポンシブデザイン（メディアクエリ）

コード例

body {
  font-family: sans-serif;
  background-color: #1a1a2e;
  color: #eaeaea;
}

h1 {
  color: #6c5ce7;
  font-size: 2rem;
  text-align: center;
}

.card {
  background: #16213e;
  border-radius: 12px;
  padding: 20px;
}
JavaScript( )

Webに動きと知能を与える言語

学習を始める

JavaScriptはWebページに動きとインタラクティブ性を加えるプログラミング言語です。ボタンクリックへの反応、データの処理、アニメーション、APIとの通信など、Webアプリケーションのロジックを担当します。世界で最も広く使われるプログラミング言語の一つです。

学べること

  • ✓変数、データ型、演算子
  • ✓条件分岐（if/else）とループ（for/while）
  • ✓関数の定義と呼び出し
  • ✓DOM操作（HTML要素の動的変更）
  • ✓イベント処理（クリック、入力など）
  • ✓配列とオブジェクト

コード例

// ボタンクリックでメッセージを表示
const button = document.querySelector('#btn');
let count = 0;

button.addEventListener('click', () => {
  count++;
  document.querySelector('#out')
    .textContent = count + '回クリック！';
});

準備はできた？

HTMLの基礎から始めましょう

HTMLから始める →