HTML＆CSS勉強法

2023年1月13日2023年1月14日

HTML＆CSS勉強法

HTML＆CSSの勉強を始めたいけどどのように勉強したら良いのか分からない。

やはり学校に通うべき？と迷っている方もいらっしゃると思います。

結論、HTML＆CSSは独学でも学べます。

今回はHTML＆CSS全くの初心者が独学で勉強するにはまず何から始めたら良いのか勉強方法をお伝えします。

ポートフォリオサイトを自作したいのであればHTML＆CSSは必須で、初心者が1番最初に学ぶのに適した言語です。

他のプログラミング言語と比べても難易度は高くないので初心者が独学で学ぶことも十分可能です。

用意するもの

パソコン

いわゆるフツーのパソコンで大丈夫です。今お使いのパソコンで十分です。

ただグラフィック系も学んでいきたいとか、そろそろ買い替えたいのでどれにしようか迷ってるという方は

• Corei5
• 画面サイズ15インチ以上
• メモリ16GB
• ストレージSSD256GB

はあると良いかなと思います。

Webブラウザ

chromeやSafariやEdg。まずはお使いのブラウザで良いでしょう。

テキストエディタ

テキストエディタとはメモ帳などテキストが書けるものですが、マークアップに適したテキストエディタがありますのでそちらを使いましょう。

オススメのテキストエディタ

・VisualStudioCode（ビジュアルスタジオコード）

無料なのに沢山の機能が搭載されていてとても使いやすい。
更にプラグインで便利機能の追加もできます。
使用している方も大勢いて検索すれば使い方や分からないことをすぐに調べることができるのでVisualStudioCodeで間違いないと思います。

・Atom

無料で人気があります。
シンプルで使いやすくWindowsでもMacでも使用可能です。
また拡張機能を追加することもできます。

勉強手順

それでは準備が整ったところで手順を紹介していきます。

1冊ですべて身につくHTML＆CSSとWebデザイン

本のタイトルどおり本当にこの1冊でいろいろ身につきます。

この本を最初からひと通りやってみましょう。
最後までやるとサイトが1つ出来上がるので達成感があります。

レスポンシブにも対応していてとても参考になります。

初学者でも大変にわかりやすく、他の大勢の方もお勧めしていますが本当にオススメの一冊です。

私もいろんな本を買って勉強しましたが、最初に選ぶのはサイトが1つできあがる本にすると達成感もあるし楽しく勉強できるのでオススメです。

HTML＆CSSとWebデザインが1冊できちんと身につく本

次におすすめの本が「HTML＆CSSとWebデザインが1冊できちんと身につく本」です。

この本では違うタイプの4つのレイアウトサイトを作りながら学ぶことができます。

さらにレスポンシブも作りながら学ぶことができ実際の現場で使うWebデザインの知識と基礎がしっかり身につく一冊です。

Progate

ある程度は理解して手を動かしてからの方がProgateは理解しやすいのかなと思います。

しかもProgateはスマホアプリもありますので電車の中やスキマ時間にできます。
クリエータークエストをやりつつ同時進行でスキマ時間にProgateという感じで進めるのも良いでしょう。

模写コーディング

ここまで勉強してきたら次は模写コーディングをしてみましょう。

実際のサイトを模写コーディングするのも良いですがまだまだ難易度は高いです。

そこでおすすめするのは模写コーディングサイトです。

検索すれば模写コーディングサイトたくさんありますが、「codestep」がオススメです。

入門編は実にシンプルでとても分かりやすい構成になっています。
まずは答えを見ながらでも良いので進めていくと出来上がる頃にはカッコいいレイアウトまで学べてしまいます。

1つずつレベルアップしていくとたくさんのことが学べるので本当にオススメです。

ここまで勉強してくるとかなり理解できているのでコーディングも楽しくなって来ます。

次はJavaScript、Phpと進んで行くのも良いでしょう。

まとめ

独学で勉強しているとつまずいた時本当にツライですが、楽しく学べるYouTubeやサイトが数多くありますのでご自分にあった勉強法を見つけてみましょう。