【独学でマスター】HTMLとCSSの勉強方法をわかりやすく教えます
- CSS
- HTML
- WEB制作
HTMLとCSSはWebサイトを作る際に欠かせない言語です。
つまり、Webサイトを作るの仕事がしたいのなら、現状HTMLとCSSは、ほぼ必須のスキルといってもいいでしょう。
しかし、まったくHTMLとCSSを知らない人が1から勉強するのは少々ハードルが高いはずです。
筆者自身、今の会社に入社する前は独学で勉強していましたが、
何から手を付けていいのかわからず、苦労した思い出があります。
なんせ今まで日本語を多く見てきたはずなのに、急に大量の英語や記号が視界を襲うわけです。
慣れないうちは、どこか体調が悪くなった気さえします。
なので今回は、過去に筆者が行ったHTML、CSSを独学での勉強勉強方法と、実際にWeb会社に勤務している経験も元に、完全初心者さんに向けてHTMLとCSSを独学で勉強する方法をご紹介させていただきます。
前半は、HTMLやCSSがどのような言語なのかを説明するため、多少知識をお持ちの方は読み飛ばしていただいて結構です。
もくじ
HTMLとCSSを勉強する前に
さて、実際に勉強する前にこの2つの言語がどういう用途で使用されるのかなどを書いていきます。
今から勉強する言語なので、理解しておいて損はないでしょう。
色々な意見がありますが、HTMLとCSSはWebサイトを構築するためのマークアップ言語です。
この二つを習得すると、様々なレイアウトのサイト構築が可能になります。
一般的なプログラミング言語と比較して、HTMLとCSSの学習難易度は低く個人的には初心者さんが独学で習得するのに適している言語だと考えています。
ここで言う学習難易度とは、完全習得ではなく簡単なサイトを構築するまでの習得難易度を指しています。
HTMLとCSSは別々の言語ですが、Webサイト制作の用途で使用する場合、両方扱えるようになって初めて思い通りのレイアウトをWeb上に再現できるようになります。
なので、両方しっかりと学習していきましょう。
HTMLとは
HTMLとCSSはセットで紹介されることが多いのですが、実は役割が全く違います。
HTMLの役割を一言で表すのなら、Webサイトの構造を作るマークアップ言語。
人間で例えるのなら、骨格です。
HTMLのは略称で、本当は「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」という名前の言語です。
各単語の頭文字をとってHTMLと呼ばれています。
実は、今皆さんが見ているこの文字もHTMLで記述したものということです。
CSSとは
上記ではHTMLの説明を簡単にさせてもらいました。
続いてはCSS。
CSSを一言で表すなら、主にWebサイトの見た目を指定するマークアップ言語です。
人間で言うと皮膚に近い感じです。
サイトの色とか文字の大きさとかはまさしく、CSSで指定されているものですね。
他にも簡単な動きならつけることが可能。
HTMLが全く同じでもCSSの指定次第では全く違うデザインのサイトにすることができます。
ちなみにCSSは、Cascading Style Sheets（カスケード・スタイル・シート）といいます。
HTMLと同じく頭文字をとってCSSと呼ばれているわけです。
JavaScriptは後から勉強しても問題ないのか
現代のWebサイトはHTMLとCSSだけでなく、JavaScriptと呼ばれるプログラミング言語を用いて、サイトに動きをつけることが多いです。
コンテンツが横から出てきたり、ふわっと浮かび上がってきたりするサイトですね。
あれはほぼJavaScriptを使用して動きをつけています。
実際いくつかの参考書では、HTML、CSS＋JavaScriptって感じで紹介されているものが多々あります。
そこで抱く疑問が、JavaScriptも一緒に勉強したほうがいいのか…？
というものでしょう。
結論から申し上げますと、どれくらい学習に費やせる時間があるかによって異なります。
ただ、3つのことを同時進行で覚えなくてはなくなるので、筆者個人の考えでは学習効率がやや悪くなると考えています。
基礎を固めるためにJavaScriptは一旦に忘れて、HTMLとCSSの学習に専念したほうが確実に早くスキルが身につくのは確かです。
しかし、一人前のコーダーになりたいのならJavaScriptは後々ぶち当たる壁なので、最初のうちでまとめて覚えてもいいでしょう。
もちろん、HTMLとCSSを身に付けてからJavaScriptの勉強をしても問題ありません。
そのあたりは、自分が目指すもの、使用したい用途によって変わってきます。
ちなみに、何も考えずに勉強を始めた筆者はJavaScriptという言葉もろくに知らず、HTMLとCSSの勉強のみをひたすらに行い、入社後にJavaScriptをしております…。
HTMLとCSSはカンニングしても良い
これ意外と盲点なのですが、HTMLとCSSに限らず、ほぼ全てのプログラミング言語も含めカンニングOKです！！
学校のテストではないので、わからないことはどんどん調べましょう。
コーダーが本職の筆者でもすべてのHTMLタグを覚えているなんてことはないです。
よく使用するHTMLタグ、よく使うCSSのプロパティや技術を覚えている程度です。
無数にあるHTMLタグやCSSのプロパティをすべて暗記している人なんて、おそらくほとんどいません。
筆者の考えでは、それをすべて暗記する気力があるのなら、別のプログラミング言語を習得したほうが有意義と思っています。
なので、わからないことは調べる、1度調べたものはなんとなーく覚える。
よく使用するようならしっかり覚える！くらいの気楽さで勉強に挑んでもらって問題ないです。
HTML・CSSの勉強方法
過去に私が行った、HTMLとCSSの勉強方法をご紹介いたします。
このまま実践していただいても構いませんし、アレンジを加えていただいても問題ありません。
HTMLとCSSの勉強方法の工程はざっと下記の手順通りです。
- Progateで基本を学ぶ
- 参考書も購入し、ひたすら実践してみる
- 参考サイトを探し、模写コーディングをしてみる
HTMLとCSSの勉強方法はこれだけです！
この3ステップをしっかりやれば、簡単なサイトくらいなら、3カ月～6カ月前後である程度まともなものが作れます。
では、この3ステップをもっと詳しく見ていきましょう。
Progateで基本を学ぶ
Progateという言葉を知っている人もいると思います。
初心者が0からHTMLとCSSを勉強したい場合どうしたらいい？
と質問するとおそらく半分くらいはProgateを進めてくれるでしょう。
Progateとは、ブラウザ上で様々なプログラミング言語の基礎を勉強することができるサービスです。
本来、HTMLとCSSを書くならテキストエディタのインストールが必要なのですが、インストール後の初期設定やカスタムに時間を割いてしまうのは勿体ないので、Progateを使用して、基礎をサクッと学習してしまいましょう。
Progate自体非常にわかりやすく、実際にコードを書きながら学習を進めていくことができるので、HTMLやCSSの打ち方や基礎技術を確実に覚えることができます。
特に、HTMLやCSSを勉強したいけど、何から手を付けていいのかわからない…。
という人は真っ先にProgateをやってください。
とりあえず、無料でできる初級編まではクリアしてみて、もっとProgateを使用して勉強がしたいという人は有料の中級編以降へ進みましょう。
参考書も購入し、ひたすら実践してみる
Progateを基礎は覚えた！と思えるくらいまで、勉強出来たら、いよいよエディタをインストールして本格的な勉強をしていきましょう。
エディタといってもその数は無数にあります。
なので、おすすめ…というか無難なエディタはVisual Studio Codeです。
最近Visual Studio Code、通称VSCodeを使用している人が多いため情報がたくさんあるのが理由です。
ひとまずインストールがすんだら下記のURLに従って、初期設定なんかをしてください。
VScodeを使う前に – おすすめ初期設定と最低限の拡張機能をセットする
エディタのインストールがすんだらもっと実践的な技術を身に付けるために参考書を利用しながら勉強を進めていきます。
なぜ参考書で学習を進めていくのかを説明すると、手っ取り早く実践的な技術や基礎技術の応用が理解できるからです。
ネットを使って検索というのも一つの手ですが、ネットは調べたことしか教えてくれません。
なにより、毎回毎回検索して学習するのはめんどくさい…。
中級以降はピンポイントで欲しい技術がわかるようになってくるので、その場合はネットで調べたほうが圧倒的にいいのですが。
それに比べて参考書はどうでしょうか、特に調べなくても購入するだけでその作者の持っている技術が書かれているわけです。
そして、参考書を読んでも理解できない技術のみネットで検索してみる。
個人的にはそっちのほうがわかりやすくて良い。
加えて筆者は、コストをかけずして得られるスキルはないと考えております。
参考書もしっかりとした3冊程度の本を持っておけば最初のうちは問題ありません。
その参考書にかかる費用も1万円前後。
今後その1万円で得た技術でお金を稼ぐのなら安い先行投資です。
さて、本題の参考書を使った勉強方法ですが、とりあえず、参考書を読んでみる。もちろんPCの前で。
そして、参考書に乗ってあり自分がわからない技術をひたすら実践。
CSSではどのプロパティがどういう動きをしているのかに注目しながら進めていくのが重要です。
筆者が実際に最初のころに購入した3冊の参考書は下記の通りです。
特に、「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」は非常わかりやすく説明されており、初心者さんもしっかりと学べるのでおすすめです。
参考サイトを探し、模写コーディングをしてみる
基礎を学び、実践的な基礎を学びました。
満を持して実践編に移りましょう。
まずは、参考サイトを探すところからですが、参考サイト探しには下記URLのところから探しましょう。
なるべくシンプルで簡単そうなものから手を付けてください。
いきなり難しいサイトを作ろうと思うと挫折につながるため、簡単なものからを鉄則に探してみてください。
良いものが見つからなときは、「Webサイト 参考」あたりのキーワードで検索するとサイト集を掲載しているサイトが多く出てくるので、その中から探してみてください。
模写コーディングがまだ難しいと思っている方は、下記URLへアクセスして簡単な課題からしてみるといいですよ。
Adobe XDを使用しますが、ブラウザに完成サンプルを表示してそれを見ながら構築していけば不必要です。
模写コーディングをしていると画像はどうすれば良いのか悩んでしまうと思うのですが、基本的に枠だけ作ってスルーで問題ありません。
それは、フリー素材のサイトから代わりの画像を引っ張て来てください。
あくまで、完全コピーを作成するのではなく、HTMLとCSSになれることが目的なので、そこまで気にしなくて大丈夫です。
また、動きのあるサイトも多くあると思うのですが、それも先ほど言ったようにJavaScriptなどで動きを付けているため、こちらも一旦スルーでいいでしょう。
まとめ
HTMLやCSSを独学で勉強するのは不可能ではありません。
自分に合った方法で勉強すれば必ず身につきます。
本記事ではあくまでその勉強方法の1つを紹介させていただいただけの話です。
必ずしも、この方法が正解ではありません。
また、HTMLやCSSの勉強を始めたいがハードルが高いと感じるようならば、Progateを利用し気軽に勉強してみてください。
最初は難しいかもしれませんが、慣れてしまえばとても楽しくて魅力のあるHTMLとCSSぜひ勉強してみてください。
