【初心者】webサイトを作成する時に、HTMLとCSSを学習した方法を紹介【スキルアップ】

Crowded Shinjuku Kabukicho

こんにちは、書川(かきかわ)です。

2018年の夏からプログラミングを勉強し始めたのですが、WEBやメディアに関して全くの知識がなかった僕がどのようにしてプログラミング言語の習得をしているのかを書いていきます。

このメディアを作るまでの簡単なロードマップ

以下が実際に僕がこのブログを制作する際に学んだ言語。

HTML→CSS→WordPress→JavaScript(jQuery)→Sass

・はじめにHTML/CSSを学び、取り敢えずブラウザに何か文字を表示させるようにする。

・WordPressのテーマを自作する(PHP)。

・Javascriptの基礎を学び、jQueryで簡単な動きやプラグインを取り入れてサイトをリッチにする。

・Sassを導入する事でメンテナブルなサイトにする。

これらを勉強するときは、何十万円もお金を払って専門学校に通ったりやオンラインスクールを受講しなくても習得出来たというのが結果です。

今回は、HTML/CSSを学ぶことに関して以下で解説していきます。

HTMLとCSSを学ぶ際にお世話になった本

初めのうちは、ググって出てくる情報が本当に正しいのか知る由もない。たとえ運よく望んだ通りに動いたとしても、なぜそのように動いたのかを理解出来ないままでいる初学者は少なくない。

そこで、僕が実際に初心者のうちにお世話になって今でもあって良かったと思える本を紹介する。

HTMLはこれ一冊で必要十分

CSS・Sassの技術書で他にここまで丁寧に書かれた本は少ない。

※SassはCSSのメタ言語。初学者がいきなり導入するには負担が重いので、すでに製作した成果物のCSSをSassにしてみるなどして試しに導入を検討することをお勧めします。

HTML/CSSはフロントエンドエンジニアだけでなく、データ分析を行う際にも理解していないと困ってしまう本当によく使われている言語だと、Pythonを仕事上で使う際に感じた。

それに、HTMLはセマンティックに書かないとサイトの骨格の意味が分からなくなったり、CSSの場合はBEMを理解した上で設計しないと、LPならいいけど、保守や管理の際にとんでもなく面倒になったりするなど、意外と奥が深い言語だと知った。

とはいえ、まずは言語の基本的な働きを理解できれば問題ない。技術書を手元に置いて理解出来る様になれば、怖いものは無くなるのは事実。

HTMLやCSSがどのような特徴を持っている言語で、それぞれがどのような働きをしているかを知ることが目的であり、記載内容を全て暗記をする必要はないので安心してください。

必要な本を手に入れて満足してもサイトは出来ません。

ただ一つ言いたいことは、技術書をみるだけでは実力が着くほど単純ではないということ。大事なのは参考サイトを模写したり、手を動かして実際に成果物を作ること。

僕がいつもお手本にしているWEBサイトは以下の3つです。学ぶは真似ぶと言われているのでたくさんのサイトを真似して、引き出しを増やしていきましょう。

https://responsive-jp.com/https://responsive-jp.com/

https://io3000.com/https://io3000.com/

https://webdesignday.jp/
https://webdesignday.jp/

web開発者は、デベロッパーツール(検証モード)で少しでも楽をします。

楽をするということは手を抜くということではなく、もっと有益で価値の高いことに時間を効率的に割くこと。出来る限りツールを活用して楽をすることをお勧めする。

好きなwebサイトを見つけたら、Macユーザーは⌘ + shift + cを入力し手見てください。下からたくさんのコードが書かれているページが出てきます。これがデベロッパーツール(検証モード)。このツールはこれからweb開発しようと考えている方には必須だから是非活用してください。

本以外なら、動画で学ぶ事が可能。

本を読むことで理解を深めるのもおすすめだけど、効果的だと感じた勉強法は動画で学ぶこと。

もし、動画をみることが出来る環境がある方は、この方法は特におすすめ。なぜ、動画で学ぶことがオススメなのかは以下で説明していく。

これからWEB言語を学びたい方に一番の不安なところは、自分の書いているコードが本当にこの書き方であっているのか。ということを確認できないこと。

僕もそうでしたが、メンターがいないと先に進まないこともある。当たり前だけど、分からないことが分からないのが独学者の悲しいところ。

本には体系的で基本的なことが載っているけど、僕がお勧めする動画であれば、0から完成までの一貫した流れでコンテンツの作成方法を解説しており、本だけで得られる情報量をはるかに超えていた。

巷では何十万円もするオンラインスクールが有名だけれど、そんなものは必要ない。僕は1人でもくもくと課題に立ち向かいたい性格なのと、オンラインスクールの先生?がどこの誰かも分からないのが不安。

Udemyではプログラミング言語だけではなく、デザイン系やデータ分析系、動画製作系など、エンジニアを目指している方以外でも学びたい講座を見つける事ができる。さらに一度購入した講座の視聴制限はなく、いつでも好きなだけ視聴することが出来るのは安心。気に入らない講座は特定の期間内であれば返金も可能とのこと。



努力している人はみんなが休んでいる時にこそ行動している。

努力というのは時間の経過ではなく、作業量で圧倒的に差がつく。動画は速度を調整して再生が出来るから、2倍速にして爆速でインプットしている。限られた人生で時間は無駄に出来ない。控えめに、動画のコスパは最高だ。

まずは動画で、HTML/CSSの全体像を掴むことで徐々に自分の分からないことが明確になってくる。そのあとは分からないことを誰かに頼るのではなく、自分で本などで調べて解決出来る「自走が可能な状態」になってくる。

高いお金払って先生を雇う必要はないと、このウェブサイトを作って感じた。