事務職の私が東京ITスクールの「基礎から学ぶHTML/CSS習得講座」を受けてみた！【研修体験談】

HTML/CSSとは何か？

まず私が受講した講座のテーマ「HTML/CSS」とはどんなものなのか、簡単に説明します。

恥ずかしながら講座を受けるまで、私も全く理解していませんでした。

HTML（HyperText Markup Language）

HTMLとは、ウェブページの骨組み（構成）を作成するための言語です。

タグとよばれる”< >”で囲まれたテキストを使用して、ここは大見出し、ここは改行、ここは任意の画像を配置、ここはリンク、などを定義し、HTMLファイルとして保存します。

ブラウザ（ChromeやFirefoxなどのWEB閲覧用アプリ）は、このファイルに書かれたテキストからサイトの構造や必要な画像、音声ファイルの情報などを読み取り、それを画面に表示します。

建物で言うならば「間取り」「設計図」のようなものです。

HTMLだけでもウェブページは作れますが、見た目はごくごく簡素なものになってしまいます。

CSS（Cascading Style Sheets）

CSSはウェブページのデザインやスタイルを制御する言語です。

HTMLはページの構造を定義しますが、CSSはページの見た目をカスタマイズします。

フォントのサイズや色、背景色やコンテンツスペースの幅や高さ、余白の広さなどを細かく指定できるので、HTMLとCSSを組み合わせることで美しいデザインのページを構築することができます。

HTMLが「間取り」「骨組み」なのに対し、CSSは「家具の配置」「壁紙」「カーテン」のようなものです。

綺麗なウェブページを作る為には必須なようです。

この講座を受けることになった背景

ここ1年ほど、私は主にマーケティングチームの事務業務を担当しているのですが、最近デザイン系のWEBアプリやWordPressに触れる機会が少しずつ増えてきました。

ページの下書きや画像の配置などの簡単な編集作業をする中で、ある日上長から

「今後の業務にあたって、HTMLがざっくりとでも読み取れるようになってほしい」

との要望がありました。

既存のページの構造がどのようになっているのかを、ソースコードから読み取ることができるようになり、SEOやウェブデザインの観点からも業務で役立てられるようになることを目的に、今回この講座を受けることになりました。

とはいえ、私に理解できるのだろうか、、、と不安もありました。

私のスキルレベルについて

どの程度のスキルレベルの人が学ぶの？というところも気になるかと思いますので、以下に簡単ですが、HTML/CSS講座受講時の私の大まかなスキルをお伝えします。

• 前職は接客業でITとは無縁だった
• 入社5年目、PC操作・メールなど、基礎的な操作は可能
• WEBツールを使う際にhtmlタグを見たことはあるが、意味はわからない
• WordPressの投稿機能に入力はできるがソースコードの編集はできない（意味もわからない）
• CSSという言葉は聞いたことがなかった

ご覧の通り、HTML/CSSについてはさっぱり分からず、いわゆる「一般事務」のスキル感であると思います。

次のセクションでは、こんな私がHTML/CSS講座を実際に受けてみた感想や、講座の内容について詳しくお伝えします。

実際の講座はどんなもの？

さて、ここからは実際の講座の内容について触れていきたいと思います。

今回受講した講座はこちら

基礎から学ぶHTML/CSS習得講座

HTML/CSS講座の概要

講座の構成としては、以下のようなものでした。

• HTML概要
• HTMLタグの種類
• CSS概要
• プロパティの種類
• ブロック構造
• ページレイアウト
• フォーム

知識のない私には、この項目だけを見ても、一体何のことだろう・・・？

という感じでしたが、チャレンジしてみないことには始まらないので、講義動画の視聴を開始しました。

講座受講の体験談

受講にあたり、事前知識も特になく不安でしたが、

実際に受けてみると、想像以上に理解しやすく、ついていきやすいものでした。

• 受講システムについて

講座は、受講用の専用システムにログインし、オンデマンド講座一覧の中から希望の講座を選択し、視聴ができるようになっています。途中からでも、必要に応じて見直すことも簡単にできます。

• 教材について

使用テキストは、受講用システムからpdfファイルでダウンロードすることができました。サンプル用のコードが記載されたファイル集も添付されていて、あとから復習する際にも便利です。

講義では、このテキストを元に実際にHTMLコードを書いて、ブラウザで表示してみるワークなどもはさまれており、書いたものがどのように見えるのか、ということを確認しながら進めていくことができます。

• 講師について

IT系の講座というと、無表情かつ早口で専門用語をだーっと話すような方が多いのかな、、理解できるかな、、と不安に思っていたのですが、良い意味で裏切られました。

適宜わかりやすい例えを交えながら、無理のないペースで説明してもらえることで、知識のほぼない私でも頭に入りやすく、これなら初心者の方でも入っていきやすいと感じました。

「基本はこうだけれど、実際にはこういうケースが多い」「こういう書き方をしてあげるとあとで編集する人が見やすい」等、実務で役立つケーススタディや、マナー的なことも挟みながら説明してくれます。そのためイメージが沸きやすかったです。

• 講義のレベルについて

HTML/CSSについて、まったく知識がない私でも抵抗なく学ぶことができました。

しかしながら、PCの基本操作やタイピング、ウェブの閲覧、アプリの使用、ログイン、ログアウト等、IT関連に関して一定の理解がベースとしてあることが望ましいかと思います。

これまでITに触れてこなかった方や、苦手意識があり不安という方は、この講座の前にITリテラシーを上げる研修を受けてみたほうがよいかもしれません。

