探究×総合

【プログラミング】HTMLとCSSでホームページを作ってみよう!

HTMLとCSSはホームページを作る際のコンピュータ言語です。

LEGOブロックやプラモデルのような感覚でコツコツと作れるのがHTMLとCSSの良いところです。(※JavaやPythonのように関係、論理、制御が複雑でない。)

子供たちが楽しみながら学ぶのにピッタリだと思うよ!(Scratchよりもオススメ)

ノビ先生と一緒に、HTMLとCSSを使って「世界に一つだけの自己紹介ホームページ」を作ってみませんか?

探究学習の手順

1

ホームページの仕組みを学ぼう。

2

インターネットの仕組みを学ぼう。

3

HTMLについて学ぼう。

4

CSSについて学ぼう。

5

実際に「自己紹介のホームページ」を作ってみよう!

6

カスタマイズしてホームページをグレードアップさせてみよう!(オリジナル)

ポイント

コンピュータや物作りが好きなら、ホームページって作るの楽しいと思うよ。

楽しいだけじゃなくて、ホームページを作る中で色々と学ぶことができるんだよ。

学べること

  • タイピング(正確なキーボード操作)
  • コンピュータOSの基礎リテラシー(コピー、カット、ペースト、保存、移動など)
  • 光の3原色(RGB)
  • 16進数
  • ちょっとした英単語
  • コンピュータ(ハードウェア)
  • ソフトウェア
  • インターネット(ネットワーク)
  • デザイン、配色
  • UI(ユーザビリティー)
  • ライティング(構成力、文章力)
  • 忍耐力
  • 問題発見力、問題解決力(バグフィックス)

など。

時間はかかるけど、焦らずコツコツと学びながら作っていって欲しいな。

ハマったら、JavaScriptとかPHPとか、JavaとかPythonとかの高度な言語を勉強したくなるかもね〜(^^

コラムを読む

オススメの記事 新しい記事
  1. 「役立つ」より「面白い」の視点

  2. プロセスをしっかり踏むこと。それが成長のロジック。【塾長の想い】

  3. 【辛口】ギフテッドに最適な学習方法は飛び級や先取りにあらず。

  4. 【ギフテッドの育て方】個性や才能を伸ばす教育のコツや習い事について真面目に語ります。

  5. 【読み解く】小学生向けのオンラインの習い事・学習塾・教室の選び方。多くの人が誤解している肝心なこと。

  6. 【日経新聞より】アクティブラーニングを導入したのに「受け身」な生徒が増えてしまうの!?

  7. 人口減により遂に偏差値時代が終幕。これからの入試とあるべき幼少期教育について。

  8. フィンラインド教育に学ぶ(読解力、考える力)

  9. 詰め込まない教育で中学受験は乗り越えられるのか?

  10. 為末大さんの話がしみる

  1. 学校に行っても行かなくても「この力」さえつけておけば 生きていける!

  2. プチ探☆マンガ(春の七草-②)

  3. プチ探☆マンガ(春の七草-①)

  4. 「役立つ」より「面白い」の視点

  5. プロセスをしっかり踏むこと。それが成長のロジック。【塾長の想い】

  6. 【辛口】ギフテッドに最適な学習方法は飛び級や先取りにあらず。

  7. タイパ(タイムパフォーマンス)の落とし穴

  8. 【環境が人を育てる】読み聞かせの効果は理解力に表れる。

  9. プチ探☆マンガ(クロアゲハ-完結編)

  10. 【ギフテッドの育て方】個性や才能を伸ばす教育のコツや習い事について真面目に語ります。

カリキュラム例

  1. 【プログラミング】HTMLとCSSでホームページを作ってみよう!

  2. 場合の数の問題(灘中)[S-0012-C]

  3. 色と形を工夫して感情を動かしてみよう!

  4. この絵のシーンをもとに、自分だけの物語をつくろう!

  5. 論説文や随筆分を構造的に整理してみよう!

  6. 世界の宗教と人々の生活について調べてみよう!

  7. 立体と平面(東大寺学園中)[S-0002-R]

  8. 【観察力と調べる力】在来種?外来種?新種?謎の生物!?この足跡は正体は誰だ?

  9. 【気づく力と疑問の目】この魚の正体は何だ?

  10. 【クルマのメカ入門】このレバーは何のためにあるの?

teku先生のツイート