プログラミング入門30日

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

第1部 HTML(Day 1〜8)

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

  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部 HTML/CSS(Day 9〜16)

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

  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部 JavaScript(Day 17〜24)

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

  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部 Python(Day 25〜30)

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

  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日間のまとめとする。
← トップページに戻る