前回の記事では
発達障害の私が
短時間勤務でも
ある程度の収入を確保するために得たスキルと
習得方法についてお伝えしました。
まだチェックしていないという方は
>>こちらからどうぞ。
で、その中で
お伝えしたスキルで
HTMLというものがありました。
ある程度Webデザインの勉強を
している方や、
プログラミング関係に
詳しい方であれば
ご存知だと思いますが、
以前の私のように
全くの初心者である方や
これから今後のために
新しく何かを学ぼう
と思っている方にとっては
HTMLってなんぞや？
というのが率直な感想ではないでしょうか。
そこで今回は、
これまでWebデザインについて
学んできた私が、
HTMLとは一体何か？ということや
勉強してできるようになったこと
などをお伝えするとともに、
ちょこっと
これらを勉強することになった
経緯についても綴っていこうかなと
思います。
スポンサードリンク
転職成功を夢見て始めたHTMLの勉強…
まずは、
私がHTMLを学ぶことになった経緯について。
そんなのいいから早く本題へ、という方は
学校というエスカレーター式で
人生が進んで行く社会に長らく属し、
その後、
“これからは自分で金を稼いで生きていけ”
と言わんばかりに、
突如として
本当の社会の荒波の中へ放り出された
20代前半の私…。
将来のことや
自分がどんな仕事をしていきたいのかなんて、
専門学校在学中に
微塵も考えていなかった私は、
正社員への就職が失敗しただけではなく
とにかく仕事自体が長続きしませんでした。
そんな私が
転職をくり返す理由として
自分なりに考察していたのが、
仕事が自分に合っていなかったから
というもの。
そのため、
仕事をしていて
楽しい！やりがいがある！
と、感じられるような
いわゆる天職に
巡り会うことを目指し
転職に次ぐ転職を
ただ、ひたすら繰り返してきたのです。
そんな転職人生を送る中、思ったことが
「いくら新し職に就こうと
何のスキルもない私ができることといえば、
だれでもできるような仕事のみ…
これではいつまでたっても仕事に
やりがいを感じられることなんてありえない…」
と、いうことです。
そこで思い立ったのが
手に職をつければいんじゃん！
てことです。
仕事で役立つスキルを身につければ
より待遇の良い仕事を得ることができるだろうし、
仕事に対するやりがいも
楽しい！という感覚も得ることができる。
その結果、
転職をくり返すことなく
着実に社会人としての
キャリアを構築することができるだろう、
そう思ったからです。
ただ、
特別な才能もなく
大学や専門学校で
何か仕事に役立つような専門知識を
学んできたわけでもない
超凡人の私が、
今から一体何ができるのであろうか？
自分にできることは？
と、思い悩んだ結果、
これならいけるんじゃないかと
目をつけたのが
Webデザインです。
当初は転職の成功を目的に
勉強を始めましたが、
今では
1日8時間以上という長時間を
”会社”という閉鎖された空間で過ごすこと、
自由を完全に無視した生活を
送る事が私には不可能である
と悟った由紀子にとっては
副業や在宅ワークで
役立つスキルとして、
期待を寄せているわけです。
HTMLとは何か？これでできることは？
さてさて、
やっとこさ本題へ入っていきますが
そもそもHTMLってなんだよ！っていうのが
この記事を読んでいる方の
率直な疑問だと思います。
ここからは
これまで私がHTMLを勉強してきて
できるようになったことやわかった事、
今後の人生にどのように役立つのか
ってことなどを、
自分なりにお伝えしていこうと思います。
HTMLはWebサイトを作るための言語
インターネットが情報源の主流となった今、
何か調べたい時、
暇つぶししたい時、
ほしいものがある時など、
とりあえずネットで検索
という行為を私たちは行っています。
その、
ネットでググった先に出てくる
Webページというのは、
そのほとんどが
HTMLという言語を使用して
作られています。
言語といっても
日本語や英語と違って
プログラミング言語になるので
そっち系に知識のない方にとっては
”Webサイトを作る言語”と言われても
イメージつきにくいと思います。
なので、
具体的にHTMLは
どんなものなのかを簡単に説明すると、
<html>～</html>
で囲われた中に
ずら～っと
サイトを構成するための
プログラムが書かれています。
…と、言われても
なんのこっちゃ、といった
感じだと思うので、
実際にHTMLで作られた
サイトの例を見てみましょう。
まずは私がHTMLで
適当に作ってみたサイトをご覧ください↓
（下の画像をクリックするとサイトが見れます）
で、このサイトが
どんな感じで作られているかというと
下記のようなコードをせっせと
エディタ（パソコンのメモ帳的なもの）に打ち込んで
作られています。
【サイトを構成するHTMLコード】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>What's htmlのページだよ</title> <link rel="stylesheet" href="normlize.css"> <link rel="stylesheet" href="styles.css"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <header> <img src="images/head_01.jpg"> </header> <div id="main"> <div class="container"> <div class="left"> <img src="images/img2.jpg"> <p> このページはhtmlで作られています。このページはhtmlで作られています。このページはhtmlで作られています。 こうやって画像を配置することもできるよ。お好みのイラストや写真を無料素材のサイトから ダウンロードして貼り付けました。イラストが得意なら自分で作ったりできるのかもしれないけど、絵心がない由紀子には素材サイト が強い味方です。 </p> </div> <div class="right"> <img src="images/img1.jpg"> <p> htmlのお勉強。htmlのお勉強。htmlのお勉強。htmlのお勉強。htmlのお勉強。 私がHTMLのお勉強を始めたのが今から5年ほど前のこと。ちょっとでもわからないところがあると先へ進めなく なってしまう由紀子は、スクールでいちいち講師に質問することができなければ途中で挫折していたことでしょう。 コーディングの仕方を覚えて自分でサイトを作れるようになるのは楽しいですが、1つのサイトを完成させる前に飽きてしまうのが課題です。 </p> </div> <div class="clear-fix"></div> </div> </div> <div id="footer"> <p>© 2019 yukiko_blog.</p> </div> </body> </html> |
はい、
実はWebサイトというのは
こういったプログラムっぽいものを
コツコツとパソコンに打ち込んでいって
作られているんですね～。
私がまだ中学生くらいの頃、
インターネット
というものがやっと普及しはじめた当時は、
ホームページビルダーとか
誰でもWebサイトを簡単に
作ることができるツールを使用して
楽しみながら簡単に
自分のホームページを作るんだよ～
という方法を学校の授業で学んだ覚えがありますが、
通常、サイトを作る際は
こんな文字の羅列によって
作られているわけです。
HTMLについて学ぶ前の私のように
Webデザインについて
全く触れてこなかったという方にとって、
サイトがこんな風に
作られているというのは
ちょっと驚きかもしれません。
ていうか、
なぜこんなローマ字を
並べるだけで
グラフィカルなWebサイトが
出来上がるのか、
それが不思議なところです。
HTMLがどのようなことに
なっているのかを簡単に説明すると、
ソースコード(HTMLで書かれているプログラム)
の中にたくさんある
<>で囲われている
ローマ字を”タグ”といいますが、
タグにはそれぞれに意味があります。
リンクを張るためのタグだったり
文字を記述するためのタグ、
見出し用のタグなど
サイトの構成によって
タグを使い分けることで
思い通りのデザインを作り上げる
ことができるわけです。
例えば、
先ほどお見せしたソースコードの中に
いくつか登場する
<img src=”～”>というタグ。
こちらは
画像を挿入するときに
使うものになります。
“～”の部分に
挿入したい画像の保存先と
ファイル名を記述することで
お好きな画像を設置することができます。
例えばヘッダー部分に
記述してある
<img src=”images/head_01.jpg”>
の場合だと、
”images”というファイルの中に
保存してある
”head_01.jpg”という名前の画像を
配置したいよ、という意味になります。
で、無事コードを
ミスなく記述できると
コレ↓がサイト上部に
表示されるというわけです。
head_01という名前の画像
HTMLで広がる今後の選択肢
HTMLについて
「へぇ～、そうなんだ」と分かったところで、
ではこのスキルを身につけることで
どうなるのか、何ができるようになるのか、
今後の人生の何に役に立つのか
ということが気になるところです。
なので、
HTMLを学ぶことでできるようになることや
今後の自分の人生の可能性が
どのように広がるのか
ということについてまとめてみます。
【HTMLを身につけると】
- 手に職が就く
- 仕事の選択肢が広がる
- 在宅で仕事ができる
- 特別なことをやってる感が得られる
HTMLというのは
Webデザインのスキルです。
もちろんHTMLを学んだだけでは
高度なデザインのサイトを作成
することはできませんが、
はじめの一歩としては
必ず通らなければならない道ですし
勉強していて楽しいと感じれば
さらに必要なスキルは必然的に
身につくものです。
で、
こういったスキルが身についていくことで
今後の自分の人生が
どのように変わっていくのか、というと
The・凡人の私が
憧れにあこがれていた
”手に職をつける”ということが
可能になります。
ソースコードを見ていただいても
わかる通り、
全く知識のない人からすれば
「これどうやって書いてるんですか？？？」
ってなると思います。
なのでスキルが身についていれば
自分自身の希少価値を
高めることにもつながりますから、
当然選ぶ仕事の幅も広がってきますし
お仕事のお給料も
誰にでも簡単にできるものよりは
高くなっていきます。
また、
ここ最近私が狙っている
家に居ながらにして仕事をする
ということが
比較的叶いやすい
仕事を得られる可能性があります。
つまりは
在宅ワークができるスキルを
身につけることができる
というわけです。
以前にも何度かご紹介している
クラウドソーシングサイト
>>クラウドワークス 
などを利用することで、
自分で仕事を得ることもできますし
HTMLを使用したお仕事というのは
ライティングやアンケート記入などのお仕事に比べて
格段に単価が高くなっているため、
在宅のお仕事を
生活の柱としたい方にとっては
強い味方になるでしょう。
|
【おすすめ】 ▼挫折リスクを低くしてスキルを身につけるには
|
劣等感や承認欲求を満たすのにも役立つ
私のような
常日頃から満たされない承認欲求や
劣等感を抱えている人間にとって、
”社会”という中で
生活を行っていると
「自分とは一体…」という感覚に
陥ることがあります。
世界の隅の隅の
端っこあたりで決して目立つことなく
悶々とした日々を送る私にとって
特別なスキルを持っている
というのは、
自分自身を肯定するうえで
かなり強い味方になってくれています。
バイトでうまくいかないことがあり
劣等感を抱えながら帰宅したとしても、
パソコンに向かって
ひたすらカタカタとコードを
打ち込むことで、
「…こんなこと、あのバイト先でできる人はいないだろ（と、ひねくれた考えを持つのがよいか悪いかは別として…）」
といったように
特別なことをやってる感を
持つことができるのです。
ちょっとしたことでも
他の人が簡単にはできないスキルを
身につけているということは
社会の中ではコテンパンに
自分のダメさ加減を目の当たりにされ
自信という自信を奪い去られた私にとっては
時に、
生きていく力になってくれることもあります。
（ちょっと大げさか？）
なので、
Webデザインができるようになりたい
と思っている人だけではなく、
自慢できるような特技や才能がないので
何かスキルを身につけたいという方、
自分に自信を持ちたいという方にも
HTMLでスキルアップ
というのはおすすめです。
最近ではわざわざ
駅前まで出向いて行って
パソコンスクールへ通わなくても
自宅に居ながらにして学びことができる
オンラインスクールもあるので、
住んでいる場所による
学びの格差もなくなりつつあります。
【参考】
⇒Webデザインも学べるプログラミングのオンラインスクールのCodeCamp 
この記事を読んで
HTMLに興味を持たれた方は
何かとメリットの多い
Webデザインのスキルを
身につけてみてはいかがでしょうか？
スポンサードリンク