Curriculum — 30 days

プログラミング入門30日

1日1テーマ×30日で学ぶ自習用カリキュラムです。HTMLの基礎からはじめて、CSSによるデザイン、JavaScriptによる動きのあるページ、Pythonプログラミングの入門まで、HTML → HTML/CSS → JavaScript → Python の順に進みます。各日のタイトルをクリックすると、解説とサンプルコード、練習問題のページが開きます。ページ末尾の「理解度チェック」クイズに正解すると確認コード付きの提出用画面が表示されるので、スクリーンショットを撮って Teams の Class Notebook に提出してください。

  1. 第1部

    HTML

    Webページの骨組みであるHTMLを学びます。テキストエディタとブラウザだけで始められます。

    Day 1–8
    1. Day 1

      Webページのしくみ

      ブラウザ・サーバー・HTMLの役割を知り、最初のHTMLファイルを作ってブラウザで開いてみる。

    2. Day 2

      HTMLの基本構造

      <!DOCTYPE html>、html・head・body、title、文字コード(UTF-8)の指定。

    3. Day 3

      見出しと段落

      h1〜h6 と p。文書の構造を意識してマークアップする。

    4. Day 4

      リンク

      a タグと href 属性。相対パスと絶対パスの違い。

    5. Day 5

      画像

      img タグの src と alt。画像サイズの指定と代替テキストの大切さ。

    6. Day 6

      リスト

      ul・ol・li。箇条書きと番号付きリストの使い分け。

    7. Day 7

      table・tr・th・td で表を組む。

    8. Day 8

      フォーム

      form・input・button。入力欄とボタンのあるページを作る。

  2. 第2部

    HTML/CSS

    CSSでページの見た目を整えます。仕上げに、ここまでの内容で1枚のページを制作します。

    Day 9–16
    1. Day 9

      CSSとは

      スタイルの3つの書き方(インライン・style タグ・外部ファイル)。

    2. Day 10

      セレクタ

      要素・クラス・ID。スタイルを当てる対象の指定方法。

    3. Day 11

      文字の装飾

      color、font-size、font-family、font-weight。

    4. Day 12

      背景と枠線

      background、border、border-radius で角丸カードを作る。

    5. Day 13

      ボックスモデル

      margin と padding。要素の余白のしくみを理解する。

    6. Day 14

      Flexboxレイアウト

      display: flex で要素を横に並べる。

    7. Day 15

      レスポンシブデザイン

      viewport とメディアクエリでスマートフォンに対応する。

    8. Day 16

      演習:自己紹介ページ

      HTML と CSS を組み合わせて自己紹介ページを完成させる。

  3. 第3部

    JavaScript

    JavaScriptでページに動きをつけます。プログラミングの基本もここで身につけます。

    Day 17–24
    1. Day 17

      JavaScriptとは

      script タグと console.log。開発者ツールで動きを確認する。

    2. Day 18

      変数とデータ型

      let・const、数値と文字列。

    3. Day 19

      条件分岐

      if・else と比較演算子。

    4. Day 20

      繰り返し

      for・while で同じ処理を繰り返す。

    5. Day 21

      関数

      function、引数と戻り値。処理をまとめて再利用する。

    6. Day 22

      配列とオブジェクト

      複数のデータをまとめて扱う。

    7. Day 23

      DOM操作とイベント

      getElementById、textContent、クリックイベントでページを書き換える。

    8. Day 24

      演習:ミニアプリ

      ボタンを押すと表示が変わるページを作る。

  4. 第4部

    Python

    Pythonプログラミングに入門します。JupyterLab 実習環境を使えばブラウザだけで実行できます。

    Day 25–30
    1. Day 25

      Pythonとは

      JupyterLab(ブラウザ実習環境)でプログラムを実行してみる。

    2. Day 26

      変数と計算

      数値・文字列、print、四則演算。

    3. Day 27

      条件分岐と繰り返し

      if と for。インデントが構文の一部になっていることを理解する。

    4. Day 28

      リストと辞書

      複数のデータをまとめて扱う。

    5. Day 29

      関数とモジュール

      def で関数を定義し、import でモジュールを使う。

    6. Day 30

      演習:グラフ描画

      Matplotlib でデータをグラフにして、30日間のまとめとする。

実習環境やサンプルコード集は「プログラミング入門」のページから。

プログラミング入門へ