IT周辺知識を身に付け、DXに対応できる社員を育成する研修パッケージ

学んだことと成果

HTML/CSSの基礎スキルの獲得ができた

この講座を通して、HTMLの仕組みと基本的なタグの種類、ソースコードからおおよそのサイト構成が読み取れるようになりました。

CSSがHTMLにどのようにサイトの見た目に影響しているか、という基本的な部分についても理解ができるようになりました。

ただし、この講座を受けただけでは、すらすらとコードを書いてサイト構築ができる状態までは到達しないので、あくまで入門編ととらえたほうが良いです。

講座での学びを踏まえて自身で何度も書いてみて、イメージ通りのものが作れるところまで鍛錬が必要です。受けて終わりではなく、事後の自主学習は必須と心得ましょう。（どんな研修もそうですよね…！）

業務へのよい影響について

今回HTML/CSSの知識を学んだことで、今までは想像もつかなかったウェブサイトの構造についてわかりやすく知ることができました。

これまでの業務でよく考えずに使用していたHTMLメール作成ツールも、本文内に自動挿入されていたタグについての理解ができました。

結果、どのようにすれば目的通りに文章や画像をレイアウトできるかがわかるようになりました。

WordPressその他のローコード、ノーコードツールでウェブページのデザインをする場合にも、タグについての基礎知識があると、表示が思ったものと違う場合の手直しなども行えるようになります。

私は支援的な立場ですので１からサイトを構築するようなことはありませんが、簡単な修正や追記などの依頼があった際、タグが読めると便利なことが沢山あるなと感じました。

この講座がおすすめな人

HTML/CSS講座は下記の方に向いていると感じました。

こんな方におすすめ！

• 人事/管理担当者

  自社Webサイトや求人ページの管理をされている方も多いと思います。HTML/CSSを理解していると、Webサイトの構築を外注していたとしても自身で理解できることが増えるのでグッと仕事がしやすくなります。
  一見Web知識は不要と思われる職種ですが、人事/管理の方こそこの入門講座が役に立つと感じました。

• デジタルマーケティングを担当する方

  デジタルマーケティングを担当する方は、HTML/CSSの知識を持つことでコンテンツの編集やランディングページのカスタマイズなどが可能になります。
  Web担当者に「タグを埋め込んでほしい」という依頼をするシーンも多いと思いますが、意味が分かった上で依頼できるようになります。

• コンテンツクリエイター、ブログライティングをする方

  ブログ投稿やウェブコンテンツの制作をする方であれば、HTML/CSSの知識はコンテンツの構成や見た目を整えるのに役立ちます。

• エンジニアの方

  もちろんエンジニアの方にも必須のスキルだと思います。サーバーサイドの方も、フロントのことが分かっていると全然違うと思います。
  （エンジニアではないので詳しく語れなくて申し訳ありません、、）

エンジニアレベルのスキルがなくても、HTML/CSSを理解していれば、担える業務の幅が広がり、クオリティ・生産性が高まります。

上記のようなポジションの方は、是非受講をおすすめします。

HTML/CSSの講座の受講で、会社にどのように貢献できるか

この講座の受講によって、以下のような形で会社の業務に貢献できるのではないかと思います。

• ウェブコンテンツの管理と更新

  HTML/CSSの知識を持つ社員は、ウェブサイトやウェブアプリケーション上のコンテンツを簡単に管理できます。新しい情報を追加し、既存のコンテンツを手軽に更新できます。

• 技術者とのスムーズなやりとり

  HTML/CSSの知識を持つことで、ウェブデザインやウェブ開発チームとのコミュニケーションが円滑になります。要件や修正内容を適切に伝え、協力しやすくなります。

• ウェブマーケティングのサポート

  デジタルマーケティング担当者と連携し、ランディングページの作成や広告キャンペーンの閲覧状況等の分析も行うことができます。

• 教育とトレーニング

  HTML/CSSのスキルを身に付ければ、他の従業員の方に基本的なウェブスキルを教えることができます。チーム内で知識を共有すれば、業務効率もアップできます。

• クリエイティブな領域の仕事

  HTML/CSSの知識を活かせば、ブランディングキャンペーンのウェブページデザイン、社内イベントのウェブサイト制作など、クリエイティブな発想を使った仕事で貢献することもできます。

このように、業務に役立てられることが沢山ありますので、一般職の方がITスキルを学ぶ上での入門的なスキルとしても、HTML/CSSは非常におすすめです。

東京ITスクールのオンデマンド講座「基礎から学ぶHTML/CSS習得講座」

いかがでしたか？

東京ITスクールのオンデマンド講座「基礎から学ぶHTML/CSS習得講座」は、Zoomでいつでも受講が可能です。

まとまった学習時間がなかなか取れない方も、業務の合間や移動中など自分のペースで学習を進めることができます。

日々の業務に取り組みながら、少しずつスキルアップしていきませんか？

基礎から学ぶHTML/CSS講座

基礎から学ぶHTML/CSS習得講座

今回は実際にHTML/CSS講座を受講した体験談をまとめてみました。

IT講座の受講を検討している方の参考になれば幸いです！

東京ITスクールでは、このほかにも150種類の講座を用意しております。

ご希望の講座だけを、お一人から受講いただくことが可能です。お気軽にご相談ください。

個別研修 – 東京ITスクール

また研修を受講したら記事にしようと思います。

最後までお読みいただきありがとうございました！

関連記事

【現役営業事務】ChatGPT活用！事務作業でも相談相手としても役立つ便利ツールの上手な使い方

ITリテラシー研修とは？実施すべき理由とおすすめ研修を紹介