【プログラミング】就労移行支援でHTML・CSSを学んだ体験談

【筆者紹介】
Salad編集部員。1980年生まれの男性。発達障害の一つ、ASD(自閉症スペクトラム)の診断を受けている。一年間の就労移行支援事業所の通所のなかで、HTML・CSS、JavaScriptやPHPなど、プログラミングに関しても訓練を行った。現在は妻と二人暮らし。

テレワークで業務を行う男性

就労移行支援で、プログラミングに関わるスキルを学んだ

webサイトのイメージ

HTML・CSSを学んだ

筆者は一年間、就労移行支援事業所に通所しました(通所生活について詳細はこちら)。その中でHTML・CSSのスキルについて学びました。学んだのは

・妻や事業所のスタッフの方に学ぶように勧められていた(今後必要になるスキルであるから)
・Webデザインなどのスキルを学び、就職できる幅を広げたいと考えていたから
・ブログやWebサイトを作る知識を習得したいと感じていたから

これらの理由がありました。そのため、Webサイトを作る基礎となるHTML・CSSを学ぶことにしました。

HTML・CSSとは

プログラミング本のイメージ
HTMLやCSSを初めて聞くという方に、概要を簡単に説明しますね。どちらもWebサイトを構成する目的で使われるマークアップ言語です。両者で用途が少し異なるため、下記に特徴をまとめました。

【HTML】
・HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略
・インターネット上のWebページを表現するために使われているマークアップ言語
・サイト内の文字やリンクの配置など「骨組み」を構成する目的で使われることが多い

【CSS】
・Cascading Style Sheets(カスケーディング・スタイル・シート)の略
・HTMLが構成した文字や情報にデザインを設定するもの
・具体的には文字の色や大きさ、背景色などの設定、画像に動きを付ける時などに使われる

両者の概要は、このようになります。車で例えると、HTMLが「車体やエンジンなどの構造」、CSSが「形や配色のデザイン」を担うという感覚です。HTMLでもCSSの役割を構文で打つことは可能ですが、これを分かりやすくしたものがCSSで、今後は分けて使うことが主流になると学んでいます。

こちらの記事「【エンジニア志望】よく使うプログラミング言語一覧。用途も紹介」でもHTML・CSSをはじめ様々なプログラミング言語について紹介しているので、興味がありましたらぜひチェックしてみてください。

参考:「HTML・CSS」をマスターしたい初心者必見!全てがわかる総合カリキュラム | CodeCampus

では、筆者がHTMLとCSSをどのように学んだか紹介していきます。

【体験談】就労移行支援で学んだHTML・CSSについて

プログラミング画面

概要

まず、概要など全般的な部分をお伝えします。

【訓練の形式】
配信されている動画に沿って、実際に作業を進めながら学べる形式。定期的に習得状況を図るための簡単なテストがある。

【習得の期間】
2カ月(※週5日、毎日5時間トレーニングによる)

【試験など】
習得の状況を図るテストはあるが、認定試験などはない

概要は、このようになります。

主に学んだ項目

HTML・CSSで学んだ項目は、以下の通りです。

【HTML】
・HTMLとは。概要や使用目的
・HTMLの基本構成(タグなどの使用法、配置方法)
・文字のエンコード(Shift-JISやUTF-8など、文字をコンピュータ上で扱う規格)
・見出しの書き方、文字の装飾
・コード(構文)を見やすく入力する方法
・リストの作り方
・リンクの貼り方
・相対パスと絶対パス(意味についてはこちらを参考としてください)
・ヘッダー・フッターの設定
・画像ファイルの貼り方

【CSS】
・CSSとは。概要や目的について
・構文の基本的な配置方法
・文字の配色・太さ・配置(左揃え、右揃えなど)などを変える方法
・HTMLで構文を打った時と、CSSで同様の目的の構文を打った時の比較
・カラーコードについて
・背景色の変更(色種や色合いの変更)

このようになります。これらを「Atom」というツールを使い作業を進めていきました(このAtomの使用法も学びました)。(Atomについては、下記の参考リンクをチェックしてみてください)

ここでは分かりやすくHTMLとCSSを分けて紹介しましたが、基本的には両者を連携させながら同時進行で学んでいく形になります。

参考: Atom
参考:【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方

訓練中モチベーションとなったところ、スキルを活かせた場面は?

HTML・CSSを実践しながら学ぶ男性
訓練のモチベーションとなったのは、『実際に自分のサイトを作ってみた』ことです。

通所中、就職を希望していたWebデザインの会社の採用で『自己紹介のWebサイトを作ってみる』という試験がありました。この企業に応募するために、筆者は自己紹介サイトを作ることを決めたのです。

学習の中でも簡単なWebサイトは作るのですが、やはり色々試して自分で望むWebサイトを作る方がモチベーションが高まりました。ちなみにこの試験では構文の入力のみで、実際に見ることができるサイトにするまでは求められていませんでした(構文の内容を判断するのみ)。しかし筆者の勘違いもあって、レンタルサーバー(無料)を使用してサイト立ち上げまで行うことができました。

サーバーについて調べていただいた事業所のスタッフには、大変感謝しています。この求人、筆者の家庭環境(通信環境)が原因で受けられなかったのですが、この課題がなかったらもっと習得レベルは低かったかもしれません。

参考:ドメイン0円キャンペーン中!レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

HTML・CSSを学ぶ際に大変だった点は?

訓練に行き詰まる男性
HTMLとCSSの訓練で大変だった点は複数あり、下記にまとめました。

○HTMLとCSSがうまく連携されない
→構文自体は問題なく打っているのに、組み合わせ方に原因があって上手く反映されない
○構文同士が相殺されていて、上手く反映されない
→例えば過去に「文字を青にする」構文を打っていたのを忘れていて、同じ箇所について「赤にする」構文を打っていた
○レンタルサーバーの作業スピードが遅い
→サーバーを借りる際に限る。一回の変更で3時間~半日程度かかることもある
○画像の大きさがうまくサイトに合わせられない
→指定上は正しくても、背景設定や他の設定と関連して思い通りに表示されないことがあった

学んでいた際に大変に感じた事はこのようになります。全て配信動画を何度もチェックして振り返りながら、時間をかけて問題を見つけていったのを覚えています。一か所の動作のチェックだけで一日費やしたことも多くありました。

おわりに

Salad
いかがでしたでしょうか。

内容についてはもちろん、『こんなことを学ぶのかな』という雰囲気を感じていただけただけでも幸いです。筆者のように、就労移行支援事業所の中にはHTML・CSSはもちろんJavaScriptやPHPなど様々なプログラミング言語を学べる事業所もあります。

もし『自分に合う事業所をどう探したらよいか分からない』と迷っていたら、このサイト『Salad』にご相談ください。

Saladでは就労移行支援事業所に関する情報提供を行っております。こちらのページで、Saladが実際に取材した『プログラミングなどIT業界のスキルを学べる事業所』の一覧が随時更新中です。ぜひご覧ください。

就労移行支援に関することはもちろん、その他就職に関するご相談も承っております。ご連絡はこちらのお問い合わせフォームからメッセージ送信により行えます。ぜひ、お気軽にご相談ください。

この記事をシェアしましょう!