プロのWeb開発エンジニアが教える、これからHTML+CSSを勉強したい人の勉強方法
記事IT・テクノロジー
Webシステム開発の会社、Nickel Lab. です。
今回は弊社のエンジニアがオススメする、HTML+CSSを覚えていきたい人の為の勉強方法を公開します！
この方法を実践すれば、がむしゃらに勉強をするより素早く習得することができますので、是非試してみて下さい。
よくつまづくポイントは皆同じ
HTML+CSSを始めるとつまづくポイントはいくつかありますが、皆さん大体同じだったりします。
なにがわからないのかわからない
できないところを検索しても解決できない
ある程度わかった後でも、プロみたいな綺麗な作り方がわからない
それ！と思った方には、今回の記事はかなり効果的かなと思います！
実践はとても簡単です。
順番通りにやってみましょう。
1.HTML+CSSの基本中の基本を覚えよう（むしろ基本だけでいい）
どんな方法でも、基本中の基本をある程度把握していなければ、手を動かすことができないものです。なので、やっぱりそこは触っておきましょう。
HTMLであれば、
・<head>と<body>
・cssの読み方
・見出しと文章の書き方
・<div>の使い方
・タグにclassを指定する方法
これだけ！これだけわかればある程度のものは作れるようになります。
フォームを作ったり、クリックしたら何か出来たり。といった事は後回しにしましょう。
タグでいうと、以下のものがわかれば大丈夫です。
<html>
<head>
<body>
<h1> <h2>
<p>
<div>
まずはこれらのタグを使って、適当な小説から文章を構成してみてください。
小説には見出しがあって、段落がありますよね。それを意識してコーディングしてみましょう。
ここまでを習得したら、次はCSSを覚えていきます。
2.CSSはレイアウトの仕方を覚えよう
cssですが、文章をどこに配置するかだけを覚えていきましょう。
・margin
・padding
・flexレイアウト
・girdレイアウト
・border
これらだけを使って、適当な書類をそのままのレイアウトで作ってみて下さい。
flexとgridは少し難しいですが、<div>を横並びできるようになれば、とりあえずそれだけでOKです。
・align-items
・justify-content
この２つの使い方を覚えましょう！
書類を見つけるには、
お知らせ 書類
などで検索し、好きな書類を選んでHTML+CSSで作成してみてください。
borderは、レイアウトでできる余白や配置場所を把握するのに使います。書類をそのまま真似てつくってもいいですが、cssを使ったタグすべてにborderを書いておくと、具体的なレイアウトが実際に見えるようになりますので、わかりやすいと思います。
ここまでできたら、いよいよWebサイトを作っていきます。
3. Webサイトを真似て作ってみよう
さて、いよいよ本格的にWebサイトを作っていきましょう。
ここまで覚えたものだけで作れるの？と思うかもしれませんが、作れません。
さすがにそこまで簡単ではないです。
しかし、基本のタグとレイアウトさえわかれば、配置は真似することができますよね？ そこを頑張ってみましょう。
真似するWebサイトは、コーポレートサイトがオススメです。
複数のページがあると思いますが、今回は企業概要ページを真似してみましょう。
シンプルな構成で、真似がしやすいかなと思います。
参考に良いサイトには、自分がこんなサイトを作りたい！と思うようなデザインの会社サイトがオススメです！
好きなサイトを真似することで楽しく作ることができますので、モチベーションを保つことができます。
さて、レイアウトができたとしても文字の色や背景など、細かい部分をつくる知識はもってない……困りますよね？ そこは、自分でどんどん検索をして、作り方を調べてみて下さい。
文字の色を付ける方法であれば、
css 文字色
などで検索し、cssの書き方を見つけ、実践してみましょう。
こうすることで、Webサイト制作などのエンジニアに必要な、わからないことを検索して解決する力が習得できます。これはとても大切で、どんなプロであっても必ずわからないことが出てくるのです。そして周りの誰もわからない……というのは、結構よくある話です。その度に質問サイトで利用すると回答がくるまでなにもできませんし、なにより今後仕事をするときにとても困るようになるでしょう。
エンジニアに最も必要な能力が、実はこの自力で解決する能力です。
しかし、わからないことがわからないということは必ずでてきますよね？ 調べる単語が思いつかない。とか。
そこで、真似してるWebサイトのソースを覗き見しちゃいましょう。
Chromeデベロッパーツールの活用
クロームには、デベロッパーツールという便利なものがあります。クロールの右上にある設定から、「その他のツール」->「デベロッパーツール」を選択します。
そうすると、なにやらブラウザの横に出てきましたね。
その上にある、要素をクリックしてみてください。
これは、そのWebサイトのHTMLソースです。これだけでは何がなにやらなので、要素の左にある矢印マークをクリックします。
そして、Webサイト上のわからない部分をクリックしてみましょう。そこのHTMLタグが表示されたでしょうか？
ここまできたら、わからないことが見えるようになります。スタイルという部分を見てみると、このタグに適用されているCSSを見ることができます。
表示されているCSSでわからないものがあった時は、そのCSSの上にカーソルを持っていくとチェックボックが表示されますので、チェックを外してみましょう。そのCSSの適用を外すことができます！
これで、わからないCSSがどんな効果をもっているのかを理解することができます。もし、チェックを外してもいまいちどんな効果かわからなかった場合は、そのCSS自体を検索することで、効果を知ることができますね。
さぁここまでをWebサイトができあがるまで繰り返しましょう。
最初は多くのわからない部分があって、何度も何度も繰り返す必要がありますが、これを行うことで制作に重要なデベロッパーツールの使い方を覚えたり、一度知ったけれど、ど忘れしてしまったCSSの効果を再度知ることで、復習をすることができ、記憶の定着ができます！
大変な作業で、きついな〜と思うかもしれませんが、HTMLとCSSを最初にじっくり勉強するよりも、実際に作りながら楽しく勉強することができ、もっと早く習得することができるようになると思います。
それでももし、どうしてもわからない……！ と壁にぶち当たってしまったら、コチラでビデオチャット相談を受付ております。
わからない時は素直に人に聞く！というのも、大切ですね。
最後に、これも大切なことです。
ある程度作れるようになった後は、キレイなコードの書き方を覚えましょう
綺麗なコードを書くと、
・他人にも理解しやすいコードになるので、チーム制作ができるようになる
・バグのでにくいコードを書くことができるようになる
といった効果があり、将来必ず役に立ちます。
また、クリエイターとして、美しい作品をつくることはとても良いことだと思いませんか？ 作ったものに自信を持てたり、もう一歩ステップアップしたいといった気持ちも芽生えてくると思います。
今回はHTML+CSSを楽しく覚える方法を書いてみました。
これを見て作れるようになったよ！といった人、参考になったよ！と思った人は是非、お気に入り（ハート）ボタンをお願いします！
ありがとうございました。
