在宅スキルアップ勉強会

【在宅スキルアップ勉強会 】HTML/CSS勉強会

【在宅スキルアップ勉強会】

HTML/CSS勉強会

2025年10月は、以下の2種類の在宅スキルアップ勉強会を実施しました。

■Python勉強会~入門編~

■HTML/CSS勉強会

今回は上記のうち、HTML/CSS勉強会の模様をお届けします!


2025.10HTML/CSS勉強会参加者の写真

HTML/CSS勉強会

2025年10月28日(火)13時~14時30分

参加人数7名
※うち2名Zai-Proコーディネーター

★Zai-Proでの開発業務とAIアノテーション業務で活躍する皆さんにご参加いただきました(在住地:埼玉県、神奈川県、島根県)

セミナー講師Sさん

今回の先生 Sさん
(30代女性 埼玉県)

Zai-Proでのお仕事内容:
主にWordPressで構築されたサイトの保守

普段はフリーランスとしてコーディング業務全般で活躍する他、就労支援施設が主催するweb制作講座でのオンライン講師、小学生へのプログラミング講座のオンライン講師なども務める。

今回の勉強会は、「HTML」「CSS」にフォーカス!

HTMLとCSSはセットで語られることも多い言語ですが、HTMLとCSS がそれぞれ具体的にどのような役割を担っているか、ご存じですか?

勉強会の参加者から事前に質問を募集すると、このような質問が寄せられました。

「HTMLとCSS、JavaScriptはどう違うんですか?」
「スマホ向け・PC向けサイトの作り方の違いは何ですか?」

そこで今回の勉強会では、 HTMLとCSS を実際に体験しながら基礎を学ぶことに。

「HTMLはWebサイトの土台となる情報構造を伝える言語です。そしてCSSはページ上のデザインを決める言語と言っていいでしょう。ちなみにJavaScriptは、サイトの動きのあるコンテンツを操作する言語です」S先生はまずそのように分かりやすく説明した上で、CSSが持つWebサイト上での役割を、デモサイトを見せながら説明されました。

デモサイト画像

「枠組みであるHTMLは同一でも、見栄えはPC画面とスマホ画面とで、それぞれ読みやすくなるように設定を変えていく必要があります」とS先生。デモサイトを用いて、PC画面用に制作したCSSのままスマホ画面で見たときの読みづらさを、視覚的に教えてくださいました。

実際に、HTMLとCSSのコーディングを体験!

では実際には、どのようにコーディングしていくのでしょうか?今回は、実際にコーディングを体験しながら学びました。

コーディング体験画面

自分自身でコーディングしたものが、サイト上に反映される。思わず「わぁ!」と言ってしまいたくなるような面白さを、直感的に味わえる時間となりました。

参加者の皆さんからは、質問が次々と!

一通りの講義が終わった後は、質問タイムへ。
まずは、事前に募集した質問に対してS先生に回答していただきました。

勉強会資料一部抜粋

事前に募集したものに加え、勉強会の中でも新たに手が上がり、たくさんの質問が集まりました。

■おすすめの学習方法を教えてください!
■HTMLを書くときにおすすめのエディタやツールは?
■HTMLを書くときに「正しい書き方」や「ルール」はありますか?また、よく使うタグとあまり使わないタグの違いは何でしょうか?
■クライアントから「PC画面もスマホ画面も同じコーディングで大丈夫です」と言われたら、どうすればいいですか?

S先生は上記のような質問に、丁寧に答えてくれました。

このようにZai-Proの勉強会では、ただ講義を聞くというよりも、「先生と参加者が対話しながら進められるムードで、理解を深めやすい場にすること」を大切にしています。

少人数参加制している理由も、疑問が生じたときに気軽に聞ける雰囲気をつくるためです。今後参加される皆さんも、安心して質問してください。

活躍する在宅ワーカーの“リアル”も知れる勉強会

S先生は在宅ワーカー歴8年。ライフスタイルの変化も見据えて在宅ワーカーの道を選んだといいます。現在はコーディング業務やプログラミング講師など幅広く活躍しながら、臨機応変に働く時間を調整できる今の生活が自分に合っていると話します。

しかし、「在宅ワーカーには、自己管理がとても大切です」とS先生。仕事とプライベートを線引きし、集中して仕事を進められる環境作りを心がけているそう。例えば、生活する部屋と作業用スペースを切り分ける、仕事のキリがいいタイミングでご褒美タイムを設ける、PC・ソフト・ガジェットには惜しまず投資するなど、S先生が行っている工夫を教えて頂きました。

