太子プログラミングクラブ第3期（2025年10月）～HTMLをCSSで彩る～

2025年10月11日 2025年10月11日 nakahara_takahiro

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

Contents

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

タッチタイピングは基本中の基本。音声入力が一般的になってきていますが、コードを音声で入力しているというのは聞いたことがありません。プログラミング・コーディンをするならタイピングは必須です。

高校生二人のタイピングは、基本に忠実で速度もかなり速いです。ですが、その先に進もうとするとテクニックがあります。下は、そのテクニックを伝えている様子です。

理論を知ったら、あとは実践あるのみ。身体に覚え込ませましょう。

前回まででHTMLで自己紹介文を作ってきました。今月からは、そのHTMLにCSSで色を着けたり、外観を変えてみたりしていきます。

CSSを実装する手順としては3つ

初学者にとって一番わかりにくいのは「外部ファイルをリンクする」方法ではないでしょうか。

で、色々考えて、メンバーにさせるのは外部ファイルをリンクする方法としました。これは単にスパルタなわけではないのは後述します。

HTML・CSSを書いていて、Pythonとの違いを感じたようです。

Pythonはエラーがあると、そこで止まって動きません。しかし、HTML・CSSは画面に反映されないだけで、エラーで完全に止まることはごくまれです。

これの特徴がコーダーにもよくでていて、イケイケドンドンなのがWeb系のコーダー、どちらかというと慎重に硬いコードを書くのがいわゆるプログラミング言語のコーダーです。私は後者。

メンバーに聞いてみると、HTML・CSSのほうがいい！っていう声をちらほら聞きました。

初学ならHTML・CSSのほうがいいのかなあ？と思いました。さて、今後のクラブ展開で考えます。

外部にCSSファイルを作らせた理由は、生成AIを使うのを見越したからです。

これまでメンバーが生成AIを使うとき、HTML+CSS+JSのコードを全部AIに食わせていました。もちろんAIへの指示の出し方を詳しく伝えていないので、このようなやり方になっても仕方ないのは承知しています。

ということで、ステップアップしてほしいなと考え、外観を変えるだけならCSS部分を食わせればよいということを実感してもらいます。

これが、ヘッダ部分に書いていたらまだしも、style要素だとHTML全部を食わせるしか方法がありませんからね。「必要な部分だけをAIに食わせる」ということを肌感覚として身につけてほしいと思います。

やり方を伝えれば、あとはかんたんにやってのけるのが太子プログラミングクラブのメンバーの素晴らしいところです。