-
HTML/CSS
- css
- html
【初心者必読！】「HTML・CSSは難しい」と感じたときにまず試したい解決策
「HTMLやCSSは簡単」「プログラミング初心者は学習しやすいHTMLやCSSから学ぶとよい」
様々なwebサイトや個人ブログでこんなふうに書かれているのを見たことがあるかもしれません。
しかしこれまでプログラミングの知識がなかった初心者の中には「難しい」と感じる人も多く、実際現場で活躍していても過去を振り返って「HTML・CSSも慣れるまでに時間を要した」と言う方は少なくありません。
そんなWeb制作初心者が「難しい」「挫折しそう…」と感じたときには、まずこちらの記事でご紹介する4つの解決策を試してみてください。
- HTMLとCSSの役割を改めて理解する
- 自分のレベルに合った参考書を使う
- レベルを落として学習する
- 独学をやめる
HTMLとCSSの役割を改めて理解する
まず、「HTMLとCSSのとらえ方」という抽象的な話をします。
HTMLとCSSが難しいと思う人は、HTMLとCSSのコードを見て複雑そうだと感じたり、HTMLとCSSを学習して何ができるのかを把握してないことが多いでしょう。
HTMLとCSSは「Webサイトの土台と見た目をつくるもの」です。
単純にそれだけです。
様々な仕組みをつくるプログラミング言語とは違い(HTML/CSSはマークアップ言語といいます)、単に文字や色などのデザイン部分を担っているだけです。
自分が書いた一行のコードが、そのままブラウザに反映されるというシンプルなものになります。
なので、難しくとらえる必要はありません。
HTMLとCSSは知らない人から見るとプログラミング言語と混同されそうですが、プログラミング言語と異なり、コードを一行書いたら、その一行分がブラウザに表示されるという単純なものです。
HTMLとCSSで何ができるかと学習方法に関して以下の記事でも解説しているので、そちらも合わせてどうぞ。
自分のレベルに合った参考書を使う
学習時に参考書を使っている場合は、その参考書が自分のレベルに合っていることが大切です。
例えば、HTMLとCSSを学び始めた最初の頃にjQueryやWordPress（PHP）を用いたWebサイトを作り始めるのは、難しいと感じるはずです。
Webサイトを作成するには、こまかい前提知識が必要とされるからですね。
もちろん、そもそもが難しい分野（IT知識）の学習になるのですが、もしHTMLとCSSが難しくて先に進めない！と感じた方は、以下の記事でレベル別の学習書籍を紹介しているので参考にしてみてください。
レベルを落として学習する
インターネットを活用して学習を進める方も多いですが、最大の落とし穴は自分のレベルが分からなくなるというところです。
インターネットは断片的な知識をつまみ食いする形で得るのには最適ですが、系統立てて理解を深めるにはレベルの高い学習サイトを利用したり、信頼できるオンラインスクールに通うほかありません。
Webの知識が全くない場合は、初心者向けの参考書を1冊準備し、必要な背景知識をつけた上で実践的な学習を行うのが最も効率的です。
独学をやめる
独学で今までやってきたものの、何度もつまずき今にも挫折しそうだという方は思い切って独学をやめてしまいましょう。
金銭的な理由で独学を続けたいという場合でも、メンターやプログラミングスクールを少し体験してみてもよいでしょう。
無料体験や初月は安価で利用できる場合もあります。
メンターを見つける
メンター(教えてくれる人)を探す方法です。
しっかり教えてくれるメンターをつければ、HTMLとCSSが難しいと思う気持ちを軽減させることが見込めます。
メンターがいると、分からないところを質問できますし、自分が何をすればいいかも明確になります。
例えば、以下のサイトでメンターを見つけることができます。
上記サービスに登録して、HTML/CSSを教えると言っている人や、プログラミング系のことを教えてくれる人を検索して見つけてみてください。
プログラミングスクールに通う（オンライン可）
プログラミングスクールに入会して、講師に教えてもらうのもよいです。
有名なプログラミングスクールには例えば以下のようなものがあります。
上記以外にもたくさんのプログラミングスクールがあります。実際に公式サイトなどをみて信頼できそうなスクールを選んでみてください。
初心者がHTML・CSSを難しいと感じる理由
ほとんどの方が以下のどこかで難しいと感じている可能性があります。
- コードに慣れていない
- 思い通りに表示されない
- HTMLタグやCSSプロパティが分からない
- コードを覚えようとしている
自分がつまずいたポイントを明確にし、1つ1つ解決することで道は開けます。
コードに慣れていない
HTMLとCSSは頭だけで考えると、難しいと感じやすいです。例えるとすると、英語の読み書きをせずに英語を理解しようとしているようなものです。
なのでまず、HTMLとCSSを使って簡単な文字や図形をブラウザに表示してみるのがいいです。
HTMLとCSSを学習するうえで一番大切なことは手を動かすことです。
実際に手を動かすことをメインでやっていくことで、理解が早まります。
頭と身体の両方を使うことで理解が深まります。
よってまずは、簡単なコードからブラウザに表示することから始め、コードに慣れることを意識してみましょう。
さて、具体例をみていきましょう。
下のコードを見てください。
<p class="hello">こんにちは！</p>上のコードをブラウザに表示すると下のようになります。
この一行のコードだと分かりやすいですよね。
先ほどの文字に背景色をつけてみます。
下のCSSコードを適用します。
.hello{
background-color: lightgreen;
}すると以下のようになります。
背景色がつきました。
自分で簡単なコードを書いて、それによりブラウザの表示が変わるという体験をすることで、HTML/CSSの理解が深まり、「自分でもできそう！」という自信につながります。
小さな成功体験を積み重ねるにはコーディング教材を使ってみるのもおすすめです。
※上記の教材に関しては、「Progate(プロゲート)」やYouTube、本などでHTMLとCSSの基礎知識をつけてから取り組んでみてください。YouTubeに関しては、「はじめてのHTML入門講座」「はじめてのCSS入門講座」がおすすめです。
本に関しては以下の記事を参考にしてみてください。
思い通りに表示されない
CSSが難しいと感じる一番のポイントはレイアウトが思い通りにならない点です。ブラウザによって表示が変わったり、設定したはずのない余白やレイアウトができたりします。コードを試しても、表示が変わらないことも多いです。
要素と要素を近づけたいのに設定したことのないはずの余白がある、文字を中央寄せしたはずが全く動かないという経験があると思います。CSSのプロパティの特性やブラウザによる特徴を知らなければ解決できません。
多くの入門本やオンライン学習サービスでは説明が抜けています。Googleで検索すれば解決しますが、いまいちスッキリする答えはほとんどありません。最終的に何が悪かったのかがよくわからないため、難しいと感じると思います。
HTMLタグやCSSプロパティが分からない
自分の思い描いたレイアウトや機能をWebサイトに入れるために、どんなプロパティを使えばいいかが分からない、もしくは知らないこともあります。CSSのプロパティはたくさんあり、その全てを覚えることはできません。
また、プロパティの組み合わせで実現することもたくさんあります。例えば、ボタンをクリックしたときにボタンが押されるような動作は複数のプロパティで作られます。知っていないと作れない機能があるため、難しいと感じる人もいると思います。
コードを覚えようとしている
コードそのものは色々なものをブラウザに表示していくうえで、覚えていきます。
また、ネットで検索すればHTMLとCSSレベルのことならたくさんの情報が出てくるので安心してください。
コードは自然に覚えていきますし、覚えてなくてもネットで検索すれば問題ありません。
学校のテストみたいに全て覚えなくてもいいということです。
いわば、学校のテストにネットや本をもち込んでいるようなものなのです。
まとめ
いかがでしたでしょうか。
今回はHTML/CSSを難しいと感じてしまう理由やその対処法をお伝えしました。
具体的に今の状況を解決する方法としては、
- HTMLとCSSの役割を改めて理解する
- 自分のレベルに合った参考書を使う
- レベルを落として学習する
- 独学をやめる
この4つでした。
案外、初歩的な背景知識を補完することですっとスランプから抜けられる場合もありますので、どうか諦めずに上から順に試してみてください。
