皆さんこんにちは！hbstanです。
賢く生きるをテーマに役立つ情報をアウトプットしています。
今回は社内ポータルサイト担当することになった機械エンジニアの私が、本業では一切使用しないHTML&CSSを独学で実際に覚えた方法を書いていきます。
今後Web関係の副業を考えている方にも役立つかもしれません。
と言う方の参考になればと思います。
全くの未経験から学ぶ時、未経験からエンジニアを目指す時、相談できる相手がいないと辛いですよね…
HTMLとは
HTMLとはHyper Text Markup Languageの略称です。Webページを表現する為の静的な言語であり、基本となるものです。
皆さんが見ているこのページも、ページのソースを表示すると<！DOCTYPE HTML>から始まっていることがわかると思います。
スポンサーリンク
私がHTMLとCSSを覚えようとしたきっかけ
私がHTMLとCSSを覚えようと思ったきっかけは、社内ポータルサイトの担当になったことから始まります。
本来の仕事はホームページとは無縁の機械エンジニアです。エンジンとかやってますね。
先輩が編集しているところを見て面白そうだなと思い、先輩に「やってみたいです！」と自ら志願して引き継ぎました。
当初はホームページビルダーを使用して編集していたのですが、慣れてくると
これがとてもめんどくさくい…
ホームページビルダー自体が悪いわけではありません。ただやりたい操作に行きつくまでが少し長くてめんどうだなと思っていました。
そんな時、先輩が社内ポータルサイトを新しく作り替えようとして中途半端にしているものを発見し、続きを作ろうと思い立ちます。
しかし時間がかかってしょうがない…
めんどくさい！ならばもうホームページを編集する言語を覚えて、まるっきり新しいものを作ってしまえ！
と一念発起し、覚えようとしたことがきっかけです。
スポンサーリンク
HTMLとCSSを覚えるために実際にやったこと
覚えるためにやったことを順番にお伝えします。
ネットで調べてコピペで実現
未だにやることがあります。
最初はまず何ができるのかもわかりません。
なのでネットを駆使して
ホームページ フォント変更
ホームページ 写真挿入
などと検索しました。
そしてそこにはご丁寧にコードが書かれていますので、それをコピペしてポータルサイトに反映させていくことで、まず何ができるのか、こうしたいときはどうなるのかなど興味を持つことができました。
この頃はホームページビルダーにも直接HTMLを編集できるところがあるので、ホームページビルダーでの直感的な作業とHTMLを使用した編集を併用しながらやっていました。
ちゃんとバックアップを取りながら…もしもの時に備えてバックアップは大切です！
ひたすらテキストエディタのAtomでHTMLとCSSの写経
その後はHTML&CSSの参考書を買い、自宅で毎日ひたすら入力→ブラウザで確認とやっていました。
この頃は晩ごはんを食べるのも忘れて夜中までやっていましたね。
この時テキストエディタというものを知り、当時はAtomを使用していました。
Atomを使用していた理由は、見た目がかっこよかったからです(笑)テキストエディタの補助などがあるととても便利ですね！
またドットインストールの動画を見ながら写経もしていました。
いざテキストエディタを申請して社内で実践
テキストエディタのインストールを会社で申請し、写経して覚えてきたHTMLとCSSを使用しながら、現在あるポータルサイトの改修をするようになりました。
この頃にはホームページビルダーを使用することはなくなりましたね。
そしてテキストエディタをVisual Studio Codeに変更しました。
変更した理由はより使いやすかったからです。特にショートカットキーが便利！ Ctrl+Shift+L押すと選択した箇所と合箇所を全選択が便利です！
HTMLとCSSのセミナーを受講
ほぼHTMLとCSSをこなせるようになった頃に、東京で行われた有料のHTMLセミナーに参加しました。会社で申請したので無料です！
偉そうにも今まで覚えたことの復習という位置づけで受けたのですが、セミナーで受けた内容ほとんどがすでに理解しているものでした。
しっかりとHTMLとCSSが自分のものになっていると実感することができました。
とにかくやってみる、わからなくても試しにやってみる、ダメだったら戻すという感じでやってきた感じですね。
新ポータルサイト作成
その後私は今まで学んだことを踏まえ、1から社内のポータルサイトを作成することにしました。
すると…思ったよりも頭で考えたものをすんなり、すぐに作ることができました。
残念ながら会社使用している為見せられませんが、シンプルで見やすいものができたかなと思っています。
前のポータルサイトがカラフル過ぎたのもありますが…
とにかくHTML、CSSを触ってみよう
いかがだったでしょうか。
私の覚え方は、とにかくやって触ってみた、これに尽きるかと思います。
最初は英数字が並び、受け入れ難いところはありますが、慣れてしまえば早いものでした。
よく使うタグも限られていますしね。
人によってやり方、学び方はあるかと思いますが、百聞は一見にしかず。
まずはとにかく試しにやってみて覚えていけたらいいかなと思います。
1番の近道はプログラミングスクールに通って、とにかく実践することかもしれませんね！
転職活動も出来るようです。
最後まで読んで頂きありがとうございます。
