太子プログラミングクラブ第3期(2025年9月)~自己紹介文を例にHTML構造を理解する~

太子プログラミングクラブは、WEBデザインに挑戦中です。まずは、9月もHTMLを学習していきます。

タイピング練習は欠かしません

WEBデザインでも、タッチタイピングは欠かしません。「コードを書く」という機会は減ってきつつありますが、表示すべきコンテンツは自分で書かないといけません。成果が目に見えて伸びていくので、メンバーもやる気に繋がっているようです。

使うツールは変わりません。

  • 無料タイピング 
    https://manabi.benesse.ne.jp/gakushu/typing/
  • 寿司打
    https://sushida.net

HTMLと直接関係はないけれど、アルゴロジックもすすめます。はじめの20分くらいは、ウォーミングアップで、頭と指の体操です。

生成AIで自己紹介のテンプレートを作らせてみる

生成AIで自己紹介文を作る練習をします。

生成AIに完成品を作らせるのではなくて、思考をサポートする使い方をします。生成AIの答えは、だれでも答えられそうな内容であることが多いのです。そこで、自分なりのアレンジをするわけですが、アレンジをしやすいように例文を作ってもらいます。

生成AIを使うことは、これから先の未来では避けられないでしょう。だれもが生成AIを使うようになったとき、差がつくのはこういうところです。AIに使われるのではなくて、AIを使うのです。

自己紹介テンプレートをHTMLでWEBページにする

出てきた自己紹介文を、HTMLに落とし込みます。今回大切な概念は、タグです。

コンピューターはお馬鹿なので、人間なら書かれている内容を読んでタイトルと理解するのと同じことが出来ません。では、どのようにタイトルや本文を見分けるかというと、タグによって見分けるのです。

今の世の中、便利なツールがあります。例えば、WordPress何かを使えば、タグを理解しなくてもWEBページは作れます。

しかし、タグを理解することで、WEBページの作り方の質が大きく向上し、さらには別の分野への応用ができます。例えば、SEOとかスクレイピングとかです。

せっかくのプログラミングクラブなので、幅広い見方、応用力がつくことをしたいと思います。次回は、「HTMLがきちんと書かれることで、pythonによるスクレイピングで目次を簡単に作れる」というのを体験してみましょう。

予告通りには進んでいないものの、大切なことには時間を割いて説明していきます。