-
HTML/CSS
- css
- html
- jQuery
HTML・CSSでWebサイトを作るための勉強方法とは
近年、副業としてWeb制作をやりたい人が増えてきています。ライティングやポイントサイトに比べて単価が高く、スキルも身につくため本業に活かせると人気の副業ですが、未経験からWeb制作をするにはHTML、CSSを勉強する必要があります。
HTML、CSSができなければ、Webサイトを作ることはできません。Web制作で副業をするにはHTML、CSSが必須スキルです。本記事ではHTML、CSSの勉強方法をロードマップ形式で紹介します。
HTML CSSを独学で勉強する方法はProgateと本を使う
まずはProgateから始めよう
HTMLとCSSを勉強するなら、まずはProgateがお勧めです。Progateとはオンラインでプログラミングを学べるWebサイトです。スライドや実践方式で学ぶ事ができるので、初心者にも分かりやすいのが人気の理由です。
Progateに登録をしたら、有料プランのHTML&CSS上級編まで一通りやりましょう。有料プランは月1080円と本一冊買うくらいの値段です。上級編までやっても2週間もあれば終わらせる事ができるので、Progateでまず基礎固めをすることをお勧めします。
本を一冊使って勉強する
Progateが終わったら、本を一冊勉強することをおすすめします。Progateはスライドで絵を使って分かりやすく解説していますが、その分、詳しい説明が不足しています。
その点本には詳しい説明が書いてあり、理解が深まります。理解が深まることで応用が利くようになります。
副業やフリーランスでWeb制作をする場合、知識の応用が必要になります。そのため、理解を深めるために本を使って勉強することは不可欠です。おすすめの本を紹介するので、ぜひやってみてください。
HTML CSSの基本を勉強したらサイトを作ってよう
よく見るサイトや有名サイトを模写しよう
Progateや本の勉強が終わったら、自分のよく見るサイトや有名なサイトを模写して制作してみましょう。すると、今まで理解できていなかったところや新たな発見をする事ができます。
必ずしも正確に模写する必要はありませんが、基本的なレイアウトや崩れ、レスポンシブデザインなどを意識することで、レベルの高いポートフォリオを作成する事ができます。
Progateや本を使って勉強をすれば、Webサイトを模写する事はできる様になっているはずなので、是非チャレンジしてみましょう。どんなWebサイトを模写すればいいか分からないという人のために、おすすめのサイトを紹介します。
iSara：一部jQueryが必要になりますが、できるところだけで構いません。
Dental Clinic：コーポレート型のサイトを作りたい人向けです。
オリジナルサイトを作ってみよう
サイトを模写できるようになったら、オリジナルサイトを作ってみましょう。架空の会社にしてもいいですし、自己紹介サイトでもいいです。とにかく、オリジナルのコードを書いていきましょう。
おすすめは自己紹介サイトです。クラウドソーシングなどでクライアントへ提案をする際にも役立ちます。提案文で「HTML、CSSコードが書けます」と文章で書くよりも、実際のポートフォリオをみてもらった方が信頼性が高いので、案件を受注できる確率が上がります。
サイトを作れたら実際の案件に提案しよう
ここまでくればあとはクラウドソーシングなどを使って、実際の案件受注にむけて行動しても良いかもしれません。最初は提案しても選ばれることは難しいかもしれませんが、諦めずに提案をし続けることで提案力が上がり、案件を獲得できるようになるでしょう。
より早く案件を得るためには自己紹介サイトを作り、模写したコードを自己紹介サイトに入ることをおすすめします。クライアントにスキルの証明ができて信頼性も上がるため、発注してもらいやすくなります。
ただし、ポートフォリオに模写サイトを載せる場合は、オリジナルではなく模写したサイトであることとを注釈で入れておきましょう。トラブル回避のためにも忘れないようにしましょう。
HTML CSSの次はjQueryを勉強しよう
HTML、CSSを学び、Webサイトが作れるようになったらjQueryを勉強しましょう。jQueryを使えば、Webサイトに動きを簡単に動きをつけれます。Webページでよく見る「アイコンをクリックするとメニューがでてくる」「画像が自動的に切り替わる」などのアニメーションにはjQueryが使わレている事が多いです。
jQueryはProgateで学ぶ事ができます。HTML&CSSコースを終えたら、一通りjQueryのコースもやってみることをおすすめします。下記リンクで初心者向けにjQueryを解説しるので、ぜひ一読してください。
jQueryを使えるようになれば、クラウドソーシングなどで受注できる案件の幅を広げる事ができます。提案がなかなか選ばれないときなど、時間があるときに勉強していきましょう。
まとめ
HTML、CSSの勉強方法について解説しました。副業で案件を取るためにはインプットだけでなく、アウトプットも大切になります。アウトプットは実際にコードを書いてみたり、アレンジしてみることで深く理解する事ができます。
「このデザインかっこいいなぁ」「こんなサイトの制作案件があったなぁ」と感じたら、まず書いてみましょう。わからない部分はProgateや本で復習したり、Googleで検索してみましょう。
最初は難しくても、そのうちだんだんとコードが書けてくる感覚を掴む事ができるので、ぜひ最後までHTML・CSSの勉強を続けてみましょう。
