パソコン初心者から1年。HTML&CSSをやってみた。

プログラミングをする女性のイラスト
 目 次

  1. 勉強のきっかけ
  2. その時できなかったこと
  3. HTML&CSSとは?
  4. 勉強方法を見つけるまで
  5. 勉強してみた
  6. まだまだ勉強中

1.勉強のきっかけ

2020年の3月から、旅行業界は死に体。。。
せっかくできた時間だからと今までまともに勉強したことがなかったパソコンの勉強をしてみました。

春からWord、Excel, Power Pointとの順に勉強し、8月までにこれらのMOS(Microsoft Office Specialist)資格を取得しました。
詳細は①WORD編②Excel編③PowerPoint編をご覧ください。

秋になると、「Go-toキャンペーン」が始まり、一気に国内ツアーが盛況になりました。
久しぶりに添乗の仕事が忙しく、ありがたかったです。
しかし、浮かれすぎて?感染者が増え、年末からまた規制が始まりました。
業界は再び死に体に。。。私には時間がたっぷりある。。。ということで。。。

パソコンの勉強が面白くなっていた私は、次に何を勉強しようか?と模索し始めました。
あれこれ調べるうちに、プログラミングの勉強でもしようかという気持ちになりました。
厳密にはプログラミング言語ではないそうですが、HTMLが一番勉強しやすいという情報を得ました。
今さらWeb デザイナーになれるわけもないけれど、「お調子者」精神で始めてみることにしました。

2.その時できなかったこと

全部。HTMLという言葉をこの時初めて知りました。

3.HTML&CSSとは?

自分も最近まで知らなかったのに、HTMLの説明なんて、スミマセン!
HTMLとは、ハイパー・テキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の略です。
最も身近なところでは、このブログや、ホームページなどもHTMLで書かれています。
Web ページを右クリックし、「ページのソースを表示」という項目を選択すると、

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
<title>私のブログ</title>
</head>
<body>今日の出来事</body>
</html>


といった感じで始まり、たくさんの言葉が並んでいます。これはコンピューターが読み取って、私たちが入力した文章を<>タグで囲んで役割を指示します。
<title>はタイトル、<body>はその内容です。
Webページの文章の土台作りがHTMLです。

CSSとは、スタイルシートのことです。
HTMLで作られたWebページに装飾やレイアウトを加える仕組みです。
文字の色、背景の色、余白の量、段組み、表示の位置などを指示します。
HTMLで作った土台にどんな装飾をするのかが、CSSです。

HTMLとCSSはセットで学びます。

4.勉強方法を見つけるまで

勉強を始めるにあたり、You Tubeで方法を探ることにしました。
パソコンを見るアザラシのイラスト

「入門編」「初心者向け」と謳っている動画をたくさん見ました。が。。。

自分だけ解っているので、基本的なことを飛ばしたり、「これは後で出てくるので」と言って、勝手に次の説明に進んでしまう人が残念ながら多いです。
言葉が不明瞭で、何を言っているかわからない人までいました。

全体的に無愛想系ボソボソ兄さんが多いので、見ていて勉強気分が盛り上がりません。

そんな中、大変わかりやすく説明している動画に出会いました。

5.勉強してみた

それがManaさんのYou Tube動画です。
Manaさんの動画は、言葉が明瞭で、わかりやすく解説をしていて大変好感を持ちました。
ボソボソ兄さんを見てしまった後でしたので、特にそう感じたのかもしれませんが。。。

Manaさんは「Webクリエーターボックス」というブログの管理人で、こちらでもHTML&CSSをわかりやすく解説しています。
書籍も出版しており、「1冊ですべて身につくHTML&CSSとWebデザイン」は入門書として
1番人気のようです。都内の大きな書店でも、目立つところに並べてありました。

ちなみに「挫折しない」という副題の本も買ってみましたが、私は挫折しました。
You Tubeも本も、かなり色々調べましたが、Manaさんの本や動画が私には一番わかりやすかったです。

Manaさんの動画に従って勉強して、本も買ってHTML&CSSの基礎は大体わかりました。
MOSの時と違うのは、試験を受けて合格することを目標に勉強するのではなく、基礎的なことができるようになった後は練習あるのみ、ということです。

私にとってラッキーなことは、英語に抵抗がないということです。
前出の <!DOCTYPE html>は「Document TypeはHTML」という意味です。
ほとんどすべてにおいて、英語やその略語のようなタグやコードを書く作業となりますが、
英語に慣れていない方には難しいのでしょうか?

でも、興味を持って進んでいけばすぐ慣れると思います。とにかく始めてみてはいかがでしょうか?何となく知っているのと、まったく知らないのでは大きな差があります。

6.まだまだ勉強中

何だかすっかりできるような書き方になってしまいましたね。
このブログはGoogleのBloggerで書いていますし、いまだにできないことだらけです。
ゆっくり進んで行けばいいかな?とゆる~く考えています。

💬
昨年までUSBも知らなかった私が、今年はHTMLの勉強をしているなんて!
本を買う前にManaさんの動画を見てみて、興味を持ったら始めてみると良いですよ。
ダメでも損をすることはひとつもありません
私でもなんとか理解できているので、皆さん大丈夫です。世界が少し広がります。 

コメント