参加者の皆さんも、今後のキャリア形成や、仕事とプライベートとのメリハリに悩まれていたようで、うんうんと頷きながら夢中でS先生の話を聞く姿が。「S先生のように活躍できる人になりたいです!」と、S先生の話を通じてモチベーションがグンと上がった参加者の方もいらっしゃいました。

勉強会の後は、参加者同士の交流タイムへ!

勉強会の後は、参加者とコーディネーターでの交流会を行いました。

自宅にいながら一人で仕事ができる在宅ワーカー。ですが、「在宅ワーカーってどんな人がいるんだろう?」「誰かと話して悩みをすっきりさせたい」と思う方も多いのではないでしょうか。

だからこそZai-Proでは、在宅で参加できるオンライン勉強会の後に、自身と同じ在宅ワーカー仲間と繋がることができる、交流の機会も設けています。

交流会の様子

「在宅ワークならではの工夫」について、皆さんで情報交換!

S先生からアドバイスをもらったこともあり、「在宅ワークで心がけていることはありますか?」という話題は特に盛り上がりました。

「私もS先生と同じように、生活するスペースと仕事のスペースを分けています!」
「毎日ログをつけてどんな仕事を進めたかを記録し、後で振り返られるようにしています」
「メールの通知は、随時ではなく40分ごとにまとめて受信するように設定して、集中力を保てる環境を作っています」

などなど、在宅ワークを充実させるヒントを交換できる時間となりました。

「今後どんなキャリアを歩みたいか」もみんなで共有

交流会の最後には、「今後の目標」についても発表しました。

「これから在宅ワーカーとして本格稼働するため、まずは自分なりのペースを掴んでいきたいです」
「この勉強会を通じて、コーディングの勉強をさらに進めていきたいと思えました」
「いろいろな在宅ワークをしているため、何か一つ『これだ!』と胸を張れる仕事を作りたいです」
「最近まで職業訓練でコーディングを学んでいました。S先生のように広く活躍できる在宅ワーカーになりたいです!」

この勉強会と交流会をきっかけに、新たな目標が見つかった参加者もいらっしゃいました。

先生や参加者の皆さんからのうれしいお声

今回の先生 Sさん

参加人数も少人数でちょうどよく感じました。あらかじめ参加者さんから質問をいただけたため、講師としても皆さんに向けて話す内容が定まりやすく、スムーズに進められました。

話をする女性

参加者の皆さん (Python勉強会、HTML/CSS勉強会の感想を含みます)

HTMLやCSSの基礎的な部分を、わかりやすく知ることができて良かったです。

(30代女性 神奈川県)

言語の習得から実際の仕事になるまでにS先生が要した期間も参考になりました。またHTMLとCSSの違いについても例え話を交えて教えてくださり、大変わかりやすかったです。

(50代女性 埼玉県)

これから本格的に稼働していくにあたって不安が多かったですが、他の在宅ワーカーの方たちからさまざまなお話を聞けて、少し安心しました。

(40代女性 神奈川県)

自分と同じく在宅ワーカーとして活躍する方の様子や、同じくHTML/CSSを学びたいと思っている方の疑問など、生の声をたくさん聴くことができました。親近感を覚える点もあり、大変有意義な時間でした。

(50代女性 島根県)

現役でWeb関係のお仕事で活躍するS先生のお話を聞き、充実した在宅ワーカー人生を送る姿に憧れてしまいました。今後の勉強の励みになりました!

(50代女性 埼玉県)

発見があった女性と男性

参加者のみなさん、ご感想ありがとうございました!

今後も開催いたします!

Zai-Proでは、皆さんのスキルアップやコミュニケーションの機会を増やすべく、今後も積極的に在宅スキルアップ勉強会を実施いたします。

次回の在宅スキルアップ勉強会の開催情報は下記ページをご確認ください!

開催情報はこちら

在宅ワーカーがともに学び、切磋琢磨できる。Zai-Proがそんな場所になれるようなイベントや施策を行ってまいります。
ぜひ皆さんも、お気軽にご参加ください!

在宅スキルアップ勉強会に興味をもたれた方へ


在宅スキルアップ勉強会は下記の方を対象としております。


弊社にご登録いただきお仕事を探されている方

弊社とご契約いただいている方


これからお仕事を探す予定の方でも迷われている方でも大丈夫です!
ご登録がまだの方は下記よりぜひご登録ください。

メガホンを持って応援する女性

WEB・IT経験のある方のエントリーページはこちら

事務系・作業系のエントリーページはこちら

© 2025 在宅 de プログラマー