🌐 Maeiku × Fab.講座：CSS編（全12回）が完成しました

2026年1月16日 21:34

こんにちは、スタッフJです。

前の記事「Maeiku × Fab.講座の設計思想」では、AIを道具として使いこなすための「基礎力」の大切さについてお話ししました。

あれからじっくりと時間をかけて構成を練り直し、ついにCSS講座（全12回）が完成しました。昨年に設計図を描き始めてから、ひとつひとつのコードと解説内容を自分自身で確かめるように書き進め、ようやくお届けできる形になりました。私自身、これほどまでに時間がかかるとは思っていませんでした。

本講座は、単に技術を教えるだけではなく、生徒たちが「自分のアイデアを形にするための確かな土台」を得られるよう設計しています。今回は、完成した講座の中身と、そこに込めたこだわりをデータと共に紹介させてください。

「なるべく、分からなくならないように」
そのために、一回ごとにコードを書く負荷を調整しながら、自分だけのポートフォリオサイトが少しずつ出来上がっていく工程を大切にしました。

このグラフは、各回の解説量と、実際に手を動かすコードの量を可視化したものです。最初は環境構築や色を変えるといった小さな一歩から始まりますが、後半にかけてボリュームが増加しています。
これは、基礎をしっかりと固めた上で、無理なく技術を習得できるよう「階段の高さ」を設計した結果です。

AIが生成したコードをただ眺めるのではなく、「なぜこう動くのか」を自分の言葉で説明できる力を養うために、本講座では合計250項目を超える概念やルールを導入しました。

ここでは「なんとなく」という曖昧さを排除しました。「なぜ8pxという数字を選んだのか」「なぜこのデザインを選択したのか」といった根拠をすべて言葉にしています。ひとつひとつの記述（コード）に理由があることを知ることで、生徒たちが自分の判断に自信を持てるようになることを目指しました。

今回の講座で特に重視したのは、レイアウトとレスポンシブ（画面サイズに合わせた調整）です。

全体の半分以上を、要素を「どう配置し、どう動かすか」という部分に充てました。

AIが提示したレイアウトが思い通りにいかなかったり、画面が崩れてしまったりしたとき、どこをどう触れば修正できるのか。その「解決する力」を養うことが、この構成の最大の目的です。
この知識は必ず生徒のアイデアを形にするための「本質的な力」になります。

前回の記事で触れた「コードの外側にある仕組み」へのこだわりは、今回のCSS編でも一貫しています。AIが出したコードをただ写すのではなく、その裏側にある「前提」や「作法」を理解するための知識を随所に散りばめました。

「エラーの原因」を突き止める力
相対パスやCSSの詳細度といった、コンピュータが情報を処理するルールに触れました。こういった知識と、「検証ツール」を使って自力で原因を特定できるようになることを目指しました。

「技術負債」を抱えないための管理術
とりあえず動けばいい、という書き方は「技術負債」となり、後々の自分を苦しめます。「CSS変数の管理」や「リファクタリング」のやり方であったり。技術的先行投資についても触れています。

「デザインの論理」
「近接の法則」や「視覚的階層」など、センスに頼らず「なぜその余白が必要なのか」を説明できる理論を採り入れました。アクセシビリティの知識やユーザビリティを論理的に考える力は、将来どのようなツールを使っても色褪せない武器になります。

80項目に及ぶプロパティやセレクタを網羅した本講座。全12回を終える頃には、単なるコードの模写を超えた、Web制作の確かな基礎体力が身につきます。

レイアウト
「ボックスモデル」や「表示形式」を理解した上で、FlexboxやCSS Grid、そしてpositionを使い分け、PCでもスマホでも崩れない画面を自在に組み立てられるようになります。

意味のあるデザイン
「なぜこの余白なのか」「なぜこの動きなのか」。グラデーションや影、アニメーション（@keyframes）を使いこなし、視覚的階層を意識した「意味のあるデザイン」を論理的に実装できます。

設計視点
CSS変数による一元管理や、レスポンシブの柔軟性を高めるclamp()関数など、Web制作で使われる標準的な手法を一通り体験します。

決して「魔法のように何でも作れる」ようになるわけではありません。
しかし、次に学びたいことが出てきたときに、自力で調べて進んでいけるだけの「確かな地図」は手渡せる構成にしました。

時間をかけて一歩ずつ積み上げてきたCSS編が、ようやく一つの形になりました。私も皆さんと同じ「学習中の身」です。だからこそ、自分が躓いたところ、迷ったところをすべて講座に反映させました。正直、少しやり過ぎた感はあります。

今後は、この講座を体験してくれた生徒たちの声も大切に反映させていくつもりです。ただ、今は次に控える「JavaScript講座」の制作を優先します。ようやく、講座タイトルに込めた『プログラミング』の領域へと本格的に入っていくためです。

「学びたい時に、学べる環境がある」

そんなラボの「Learn Hub」が、生徒の皆さんの「やってみたい」を支える力になれば嬉しいです。

最後まで読んでいただき、ありがとうございました。