このステップのゴール
HTMLとCSSで、自分のページを最後まで作りきれるようになる。
このステップの授業
上から順番に進めます。パソコンに慣れている方は、授業1・2をざっと確認してから先へ進んでも大丈夫です。行をクリック(タップ)すると、授業のページが開きます。ログインしていると、終わった授業に ✓ がつきます。
- パソコンの基本操作ファイルとフォルダ・拡張子の表示・zipの作り方。制作の土台です。
- VS Codeをはじめるインストールから日本語化、Live Serverでの確認まで、一つずつ。
- はじめてのHTMLページの骨組みを作る言語。見出し・段落・リンク・画像を書いてみます。
- はじめてのCSS色・大きさ・余白。ページの見た目が自分の手で変わっていきます。
- ブラウザと開発者ツールプロが毎日使う道具で、他の人のサイトの作りをのぞいてみます。
- Figmaをはじめる無料のデザインツールで、ページの設計図(ラフ)を描けるようになります。
- 作品づくり(3作品)自己紹介ページ・カードUI・簡単LPを順番に完成させて、zipで提出します。
作るもの(完成させる作品)
1つの大作ではなく、小さな作品を順番に「完成」させます。完成のたびに、できることが目に見えて増えます。
自己紹介ページ
名前(ニックネームでOK)、好きなこと、ひとことを載せた1枚のページ。はじめての「自分で作ったWebページ」です。
カードUI
写真と文章を組み合わせた「カード」のデザインをCSSで作ります。きれいに作れると、ぐっとプロらしい見た目になります。
簡単LP(1枚もの)
架空のお店やサービスの紹介ページを1枚作ります。Figmaで設計図を描いてから作る、本番に近い流れを体験します。
このステップの振り返りチェック
7つの授業を終えたら、ここで全体を振り返りましょう。