探究×総合

【プログラミング】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とかの高度な言語を勉強したくなるかもね〜(^^

teku先生のツイート

コラムを読む

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

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

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

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

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

  6. 「のびてく」で身に付くアナロジー思考について

  7. 科目横断的な探究学習と科目学習をどのようにリンクさせていくのかについて、具体例で説明します。

  8. 考える習慣をつけ、深い理解につなげる学習の進め方について説明します。

  9. ずっと伸び続ける方法(スローラーニングで好奇心を育てる)

  10. 「絵本の読みきかせ」は本当に必要なのか〜10年続けた私が批判的に考えてみた〜

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

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

  3. ロジャー・フェデラーが引退(Roger Federer)

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

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

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

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

  8. 手作り紙芝居ワークショップで感じたこと

  9. プチ探☆マンガ(クロアゲハ編-その2)

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

カリキュラム例

  1. 数論の問題(灘中)[S-0009-R]

  2. 立体図形の切断(灘中)[S-0015-R]

  3. オノマトペを通して読解力を高めよう!

  4. フィールドワークを通して植物の凄さを知ろう!

  5. 平面図形(灘中)[S-0014-C]

  6. 【農業と害獣を考える】スイカ泥棒!?この爪跡は誰の仕業だ!?

  7. 【ゼロからの発想】石の形を生かして、石に絵を描こう!