プログラミングを始めたばかりの人にとって、HTMLとCSSは難しいのは無理ありません。
しかし、難しさの原因と乗り越えるためのコツを知ることができれば、他の言語に比べて格段に理解しやすい言語です。
HTMLとCSSの使い道は幅広く、応用が効く言語なので今のうちにマスターしておけば、将来役立つこと間違いありません。
例えば、
HTMLとCSSを使えば、WEBサイトをデザイン通りに表現することが可能です。
そのスキルはホームページを制作する場合だけではなく、WEBサービスを作った後にも必要になってきます。
内容の濃くて役立つコンテンツや暮らしを豊にするサービス内容であったとしても、WEBサイトのデザインや作りが見やすくなければ、人に知ってもらえません。
このように、インターネット上でビジネスをする上で、大切な見た目や構造を作るための言語がHTMLとCSSになります。
HTMLとCSSをマスターできれば、「私はプログラミングができる」と言えるのではないでしょうか。
今回はプログラミングを学び始めた人に向けて、プログラミングの登竜門でもある「HTMLとCSSをマスターするための上達方法や習得するためのコツ」について記事を書きました。
この記事を最後まで読むことによって、HTMLとCSSって意外と簡単に習得できるかもしれないと感じられるでしょう。
本記事を読んで欲しい人
- HTMLとCSSに挫折した人
- HTMLとCSSを勉強してもわからない人
- HTMLとCSSをはじめたいけど、挫折しないか不安な人
本記事の内容
- HTMLとCSSでできるようになること
- HTMLとCSSが難しい3つの理由
- HTMLとCSSがスッキリわかる4つの方法
- HTMLとCSSがわからない時にチェックするポイント
Contents
HTMLとCSSでできるようになること
HTMLとCSSはWEBサイトの画面を制作するときに使われます。
このブログで言うと、今見えているサイトのデザインや構造はHTMLとCSSです。
簡単にHTMLとCSSの役割をかくと、
HTML：骨格
CSS：骨格の装飾
となります。
このことを頭に入れていただいた上で、HTMLとCSSでできることについて紹介します。
プログラミングの基礎を習得できる
プログラミングをはじめた人が、1番最初に理解するべき言語はHTMLとCSSです。
理由は、HTMLとCSSが初心者にとって一番理解しやすい言語と言えるからです。
多くのプログラミングスクールではHTMLとCSSがいまいち理解できないのにも関わらず、すぐにRubyやPHPを学ばせようとします。
プログラミング初心者の中にもすぐに理解できる人もいるのですが、基礎や考え方、思考が出来上がっていないと、深くは理解できない可能性があります。
HTMLやCSSを最初にマスターしておくことは、今後プログラミングを理解して仕事にするために必要なことです。
プログラミング言語はツールですが、ただできればいいだけではなく、論理的思考や管理能力がなければ、良いコードやサービスを作ることができません。
今後のことをエンジニア人生を考えるのであれば、はじめにHTMLとCSSから勉強することが重要です。
ホームページを作ることができる
HTMLとCSSを習得する大きなメリットはホームページが作れることです。
むしろ、HTMLとCSSを使わないと、みなさんが普段見ているホームページを作ることができません。
HTMLとCSSは画面デザインを表現できますが、PHPやRubyのように転職活動をする際に人気の言語はデータベースを構築して、Webサービスを構築することがメインの役割です。
RubyやPHPを使用して、良いサービスを作ることができても、デザインや画面設計がめちゃくちゃだとサービスをうまく使えないので、サービスとしては全く無意味です。
そのため、今後、良いサービスを作って、いろんな人に使ってもらいたいと考えている人ほど、HTMLとCSSをマスターすることが必要と言えます。
お金が稼げるようになる
クラウドソーシングで1番案件が多く、稼ぎやすいと言われているのが、WEB制作です。
このWEB制作は主にLP（ランディングページ）、Wordpressを使ったコーポレートサイト が多いため、HTMLとCSSさえできれば、副業としても飛躍することができます。
PHPとRubyの場合、副業として働くにしても、最低限実務経験が必要です。
実務経験があることが、信用につながりますし、仕事を受ける上でのマナーです。副業でやるとなると、PHPやRubyの案件をとることがなかなか難しいので、副業でやるなら、HTMLとCSSをマスターすべき。
ちなみ、WEB制作での案件相場はこんな感じ。
LP制作：￥200,000〜
コーポレートサイト ：￥300,000〜
そのほかにも保守・運用まで獲得できれば、かなり良い稼ぎになりますね。
エンジニアになるための大きな一歩
前述のように、HTMLとCSSでは、プログラミングを学ぶための基礎的な考え方が学べます。
まずはHTMLとCSSをマスターすることが大切で、その後にデータベース系の言語(PHP, Ruby)、もしくはフロント系の言語（Javascript）へとスキルアップをしていくのがいいでしょう。
基礎ができていないのにもかかわらず、高度なことを始めてしまうと、どうしても理解が浅くなります。
また、せっかく勉強したのに定着していなかったりと効率が非常に悪い。
効率よく学習を続けてスキルアップするたmにも、HTMLとCSSは確実に身に付けておきましょう。
次は、HTMLとCSSが難しいと感じてしまう理由を3つご紹介します。
HTMLとCSSが難しい3つの理由
1.プログラミングを書くこと自体に慣れていない
プログラミングの学習を始めたばかりの時は、なぜ<div>が必要なのか、classとは何なのか？
と言った簡単なことすら理解ができませんでした。
頭では理解しているけど、うまくコードで表現できなかったり、予想外のエラーが出てしまうとそこで詰まる。
これは、プログラミング自体に慣れることを疎かにしたからに他なりません。
ちゃんとステップを踏んで、習得しない限りいつまでたっても苦手意識から脱出できません
コードがなぜそうなるかわからない
プログラミングに関して、基礎が理解できていなければ、仕組みや法則を理解することが難しくなります。
私自身、プログラミングを学び始めた頃、CSSがうまく適用されないと言う自体によく遭遇していました。
理由はclassの付け方や、ブロックの作り方が間違っていたからです。「なぜ使えないのかわからない」と、googleで検索しまくったのを覚えています。
これは、基礎ができないからハマってしまったエラーで、HTMLにclassを付けてCSSを適応させるというルールを覚えていないからでした。
こうしたエラーを避けるためには、プログラミングはこう言うものだと法則を覚えるしかありません。
画面に思い通りに表示されない
せっかく作ったコードが思い通りに画面に表示されないことが続くと、心が折れます。
ただ、HTMLとCSSが理解できても、思い通りに表示できないことはよくあります。
例えば、
- divタグで作ったブロックを中央に持ってきたい。だけど、なかなか真ん中にこない。
- ナビバーを作るのがうまくいかない。
- 適応したい場所に色がつかない
と言ったように、最初の頃は思い通りにいかなくて大変でした
思い通りにいかないことがあると、難しいと感じるのは当たり前ですよね。
もし、今までの理由に当てはまり、今もHTMLとCSSが難しいと感じているのであれば、これから紹介する4つの方法を試してみてください。
HTMLとCSSがスッキリわかる4つの方法
1. プログラミングの基本ルールを覚える
基本ルールを無視して進めてしまうと、わかるものもわかりません。
まずは、HTMLとCSSのルールを頭に入れましょう。
ルールと言ってもそれほど多いわけではなく、2点だけ覚えてください。
1.タグについて
- 骨格をつくるタグ：section,div等
- 画像をいれるためのタグ：image等
- 文章を入れるタグ：h2, p,span等
2.CSSを適用する方法
- HTMLにclassを付けてCSSを適応させる
HTML : <div class = "hogehoge"> Hogehoge</div> hogehogeクラスを適応
CSS : .hogehoge {
color : #000;} Hogehogeの文字を黒色にする
始めたばかりの人にとっては、「なぜこうなるの？」と言う部分がたくさん出てきます。
まずは「そういうものだ」と覚え切りましょう。算数で言うところの、1 + 1 = 2のようなものです。
2. ブロックを思い通りの場所に動かす方法を知る
ブロックとはいわゆる骨格のことです。
この骨格を作るタグは先ほどご紹介したこちらになります。
骨格をつくるタグ：section,div等
タグの特徴を挙げてみます。
- 縦にならぶ
- 動かすことができる
動かすことができるとは、margin,paddingのように余白を作って動かす方法や、relativeを使って動かす方法があります。
Webサイトを作る際には、これらのことをうまく使って、デザインをコーディングしていきます。
そのため、覚えていないとなかなかうまく進みませんが、覚えることができれば、サクサク進みます。
実際、Web制作をしている時に頻繁に使うCSSをリストアップしました。
ぜひ使い方を覚えてみてくださいね。
- position:absolute;
- margin
- padding
- display:flex;
詳しい解説は別記事で紹介します。
この4つの使い方さえわかれば、基礎的な部分は十分です。
3. 好きなサイトのコードを見る
GoogleCromeのデベロッパーツールを使うことで、Webサイトのソースを見ることができます。
好きなブログやWebメディアがあれば、Google Cromeのデベロッパーツールでコードを覗き見しましょう。
実際にどのようなタグが使われているかや、適応しているCSSの種類を知ることができます
実際に作られているWebサイトをみて、「こうやって作られているのか」と理解することで、インプットを増やすことができるでしょう。
こうした積み重ねによって、自分でサイトを作る時、どのようなHTMLの構成にして、どんなCSSを適応させるべきか理解できます。
最初はコードをみてもわからないかもしれません。でも、勉強になるので、ぜひやってみてくださいね。
4. XDからpxを読み取ってコーディングする
Adobeの提供しているXDでは、Webデザインやワイヤーフレームを作ることができます。
AdobeXD
このソフトを使って作られたデザインはpx数を知ることができ、読み取った数値を元に、デザイン通りのコーディングをすることが可能です。
クラウドワークスの案件を見ると、XDで作られたデザインカンプからコーディングをするという案件が多く存在します。
ルールを覚えたら、XDからpxを読み取ってコーディングをしてみてください。
最初はかなり時間がかかります。
しかし、これができるようになると、ルールが体に染み付いることでしょう。
今後の勉強もよりハードルの高いものに挑戦することができるようになります。
HTMLとCSSがわからない時にチェックするポイント
難しい教科書を使っていないか
プログラミングを学ぶための書籍はたくさんあります。しかし、全ての書籍が初心者向けではありません。
エンジニア経験者向けの本ばかりで、初学者にとっては全く意味のわからないものも多くあります。
そのため、初心者の方にオススメの勉強方法は動画を見て学習することで、その中でもオススメなのは、「プロゲート」と「ドットインストール」です。
コーディングしながらの学習ハードルが書籍よりも低いため、頭に入りやすくなります。
エンジニアとして働いている人に学習方法を聞いても、初心者はまず「プロゲート」「ドットインストール」をはじめにやってください。
と言うほど、信頼されている学習方法です。
まずは、難しい本ではなく、「プロゲート」と「ドットインストール」で基礎を固めてください。
関連記事
→プロゲートだけでは副業はできませんが、この方法を使えばできるようになります
わからない部分をわからないままにしていないか
プログラミングを勉強をしていると、「わからない！」と言う部分がたくさん出てきます。
ただ最初の部分をわからないままにしていると、難易度の高いことを学習した際、わからなくなります。
そうした状況をなくすため、初心者の段階でやっていることは、全て理解するようにしてください。
かと言って、「プロゲート」と「ドットインストール」を何周もする必要はありません。
例えば、divタグと言われたら、「あーそれね。知ってる」くらいのレベルで理解できていれば大丈夫です。
あとは実践で定着させればいいので、全く理解していないと言う状況は避けるようにしてくださいね。
1人で学習していないか
困った時に聞いたり、わからないことを共有できる仲間は学習する時には大切です。
XDからコーディングするとき、思い通りに動かなかったり、エラーは起きてしまいます。
しかし、エラーから逃げてしまっては、上達するものも上達しません。そうしたとき、わからないところを一緒に悩んでくれる仲間がいると心強く、逆に勉強仲間がわからないところがあれば、教えることもできます。
教え合うことによる学習効果は研究でも実証されていて、学んだことを、アウトプット（つまり、教える）ことで定着率が上がります。
アウトプットをするために仲間がいる環境を作ることは、プログラミング学習を続けるためには大切です。
HTMLとCSSはもうギブアップ！となる前に
これまでHTMLとCSSが難しいと感じる理由と対策方法について解説してきました。
是非、試してみても難しいと感じてしまう場合は、スクールや他の学習方法を検討してみることも必要です。
実際にスクールに通った経験者や私自身が通ってみた上で、オススメのプログラミングスクールをまとめましたので、参考にしてくださいね。
オススメのプログラミングスクールはこちら→30歳でエンジニアになった私が厳選！プログラミングスクール3社