【HTML/CSS】の難易度は低い?一気に成長度が上がる勉強法+おすすめの無料サイト

こんにちは、プログラミングにハマっているけーぷろです!

HTML/CSSは簡単と聞いたけど全然分からない。

どうやってHTML/CSS習得するの?

独学じゃ習得できない?

なにをしたらいいのか分からない😭

今回はこんなHTML/CSSに関する悩みを解決していきます。

この記事の信頼度

私もHTML/CSSの勉強法が分からず、挫折した経験があります。
HTML/CSSを理解しないまま、JSの勉強などをしていました。

しかし、HTML/CSSを理解しないと作りたいページが作れないのでもう一度勉強することに。
無料学習ツールなどを使い、独学で難しいホームページを作成することに成功。

今は画像を動かすことができるJQueryの勉強をしています。

HTML/CSSの難易度は?

HTML/CSSの難易度は他の言語に比べると低いです。

しかしHTML/CSSは勉強しないと習得できないです。
なにもせずにホームページのレイアウトを作成することはできません。

私はHTML/CSSの基礎を初めに勉強していなかったので、理解度が遅かったです笑

HTML/CSSが難しくなる理由、自由自在にレイアウトしよう!

次に、私が実際にHTML/CSSが難しく感じたポイントを紹介していきます。
そして、紹介したことを理解するとHTML/CSSは難しく感じないと思います!

idとdivを使いこなそう!

HTML/CSSのHTMLが文字を入力して、CSSがレイアウトするって知ってるけどそこからどうやってホームページが作成できるの?

HTML/CSSってどうやって思い通りにレイアウトできるか分からないですよね。
自分もどうやって思い通りに作れるのだろうって思ってました。

しかし、idとdivを使いこなせるようになってから激変しました!

idとdiv
  • id・・同じ名前は一つしかレイアウト(CSS)できない
  • div・・同じ名前で複数レイアウト(CSS)できる

idとdivの説明はこんな感じです。
初心者の方はidよりdivを使った方がわかりやすいです!

参考程度にこちらの動画をどうぞ!

divは一つの塊

divタグを使うことで一つのブロックを作ることができます。

ブロックにするとどうなるか?

親要素と子要素に分けることができて、レイアウトがしやすくなります!


<div class=”main”>が親要素となります。
その中に<h1>練習</h1>を書くと子要素になります。

一つのブロック(HTML)

<div class=”main”>
<h1>練習</h1>
</div>

<div class=”main”>
<h1>ブログ</h1>
</div>

親要素と小要素で反映されるCSSが異なるので注意してください!

例えば、h1のテキストを真ん中にしたい場合h1に中央揃えの指示をしてもできません。
親要素のdivのmainクラスに中央揃えの指示をする必要があります。

中央揃えをする場合(CSS)

.main{
text-align: center;
}

h1にtext align:center;をしても中央揃えにはなりません。
このややこしさが初心者が挫折するポイントだと思います。

これは何回もやっていくと慣れていくので、焦らずがんばりましょう!

positionを理解しよう!

写真を少しだけ右にずらしたい!

テキストをすこしだけずらしたい!

リストを一番右にしたい!

このように、写真やテキストを移動したい時ありますよね。

そのような時に使うのがpositionです!
positionが使えるようになると、自由自在にテキストや写真を扱うことができます!

サルワカさんのpositionの説明が非常に分かりやすいので、載せておきます。

習得できるとHTML/CSSが楽しくなるので覚えましょう!

flexboxが使えるようになると、脱初心者

flexboxってなに?

flexboxは画像やテキストを簡単に横に揃えることができる便利な方法です。

例えば画像の横にテキストを書く場合、float:left;やfloat:right;してかなりめんどくさい作業をします。
ここで意味分からないレイアウトになって嫌になります笑

そんなめんどくさい作業をflexboxを使えば、簡単に写真の横にテキストを書くことができます!
flexboxのチートシートが紹介されているリンクがあるので載せておきます。

参考書よりwebサイトで勉強する方が効率良い話

HTML/CSS勉強するのに何で勉強していますか?

何も知らない人は本屋さんに行って「HTML/CSS」の入門書を買うと思います。
しかし、このような入門書は薄い本から分厚い本まであります。
内容が薄くて物足りない本から内容が多すぎて嫌になる本まであります。

参考書で勉強すると、パソコン触りながら手を動かす作業がしにくいと思います。
プログラミングは実際に手を動かさないと覚えにくいので、初心者の方はweb学習サイトで勉強するのをおすすめします。

有名なweb学習サイトを載せておきます。

Progate

Progate

無料でいろんな言語の勉強ができますが、月々900円払うとレベルが高い知識を学ぶことができます。
実際に手を動かしながらできるため初心者にはかなりおすすめです。

ドットインストール

ドットインストール

ドットインストールは3分の動画でプログラミングを教えてくれます。

覚えるのではなく、自然に覚える

学習サイトで勉強していくと、様々なプロパティが出てくると思います。
初心者の人はプロパティを英単語のように暗記しがちですが、無理に暗記しなくていいです!

「こんなやり方があるんだ!」と知るだけで十分です。
実際に、プログラミングをする時に「あのやり方なんやっけ」と分からない時に調べていきましょう。

そうすることによって、簡単にインプットとアウトプットができるので効率よく使いこなせるようになります!

最後に

今回はHTML/CSSが苦手な人に、克服する知識を紹介しました。

今回紹介したこと以外にも、HTML/CSSに必要な知識はたくさんあります!
Googleにたくさんの人が知識を無料で公開しているので、たくさん調べて理解度を上げていきましょう!

HTML/CSSでホームページを作ることがでできれば、もうあなたは「コーディング作業はできます」と胸を張って言えます!笑

コツコツと諦めずにプログラミング学習を頑張っていきましょう!

アーカイブ