Curriculum — 30 days
プログラミング入門30日
1日1テーマ×30日で学ぶ自習用カリキュラムです。HTMLの基礎からはじめて、CSSによるデザイン、JavaScriptによる動きのあるページ、Pythonプログラミングの入門まで、HTML → HTML/CSS → JavaScript → Python の順に進みます。各日のタイトルをクリックすると、解説とサンプルコード、練習問題のページが開きます。ページ末尾の「理解度チェック」クイズに正解すると確認コード付きの提出用画面が表示されるので、スクリーンショットを撮って Teams の Class Notebook に提出してください。
-
第1部Day 1–8
HTML
Webページの骨組みであるHTMLを学びます。テキストエディタとブラウザだけで始められます。
-
Day 1
Webページのしくみ
ブラウザ・サーバー・HTMLの役割を知り、最初のHTMLファイルを作ってブラウザで開いてみる。
-
Day 2
HTMLの基本構造
<!DOCTYPE html>、html・head・body、title、文字コード(UTF-8)の指定。
-
Day 3
見出しと段落
h1〜h6 と p。文書の構造を意識してマークアップする。
-
Day 4
リンク
a タグと href 属性。相対パスと絶対パスの違い。
-
Day 5
画像
img タグの src と alt。画像サイズの指定と代替テキストの大切さ。
-
Day 6
リスト
ul・ol・li。箇条書きと番号付きリストの使い分け。
-
Day 7
表
table・tr・th・td で表を組む。
-
Day 8
フォーム
form・input・button。入力欄とボタンのあるページを作る。
-
Day 1
-
第2部Day 9–16
HTML/CSS
CSSでページの見た目を整えます。仕上げに、ここまでの内容で1枚のページを制作します。
-
Day 9
CSSとは
スタイルの3つの書き方(インライン・style タグ・外部ファイル)。
-
Day 10
セレクタ
要素・クラス・ID。スタイルを当てる対象の指定方法。
-
Day 11
文字の装飾
color、font-size、font-family、font-weight。
-
Day 12
背景と枠線
background、border、border-radius で角丸カードを作る。
-
Day 13
ボックスモデル
margin と padding。要素の余白のしくみを理解する。
-
Day 14
Flexboxレイアウト
display: flex で要素を横に並べる。
-
Day 15
レスポンシブデザイン
viewport とメディアクエリでスマートフォンに対応する。
-
Day 16
演習:自己紹介ページ
HTML と CSS を組み合わせて自己紹介ページを完成させる。
-
Day 9
-
第3部Day 17–24
JavaScript
JavaScriptでページに動きをつけます。プログラミングの基本もここで身につけます。
-
Day 17
JavaScriptとは
script タグと console.log。開発者ツールで動きを確認する。
-
Day 18
変数とデータ型
let・const、数値と文字列。
-
Day 19
条件分岐
if・else と比較演算子。
-
Day 20
繰り返し
for・while で同じ処理を繰り返す。
-
Day 21
関数
function、引数と戻り値。処理をまとめて再利用する。
-
Day 22
配列とオブジェクト
複数のデータをまとめて扱う。
-
Day 23
DOM操作とイベント
getElementById、textContent、クリックイベントでページを書き換える。
-
Day 24
演習:ミニアプリ
ボタンを押すと表示が変わるページを作る。
-
Day 17
実習環境やサンプルコード集は「プログラミング入門」のページから。
プログラミング入門へ